配置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
- 确保
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
- 手动运行 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