Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add options to generate a Flat Config #25

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

JoostKersjes
Copy link

@JoostKersjes JoostKersjes commented Apr 11, 2024

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 JoostKersjes force-pushed the flat-config branch 3 times, most recently from 1a9f098 to 4edf18c Compare April 11, 2024 20:36
@JoostKersjes
Copy link
Author

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
    image
    /* 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 JoostKersjes marked this pull request as ready for review April 12, 2024 17:46
@JoostKersjes JoostKersjes changed the title Draft: Add options to generate a Flat Config Add options to generate a Flat Config Apr 12, 2024
@JoostKersjes
Copy link
Author

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
Copy link
Author

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
Copy link

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

@JoostKersjes
Copy link
Author

JoostKersjes commented Apr 16, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants