配置eslint时常见问题收录

1. ESLint couldn’t find the plugin “@typescript-eslint/eslint-plugin”.

Oops! Something went wrong! :(

ESLint: 7.32.0

ESLint couldn't find the plugin "@typescript-eslint/eslint-plugin".

(The package "@typescript-eslint/eslint-plugin" was not found when loaded as a Node module from the directory "/Users/tal/Documents/web/my-vue3-project".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

    npm install @typescript-eslint/eslint-plugin@latest --save-dev

The plugin "@typescript-eslint/eslint-plugin" was referenced from the config file in "BaseConfig".

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

这个错误表明 ESLint 没有找到 @typescript-eslint/eslint-plugin 插件，通常是因为插件没有正确安装或安装位置不正确。

npm install --save-dev @typescript-eslint/eslint-plugin

2. npm ERR! ERESOLVE unable to resolve dependency tree

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: my-vue3-project@0.1.0
npm ERR! Found: eslint@7.32.0
npm ERR! node_modules/eslint
npm ERR!   dev eslint@"^7.32.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@"^8.57.0 || ^9.0.0" from @typescript-eslint/parser@8.2.0
npm ERR! node_modules/@typescript-eslint/parser
npm ERR!   peer @typescript-eslint/parser@"^8.0.0 || ^8.0.0-alpha.0" from @typescript-eslint/eslint-plugin@8.2.0
npm ERR!   node_modules/@typescript-eslint/eslint-plugin
npm ERR!     dev @typescript-eslint/eslint-plugin@"*" 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.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:

由于依赖冲突导致 npm 无法正确解析依赖树。我们添加使用 --legacy-peer-deps 参数便可以解决这个问题

npm install --save-dev @typescript-eslint/eslint-plugin --legacy-peer-deps

3. TypeError: Failed to load plugin ‘@typescript-eslint’ declared in ‘.eslintrc.js’: Class extends value undefined is not a constructor or null

这个问题可能与依赖之间的不兼容有关，特别是由于 ESLint 版本和 @typescript-eslint 相关库之间的冲突。

解决方法：

npm install --save-dev eslint@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest --legacy-peer-deps

4. Invalid option ‘–ext’ - perhaps you meant ‘-c’?

npm run lint

> my-vue3-project@0.1.0 lint
> eslint --ext .js,.mjs,.cjs,.ts,.vue

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.

出现这个，就代表在使用新的 eslint.config.js 配置格式时，某些命令行选项（例如 --ext）已经被弃用或不再需要，但是我的文件却是是.eslintrc.js。

检查 ESLint 版本： 确保你的 ESLint 版本支持 --ext 选项。

npx eslint -v

ESLint 8.x 版本仍然支持 .eslintrc.js 和 --ext 参数。

重新执行install：

npm install eslint@8.39.0 eslint-plugin-vue@9.11.0 --save-dev

此时，如果你想继续使用 .eslintrc.js，那么以下命令是有效的：

npx eslint . --ext .js,.mjs,.cjs,.ts,.vue

5. eslint 版本不一致

如果你是新项目，那么按照上面的配置来，很少出现问题。但是如果你是在老项目上重新加eslint，我的建议是非必要不加。

但是如果需要加的话，建议你先完成“执行Eslint检查”，然后触发npm run lint，看下有哪些文件、代码出现问题。而且你可能刚出现以下问题：

[plugin:vite-plugin-eslint] Failed to load plugin '@typescript-eslint' declared in '.eslintrc.js': Class extends value undefined is not a constructor or null

有时候，@typescript-eslint 插件的版本较旧可能与较新的 ESLint 版本不兼容。以下是解决此问题的一些步骤：

1、更新 @typescript-eslint 插件。尝试将 @typescript-eslint 插件更新到最新版本。使用以下命令更新：

npm install @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest --save-dev

2. 确保 vite-plugin-eslint 插件是最新的。

npm install vite-plugin-eslint@latest --save-dev

3、清除缓存并重新安装依赖。删除 node_modules 和 package-lock.json，然后重新安装所有依赖：

rm -rf node_modules package-lock.json
npm install

5. 手动运行 ESLint 检查。确保 ESLint 本身可以正常运行。在项目目录中，使用以下命令运行 ESLint：

npx eslint src --ext .js,.ts,.vue

如果以上步骤没有解决问题，可以参考 ESLint、@typescript-eslint 和 vite-plugin-eslint 的官方文档和 GitHub 问题跟踪器，看看是否有类似问题的解决方案。

6. Invalid option ‘–ext’ - perhaps you meant ‘-c’?You’re using eslint.config.js, some command line flags are no longer available.

> eslint . --ext .js,.mjs,.cjs,.ts,.vue

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.

在使用 eslint.config.mjs 配置文件时，ESLint 的命令行选项有所不同。--ext 选项在使用新的 eslint.config.* 文件时不再可用，因为文件扩展名可以直接在配置文件中指定。

已经在 eslint.config.mjs 文件中指定了匹配模式为 **/*.{js,mjs,cjs,ts,vue}，这会告诉 ESLint 自动处理这些扩展名的文件，因此无需在命令行中指定 --ext。

使用 eslint 命令直接运行：

直接使用一下命令：

eslint .

如果您需要进一步自定义检查的目录或文件，可以在命令行中指定目录或文件路径，而无需使用 --ext 选项。例如：

eslint src/

7. ConfigError: Config (unnamed): Key “rules”: Key “constructor-super”: structuredClone is not defined

> eslint .


Oops! Something went wrong! :(

ESLint: 9.8.0

ConfigError: Config (unnamed): Key "rules": Key "constructor-super": structuredClone is not defined