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]

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