Support for "Flat Config"

[ota-meshi]

The problem you want to solve.

We need to check for compatibility with ESLint's new Flat Config.

Your take on the correct solution to problem.

When @eslint/eslintrc is ready to use, check compatibility.
Modify the sharable configuration as needed.

Additional context

• Lint this repo using ESLint Flat Config #2226
• Add support for generating ESLint Flat Config #2319
• Implement Flat Config eslint/eslint#13481
• https://github.com/eslint/eslintrc
• https://eslint.org/blog/2022/08/new-config-system-part-2/
• https://eslint.org/docs/latest/use/configure/configuration-files-new

[nzakas]

Now that this repo is linting itself using flat config, what would be the next steps? Do you have a plan for exporting flat configs from this plugin?

[ota-meshi]

I think the next step is to exporting the flat config from this plugin 👍

[nzakas]

Cool! Would you do that in addition to the eslintrc configs? Or as a replacement? (Trying to figure out what to recommend to other plugins, too.)

[Havrin]

just to make sure because I just ran into an error while setting this up with flat config from eslint: Flatconfig or eslint.config.js is currently not supported and will (maybe) be working with the next major version of eslint-plugin-vue, correct? There is no workaround?

[FloEdelmann]

I haven't tried it yet, but you should be able to use eslint-plugin-vue in eslint.config.js like this:

const { FlatCompat } = require('@eslint/eslintrc')

const eslintrc = new FlatCompat({
  baseDirectory: __dirname
})

module.exports = [
  // …
  ...eslintrc.plugins('vue'),
  ...eslintrc.extends('plugin:vue/recommended'),
  // …
]

(similar to how plugins/configs in our own ESLint config were migrated in #2226)

[Havrin]

yeah, true that works, thanks! On npmjs it says

This package is not intended for use outside of the ESLint ecosystem.

which I thought meant to not use it in my project.

Btw I am using "type": "module" so my working config looks like this:

import { FlatCompat } from '@eslint/eslintrc';
import globals from 'globals';
import path from 'path';
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const eslintrc = new FlatCompat({
    baseDirectory: __dirname
})

export default [
    {
        ignores: ["node_modules", "coverage", ".nyc_output", "dist"]
    },
    ...eslintrc.plugins('vue', 'prettier'),
    ...eslintrc.extends('plugin:vue/vue3-recommended', 'prettier'),
    {
        files: ['src/**/*.js', 'src/**/*.vue'],
        languageOptions: {
            globals: {
                ...globals.browser,
            },
            parserOptions: {
                ecmaVersion: 2022,
                sourceType: "module"
            }
        },
        rules: {
        ...
        }
    }
];

[jinusean]

HI @Havrin , I'm currently facing this error after using your code

TypeError: Key "plugins": Cannot redefine plugin "vue".

[chojnicki]

Starting with ESLint v9.0.0, the flat config file format will be the default configuration file format.

Any news about supporting flat config? It's been 3 years :( This package is last thing we need to ditch CJS and go 100% ESM in a project.

[FloEdelmann]

@conradhale started working on a solution to this issue in #2319. It would be great if anyone reading this could test that implementation and review the PR. You can install the development version using the following command:

npm install conradhale/eslint-plugin-vue

Please also mention any documentation updates you would like to see.

[Robin-Hoodie]

yeah, true that works, thanks! On npmjs it says

This package is not intended for use outside of the ESLint ecosystem.

which I thought meant to not use it in my project.

Btw I am using "type": "module" so my working config looks like this:

import { FlatCompat } from '@eslint/eslintrc';
import globals from 'globals';
import path from 'path';
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const eslintrc = new FlatCompat({
    baseDirectory: __dirname
})

export default [
    {
        ignores: ["node_modules", "coverage", ".nyc_output", "dist"]
    },
    ...eslintrc.plugins('vue', 'prettier'),
    ...eslintrc.extends('plugin:vue/vue3-recommended', 'prettier'),
    {
        files: ['src/**/*.js', 'src/**/*.vue'],
        languageOptions: {
            globals: {
                ...globals.browser,
            },
            parserOptions: {
                ecmaVersion: 2022,
                sourceType: "module"
            }
        },
        rules: {
        ...
        }
    }
];

Thanks for sharing that config!

Just a few remarks:

• I don't think it's necessary to specify ...eslintrc.plugins('vue', 'prettier'), as both recommended configurations will include setting the plugin option correctly.
• Setting parserOptions.ecmaVersion is not recommended
• Setting parserOptions.sourceType to module is not necessary in this case, as the default is module for anything but .cjs files

This code worked for me https://gist.github.com/Robin-Hoodie/ad242ecb6d92e33cb21d5869f01dd63b