ESLint v9 support

[cexbrayat]

ESLint v9 has been released and we'll need to change a few things to properly support it.

npm run lint currently fails to run with eslint v9:

❯ npm run lint

> [email protected] lint
> eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore

Invalid option '--ext' - perhaps you meant '-c'?
You're using eslint.config.js, some command line flags are no longer available. Please see https://eslint.org/docs/latest/use/command-line-interface for details.

We'll also probably need to migrate the configuration file to use the flat config format:

• https://eslint.org/docs/latest/use/configure/migration-guide

[JoostKersjes]

See #451 for supporting the new default "Flat Config Files".

[jez9999]

I'd definitely like to see the project scaffolds using the flat config format ASAP. It greatly reduces the complexity of configuring ESLint, as well as setting a bunch of reasonable defaults the old system didn't and organizing things better.

[lovetingyuan]

+1 @sodatea

[mr-boost]

If it can help, this is the flat config that works for me in a Vue3, Typescript, Prettier setup:

It works with eslint 8.57.0 and the following:
typescript-eslint 7.14.1
eslint-plugin-vue 9.26.0
vue-eslint-parser 9.4.3
eslint-config-prettier 9.1.0
prettier 3.3.2
typescript: 5.5.2

As for upgrading to eslint 9.0; the bottleneck is the release of the stable version 8 of typescript-eslint. So I prefer to wait until that is released before upgrading to eslint 9.

eslint.config.mjs

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';
import vueparser from 'vue-eslint-parser';
import eslintConfigPrettier from "eslint-config-prettier";

export default [
  {
    ignores: ["dist/*"]
  },
  // add more generic rulesets here, such as:
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs['flat/essential'],
  {
    rules: {
      // override/add rules settings here, such as:
      '@typescript-eslint/no-explicit-any': 'warn',
      '@typescript-eslint/no-unused-vars': 'warn',
      'no-irregular-whitespace': 'warn',
    },
    languageOptions: {
      parser: vueparser,
      parserOptions: {
        parser: tseslint.parser
      }
    },
    plugins: {
      vue: pluginVue
    }
  },
  eslintConfigPrettier,
]

And this should be updated in package.json:
"lint": "eslint . --fix",

Hope this helps

[ayu-exorcist]

Maybe eslint-config is another option.

[benoit74]

I would love to see this land at some point. I failed to do the update on my project despite typescript-eslint 8 being released a long time ago

[BabyLy233]

Also looking forward to supporting ESLint v9 so that we can use flat config

[ascott18]

A brand new Vue project comes with all these deprecation warnings, which doesn't feel like a very nice welcome to users who might be new to Vue. All of these are dependencies of eslint.

Are there any core maintainers working on this? And if not, what can the community do to help out? It seems like the problems are spread out across multiple projects and multiple repos, which makes it hard to know where to start for someone looking to help out.

[JoseGoncalves]

I find a bit strange that 5 months after the release of ESLint v9 there is still no "official" way to scaffold a Vue project supporting it. Can the community help in any way to push this forward?

[messenjer]

ESLint v8.x end of life is October 5, 2024 : https://eslint.org/blog/2024/09/eslint-v8-eol-version-support/

[haoqunjiang]

I've been taking a break for most of the past few months due to burnout.

But now that ESLint 8 is about to hit EOL, I've put together a basic plan for minimum ESLint 9 support. You can check it out here: vuejs/eslint-config-typescript#81. I hope it helps.

[JoseGoncalves]

But now that ESLint 8 is about to hit EOL, I've put together a basic plan for minimum ESLint 9 support. You can check it out here: vuejs/eslint-config-typescript#81. I hope it helps.

Hi @haoqunjiang. Does that mean that there will be no JavaScript support for ESLint v9, only TypeScript?

[haoqunjiang]

Hi @haoqunjiang. Does that mean that there will be no Javascript support for ESLint v9, only Typescript?

You don't need any new config package for JavaScript.
I would update @vue/create-eslint-config to create a new boilerplate configuration file to support that.

Here's my current configuration file for a minimal JavaScript Vue Project:

// eslint.config.mjs
import js from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'

export default [
  // > config objects that don’t specify files or ignores apply to all files that have been matched by any other configuration object
  // So we specify here once and the following extends will all apply to the same files
  {
    files: [
      '**/*.js',
      '**/*.mjs',
      '**/*.jsx',
      '**/*.vue'
      // default sourceType is set to 'module' so we skip linting .cjs files
    ],
    ignores: [
      // node_modules & .git are ignored by default
      '**/dist/**',
      '**/dist-ssr/**',
      '**/coverage/**'
    ]
  },
  js.configs.recommended,
  ...pluginVue.configs['flat/essential']
]

[benoit74]

I've been taking a break for most of the past few months due to burnout.

Take care!

[JoseGoncalves]

You don't need any new config package for JavaScript.

If one wants to use prettier along with eslint it will need updates in @vue/eslint-config-prettier. It seems that PR vuejs/eslint-config-prettier#22 addresses that, right?