Support ESLint v9

[simensol]

Just a heads up, ESLint v9 was released recently and it seems to be incompatible with @vue/eslint-config-typescript. Here's the error I got:

npm ERR! ERESOLVE could not resolve
npm ERR! While resolving: @vue/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/eslint
npm ERR!   dev eslint@"^9.0.0" from the root project
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@"^8.56.0" from @vue/[email protected]
npm ERR! node_modules/@vue/eslint-config-typescript
npm ERR!   dev @vue/eslint-config-typescript@"^13.0.0" from the root project
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/eslint
npm ERR!   peer eslint@"^8.56.0" from @vue/[email protected]
npm ERR!   node_modules/@vue/eslint-config-typescript
npm ERR!     dev @vue/eslint-config-typescript@"^13.0.0" from the root project

[lvzhenbo]

Wait for the maintainer to update it, eslint 9.0 made a lot of destructive changes, including configuration files
See this blog for details https://eslint.org/blog/2024/04/eslint-v9.0.0-released/

[JoostKersjes]

I've been working on vuejs/create-eslint-config#25

That helped me understand a bit of what is possible with ESLint v9, so I tried it just now on one of my projects.

When I use ...compat.extends("@vue/eslint-config-typescript"), it throws up a bunch of parsing errors:

• error Parsing error: Unexpected token <
• error Parsing error: Unexpected token :
• error Parsing error: Unexpected token type

But for some reason that doesn't happen with ...compat.extends("@vue/eslint-config-typescript/recommended").

Here is the full config that works for me with ESLint 9, Vue 3, TypeScript & Prettier:

// eslint.config.js
import path from "node:path";
import { fileURLToPath } from "node:url";

import { FlatCompat } from "@eslint/eslintrc";
import js from "@eslint/js";
import pluginVue from "eslint-plugin-vue";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
  baseDirectory: __dirname,
  recommendedConfig: js.configs.recommended,
});

export default [
  js.configs.recommended,
  ...pluginVue.configs["flat/essential"],
  ...compat.extends("@vue/eslint-config-typescript/recommended"),
  ...compat.extends("@vue/eslint-config-prettier/skip-formatting"),
  {
    files: [
      "**/*.vue",
      "**/*.js",
      "**/*.jsx",
      "**/*.cjs",
      "**/*.mjs",
      "**/*.ts",
      "**/*.tsx",
      "**/*.cts",
      "**/*.mts",
    ],
    languageOptions: {
      ecmaVersion: "latest",
    },
  },
];

[susnux]

This depends on typescript-eslint to provide v9 support first, ref: typescript-eslint/typescript-eslint#8211

[riodw]

EDIT: lol at everyone downvoting this... The fix was not out at the time I had this error, there was no other option.

Full thread for SEO:

% npm i

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/eslint
npm ERR!   dev eslint@"9.2.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@"^8.56.0" from @vue/[email protected]
npm ERR! node_modules/@vue/eslint-config-typescript
npm ERR!   dev @vue/eslint-config-typescript@"13.0.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Temp fix for this: Downgrade eslint

• package.json

{
  ...,
  "devDependencies": {
    "@vue/eslint-config-typescript": "13.0.0",
    "eslint": "8.56.0",
  }
}

[grindpride]

wait for support

[cweijan]

I am upgrading eslint v9. After referring to eslint-config-typescript, I found that it is easy to add a new eslint v9 rule to support.

import tseslint from 'typescript-eslint';
{
        files: ["**/*.vue"],
        languageOptions: {
            parserOptions: {
                parser: {
                    'js': 'espree',
                    'jsx': 'espree',
                    'mjs': 'espree',
                    'ts': tseslint.parser,
                    'tsx': tseslint.parser,
                    'mts': tseslint.parser,
                    // Leave the template parser unspecified, so that it could be determined by `<script lang="...">`
                },
                extraFileExtensions: ['.vue'],
                ecmaFeatures: {
                    jsx: true
                }
            }
        }
}

[n0099]

When using flat config, packages @typescript-eslint/{parser,eslint-plugin} should be replaced by the merged typescript-eslint since they only provide flat .configs in that package: typescript-eslint/typescript-eslint#7935

But if you have both @typescript-eslint/{parser,eslint-plugin} and typescript-eslint installed and applying #76 (comment):

