Add options to generate a Flat Config

[JoostKersjes]

vuejs/create-vue#451

Things I have yet to do:

• bin/create-eslint-config.js changes
• Check if any packages contain eslint:recommended or eslint:all
• Omit FlatCompat from default + JS + no Prettier
• Add compatibility for createAliasSetting
• Only add dependencies @eslint/js & @eslint/eslintrc when actually needed

Some questions:

1. With the --ext CLI flag gone, where should the file path match patterns come from? I think create-vue can set them, but what about the manual create use case? Should both get the same default files: []?
2. Since the --ignorePath CLI flag is gone, should ignore patterns now also be part of this project? If so, should that be in this PR?
3. How would I go about testing all of the different combinations? I'll start by manually creating a bunch of projects on my local machine I guess.

[JoostKersjes]

That's me done for today. Just tested one scenario and didn't encounter errors :)

• npm create vue@latest with TS, router, pinia, ESLint and Prettier
• pnpm i
• pnpm add -D eslint@latest
• Manually changed package.json to "lint": "eslint . --fix",
• node ~/scratchpad/create-eslint-config/bin/create-eslint-config.js
  

  /* eslint-env node */
  import path from 'node:path'
  import { fileURLToPath } from 'node:url'
  
  import { FlatCompat } from '@eslint/eslintrc'
  import pluginVue from 'eslint-plugin-vue'
  import js from '@eslint/js'
  
  const __filename = fileURLToPath(import.meta.url)
  const __dirname = path.dirname(__filename)
  const compat = new FlatCompat({
    baseDirectory: __dirname,
    recommendedConfig: js.configs.recommended
  })
  
  export default [
    ...pluginVue.configs['flat/essential'],
    js.configs.recommended,
    ...compat.extends('@vue/eslint-config-typescript'),
    ...compat.extends('@vue/eslint-config-prettier/skip-formatting'),
    {
      files: [],
      languageOptions: {
        ecmaVersion: 'latest'
      }
    }
  ]

• Manually changed eslint.config.js to files: ['**/*.vue', '**/*.js', '**/*.jsx', '**/*.cjs', '**/*.mjs', '**/*.ts', '**/*.tsx', '**/*.cts', '**/*.mts'],
• pnpm lint --> Success 🎉

I don't know for sure that all the rules work properly, but a nice first result.

[JoostKersjes]

This should now be ready for review!

As for now, I'll go and test the various configs in create-vue projects and report back with some results.

[JoostKersjes]

Back with some results. In general, the common configs seem to work.

The only parsing error I encountered was with scenario 8, which I haven't looked into.

You can view the results in this Gist: https://gist.github.com/JoostKersjes/0e6495987a74df8ebf4527f35d924e27

[juliandreas]

Just out of curiosity, why give the option of using the deprecated eslintrc? 🤔

[JoostKersjes]

Just out of curiosity, why give the option of using the deprecated eslintrc? 🤔

Made me think for a bit, thanks. I didn't want to be too disruptive with this MR so it could be more easily reviewed, so I didn't want to remove the old code.

From my perspective, the adoption of flat configs has been slower than I expected. Most of the packages aren't compatible and only have instructions for using an eslintrc config. This didn't give me a lot of confidence.

Using packages wrapped in FlatCompat wasn't as smooth as I hoped it to be when I did the ESLint v9 migration at work. I thought that it might be nice to opt out as long as the compatibility layer is needed.

PS: It seems that only a small group of people would run npm create @vue/eslint-config@latest themselves instead of just using whatever npm create vue@latest gives them. If someone wants to generate a specific config file, I'd guess that more options are better.