eslint在vscode中不生效,根本原因是本地未安装、配置未被加载或语言模式错误;必须执行npm install eslint --save-dev,确保配置文件为.eslintrc.cjs格式,正确设置parser、project路径及eslint.validate语言列表,并确认vscode右下角语言模式匹配且输出通道显示配置加载成功。

ESLint 在 VSCode 里不生效,几乎总是因为本地没装、配置没读到、或语言模式不对——不是插件没开,而是根本没跑起来。
npm install eslint --save-dev 必须执行
VSCode 的 ESLint 插件(dbaeumer.vscode-eslint)只是个“遥控器”,真正干活的是你项目里的 eslint 可执行文件。它默认只找 node_modules/.bin/eslint,找不到就静默放弃,不会报错,也不会 fallback 到全局安装。
- 运行
npx eslint --version,如果报错或无输出,说明本地没装好,补装:npm install eslint --save-dev - 如果用
yarn或pnpm,记得在 VSCode 设置里配好eslint.packageManager,否则可能找不到二进制 - monorepo 场景下,确保当前打开的文件夹是包含
package.json和node_modules的工作区根目录;否则插件可能去父目录找,但那里没有eslint
.eslintrc.cjs 而不是 .eslintrc.js
VSCode 插件对 ESM 支持不稳定,用export default 或顶层 await 会导致配置加载失败。Node.js 加载时也容易因文件扩展名产生歧义。
- 推荐统一用
.eslintrc.cjs(CommonJS 格式),导出写成module.exports = { ... } - 避免用
eslint.config.js(v8.50+ 扁平化配置),VSCode 当前版本对其支持不完整,易漏规则 - TypeScript/JSX/Vue 文件必须显式指定
parser:parser: '@typescript-eslint/parser'(TS)、parser: 'vue-eslint-parser'(Vue SFC),否则连语法解析都卡住
"editor.codeActionsOnSave": {"source.fixAll.eslint": true} 不等于自动修复
这个设置只是“触发条件”,真正能否修复,取决于规则本身是否支持--fix,且整个链路必须通畅。
- 必须同时开启:
"editor.formatOnSave": true(VSCode 的 Code Action 机制依赖格式化入口) - 对应语言的默认格式化器要设为 ESLint:
"editor.defaultFormatter": "dbaeumer.vscode-eslint",否则保存时调用的是 Prettier 或其他工具 -
"eslint.validate"必须包含对应语言标识,比如["javascript", "typescript", "typescriptreact"],漏掉typescriptreact就无法校验.tsx文件 - 规则如
no-console、no-unused-vars(未启用@typescript-eslint插件时)根本不可修复,只会标红
TS + React 项目最容易卡在 parserOptions.project
TypeScript 相关规则(如@typescript-eslint/no-explicit-any)需要类型信息,而 ESLint 默认不读 tsconfig.json。
- 必须在
parserOptions中加:project: "./tsconfig.json"(路径需为相对路径,不能是绝对路径或tsconfig.json简写) -
project字段只对@typescript-eslint/parser有效,漏设等于所有 TS 特有规则失效 - 如果项目用了多级
tsconfig.json(如src/tsconfig.json),就得填准确路径,否则类型检查跳过,规则形同虚设
配置不是一劳永逸的事——尤其在切换 Node 版本、升级 VSCode 或引入新框架时,parser、plugins、project 这三处最容易悄悄断掉。每次遇到“没反应”,先看右下角语言模式,再开 ESLint: Show Output Channel,第一行有没有 Using configuration from …。没有,就说明配置根本没加载,别调规则。











