@frontendfyi/cli

ALPHA VERSION

This package is in a very early stage of development. I'm experimenting with how I want this CLI to work. On top of that it only supports a very small subset of frontend toolings — it for example installs React eslint dependencies when enabling Eslint automatically. Of course that isn't very flexible. This will change in the future.

There's a lot of great frontend tooling out there. But every time I start a new project, I need to combine all these things together and remember which tools I like to use. This CLI helps me in setting up my projects with the toolings I like.

What does it include?

It brings the following tools:

1. Tailwind
   1. If prettier is enabled too, it will add the tailwind prettier plugin too
   2. Tailwind PostCSS Config
   3. Optional basic CSS file with @tailwind directives
2. Prettier
   1. Includes @trivago/prettier-plugin-sort-imports for import sorting
   2. Includes Eslint prettier plugin if eslint is enabled too
3. Eslint

Framework and library detection

I currently have some extra detections built in for frameworks/libraries you might be using. Based on that I will install extra configs.

• NextJS:
  • Eslint core web vitals plugin
• Typescript:
  • Eslint Typescript/eslint plugin and config

Usage

Make sure you already have an empty project setup (a package.json should be present, this is pretty much the only requirement). So run either: npx create-vite ., npm init, or any other project starter. Once you have your basic project in place, you can run the following command in the root of your project:

npx @frontendfyi/cli@latest setup .

If you omit the . the CLI will ask you where you want to put the files instead.