import vueESLintConfigTypescriptRecommendedExtends from '@vue/eslint-config-typescript/recommended.js'
import typescriptESLint from 'typescript-eslint';

export default [
    ...compat.config(vueESLintConfigTypescriptRecommendedExtends), // same with ...compat.extends('@vue/eslint-config-typescript/recommended')
    ...typescriptESLint.configs.strictTypeChecked,
    ...typescriptESLint.configs.stylisticTypeChecked,
];

they won't work together:

ConfigError: Config "typescript-eslint/base": Key "plugins": Cannot redefine plugin "@typescript-eslint".

[rijenkii]

Here's the config that I've just wrote. Haven't tested much, but it seems to work:

import eslint from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs["flat/recommended"],
  {
    languageOptions: {
      parserOptions: {
        parser: tseslint.parser,
        projectService: true,
        extraFileExtensions: ['.vue'],
      },
    },
  },
);

tseslint.configs.*TypeChecked configs also work, but there are issues, see vuejs/vue-eslint-parser#104.

Also, when using *TypeChecked configs be sure to add { "ignore": ["eslint.config.js"] } to your configs, as eslint-plugin-vue is not typed (vuejs/eslint-plugin-vue#2124).

[lovetingyuan]

@sodatea hi, please check out this, It has been a while time after eslint v9 released.

[Shyam-Chen]

I have integrated TypeScript, Vue, and Prettier in ESLint v9, and it is working well.

• eslint.config.js: https://github.com/Shyam-Chen/Vue-Starter/blob/main/eslint.config.js
• prettier.config.js: https://github.com/Shyam-Chen/Vue-Starter/blob/main/prettier.config.js

  "devDependencies": {
    "eslint": "9.6.0",
    "eslint-config-prettier": "9.1.0",
    "eslint-plugin-prettier": "5.1.3",
    "eslint-plugin-vue": "9.27.0",
    "globals": "15.8.0",
    "prettier": "3.3.2",
    "typescript-eslint": "7.15.0"
  }

[Tamas-hi]

typescript-eslint v8 was released yesterday which now fully support eslint v9, so typescript-eslint is no longer a blocker.

[Gnuk]

I've just done #79 PR few days ago, maybe someone of you want to review this draft (I have one issue remaining).

[MartinX3]

Nice @Gnuk
With the new ESlint 9.9.0 and the needed feature flag you could also use eslint.config.ts.

[throrin19]

Any news about that ?

[bmulholland]

v8 is EOL in a month: https://eslint.org/version-support/

[orimay]

When using flat config, packages @typescript-eslint/{parser,eslint-plugin} should be replaced by the merged typescript-eslint since they only provide flat .configs in that package: typescript-eslint/typescript-eslint#7935

But if you have both @typescript-eslint/{parser,eslint-plugin} and typescript-eslint installed and applying #76 (comment):

import vueESLintConfigTypescriptRecommendedExtends from '@vue/eslint-config-typescript/recommended.js'
import typescriptESLint from 'typescript-eslint';

export default [
    ...compat.config(vueESLintConfigTypescriptRecommendedExtends), // same with ...compat.extends('@vue/eslint-config-typescript/recommended')
    ...typescriptESLint.configs.strictTypeChecked,
    ...typescriptESLint.configs.stylisticTypeChecked,
];

they won't work together:

ConfigError: Config "typescript-eslint/base": Key "plugins": Cannot redefine plugin "@typescript-eslint".

I handled it like this:

function dedulplicatePlugins(
  ...plugins: TSESLint.FlatConfig.ConfigArray
): TSESLint.FlatConfig.ConfigArray {
  const foundPlugins = new Set<string>();
  return plugins.filter(plugin => {
    if (plugin.name === undefined) return true;
    if (foundPlugins.has(plugin.name)) return false;
    foundPlugins.add(plugin.name);
    if (plugin.name === 'typescript-eslint/base') {
      delete plugin.plugins?.['@typescript-eslint'];
    }
    return true;
  });
}



const eslintConfig: ReturnType<typeof tsESLint.config> = tsESLint.config(
  js.configs.recommended,
  ...dedulplicatePlugins(
    ...tsESLint.configs.strict,
    ...tsESLint.configs.stylistic,
  ),
  // ..

[mitar]

I think it should work since version v14? Which version are you using?