feat: improve cli (#420)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

README.md

@@ -21,6 +21,14 @@
 
 ## Usage
 
+### Wizard
+
+We provided a CLI tool to help you set up your project, or migrate from the legacy config to the new flat config.
+
+```bash
+npx @antfu/eslint-config@latest
+```
+
 ### Install
 
 ```bash
@@ -91,16 +99,6 @@ For example:
 }
 ```
 
-### Migration
-
-We provided an experimental CLI tool to help you migrate from the legacy config to the new flat config.
-
-```bash
-npx @antfu/eslint-config@latest
-```
-
-Before running the migration, make sure to commit your unsaved changes first.
-
 ## VS Code support (auto fix)
 
 Install [VS Code ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

package.json

@@ -88,6 +88,7 @@
   "dependencies": {
     "@antfu/eslint-define-config": "^1.23.0-2",
     "@antfu/install-pkg": "^0.3.1",
+    "@clack/prompts": "^0.7.0",
     "@eslint-types/jsdoc": "46.8.2-1",
     "@eslint-types/typescript-eslint": "^7.0.2",
     "@eslint-types/unicorn": "^51.0.1",
@@ -117,7 +118,6 @@
     "local-pkg": "^0.5.0",
     "parse-gitignore": "^2.0.0",
     "picocolors": "^1.0.0",
-    "prompts": "^2.4.2",
     "toml-eslint-parser": "^0.9.3",
     "vue-eslint-parser": "^9.4.2",
     "yaml-eslint-parser": "^1.2.2",

src/cli/constants.ts

@@ -1,13 +1,8 @@
 import c from 'picocolors'
-import { devDependencies, version } from '../../package.json'
+import pkgJson from '../../package.json'
+import type { ExtraLibrariesOption, FrameworkOption, PromItem } from './types'
 
-export const ARROW = c.cyan('→')
-export const CHECK = c.green('✔')
-export const CROSS = c.red('✘')
-export const WARN = c.yellow('ℹ')
-
-export const eslintVersion = devDependencies.eslint
-export { version }
+export { pkgJson }
 
 export const vscodeSettingsString = `
   // Enable the ESlint flat config support
@@ -53,3 +48,62 @@ export const vscodeSettingsString = `
     "astro",
   ]
 `
+
+export const frameworkOptions: PromItem<FrameworkOption>[] = [
+  {
+    label: c.green('Vue'),
+    value: 'vue',
+  },
+  {
+    label: c.cyan('React'),
+    value: 'react',
+  },
+  {
+    label: c.red('Svelte'),
+    value: 'svelte',
+  },
+  {
+    label: c.magenta('Astro'),
+    value: 'astro',
+  },
+  {
+    label: c.blue('Slidev'),
+    value: 'slidev',
+  },
+]
+
+export const frameworks: FrameworkOption[] = frameworkOptions.map(({ value }) => (value))
+
+export const extraOptions: PromItem<ExtraLibrariesOption>[] = [
+  {
+    hint: 'Use external formatters (Prettier and/or dprint) to format files that ESLint cannot handle yet (.css, .html, etc)',
+    label: c.red('Formatter'),
+    value: 'formatter',
+  },
+  {
+    label: c.cyan('UnoCSS'),
+    value: 'unocss',
+  },
+]
+
+export const extra: ExtraLibrariesOption[] = extraOptions.map(({ value }) => (value))
+
+export const dependenciesMap = {
+  astro: [
+    'eslint-plugin-astro',
+    'astro-eslint-parser',
+  ],
+  react: [
+    'eslint-plugin-react',
+    'eslint-plugin-react-hooks',
+    'eslint-plugin-react-refresh',
+  ],
+  slidev: [
+    'prettier-plugin-slidev',
+  ],
+  svelte: [
+    'eslint-plugin-svelte',
+    'svelte-eslint-parser',
+  ],
+  vue: [],
+} as const

src/cli/index.ts

@@ -1,13 +1,15 @@
-/* eslint-disable no-console */
 import process from 'node:process'
 import c from 'picocolors'
 import { hideBin } from 'yargs/helpers'
 import yargs from 'yargs'
+import * as p from '@clack/prompts'
 import { run } from './run'
-import { CROSS, version } from './constants'
+import { pkgJson } from './constants'
 
 function header() {
-  console.log(`\n${c.green(`@antfu/eslint-config `)}${c.dim(`v${version}`)}`)
+  // eslint-disable-next-line no-console
+  console.log('\n')
+  p.intro(`${c.green(`@antfu/eslint-config `)}${c.dim(`v${pkgJson.version}`)}`)
 }
 
 const instance = yargs(hideBin(process.argv))
@@ -17,24 +19,38 @@ const instance = yargs(hideBin(process.argv))
     '*',
     'Run the initialization or migration',
     args => args
-      .option('yes', { alias: 'y', description: 'Skip prompts and use default values', type: 'boolean' })
+      .option('yes', {
+        alias: 'y',
+        description: 'Skip prompts and use default values',
+        type: 'boolean',
+      })
+      .option('template', {
+        alias: 't',
+        description: 'Use the framework template for optimal customization: vue / react / svelte / astro',
+        type: 'string',
+      })
+      .option('extra', {
+        alias: 'e',
+        array: true,
+        description: 'Use the extra utils: formatter / perfectionist / unocss',
+        type: 'string',
+      })
       .help(),
     async (args) => {
       header()
-      console.log()
       try {
         await run(args)
       }
       catch (error) {
-        console.error(c.inverse(c.red(' Failed to migrate ')))
-        console.error(c.red(`${CROSS} ${String(error)}`))
+        p.log.error(c.inverse(c.red(' Failed to migrate ')))
+        p.log.error(c.red(`✘ ${String(error)}`))
         process.exit(1)
       }
     },
   )
   .showHelpOnFail(false)
   .alias('h', 'help')
-  .version('version', version)
+  .version('version', pkgJson.version)
   .alias('v', 'version')
 
 // eslint-disable-next-line no-unused-expressions