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/eslint-config-typescript@13.0.0
npm ERR! Found: eslint@9.0.0
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/eslint-config-typescript@13.0.0
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: eslint@8.57.0
npm ERR! node_modules/eslint
npm ERR!   peer eslint@"^8.56.0" from @vue/eslint-config-typescript@13.0.0
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: project@1.0.0
npm ERR! Found: eslint@9.2.0
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/eslint-config-typescript@13.0.0
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".