项目根目录必须存在 ESLint 配置文件,VS Code 插件默认只读取工作区根目录下的配置(如 eslint.config.js 或 .eslintrc.js),不向上查找父目录;需确保本地安装 eslint 及对应解析器插件,且 settings.json 中正确配置 eslint.validate 和 editor.codeActionsOnSave。

项目根目录必须存在 ESLint 配置文件
VS Code 的 ESLint 插件默认只读取工作区根目录下的配置文件,不会向上查找父目录或使用全局配置。如果你的 .eslintrc.js 放在子文件夹里(比如 src/.eslintrc.js),它根本不会被加载。
常见错误现象:修改规则后 VS Code 无反应,控制台日志显示 Using configuration from /path/to/project/.eslintrc.js 指向错误路径,或直接提示 No ESLint configuration found。
- 支持的配置文件名(按优先级顺序):
.eslintrc.js、.eslintrc.cjs、.eslintrc.json、eslint.config.js(ESLint v8.53+ 推荐) - 推荐用
eslint.config.js:它是 ESM 原生格式,支持import,且能更好兼容 TypeScript 和最新插件 - 若用
.eslintrc.js,确保导出对象结构正确,例如:module.exports = { extends: ["eslint:recommended"], rules: { "no-console": "warn" } };
确保本地 node_modules 中有 eslint 及对应解析器
VS Code ESLint 插件默认调用项目本地的 eslint 二进制,不是全局安装的版本。如果 node_modules/.bin/eslint 不存在,插件会静默回退到极简内置检查,完全无视你的规则文件。
典型表现:波浪线只标基础语法错(如缺少分号),但自定义规则(如 vue/multi-word-component-names)完全不生效。
- 运行
npx eslint --version确认本地已安装,输出应为类似v8.56.0 - Vue + TS 项目必须同时安装:
@typescript-eslint/parser和@typescript-eslint/eslint-plugin - React 项目需确认
eslint-plugin-react和eslint-plugin-react-hooks已安装并出现在extends中 - 检查
package.json的devDependencies是否包含这些包,而非dependencies
验证 ESLint 插件是否真正加载了你的配置
光有文件和依赖还不够——插件得“看见”它。很多问题出在路径解析或扩展未激活上。
打开命令面板(Ctrl+Shift+P),运行 ESLint: Show Output Channel,查看输出里是否有明确的 Using configuration from ... 行,并指向你预期的文件路径。
- 如果没有该行,说明插件没找到配置,检查文件名拼写(
.eslintrc.js≠eslintrc.js)、大小写(Linux/macOS 区分大小写) - 如果提示
Failed to load plugin 'vue',说明插件包未安装,或plugins数组里写了但没装对应 npm 包 - 如果配置里用了
overrides,确认filesglob 模式匹配当前打开的文件(例如"**/*.vue"不会匹配index.ts) - 重启 VS Code 或重新加载窗口(
Ctrl+Shift+P→Developer: Reload Window)可强制插件重读配置
避免 workspace settings 覆盖项目规则
用户级或工作区级的 settings.json 有时会无意中覆盖项目规则,导致“明明配好了却无效”。
最常踩的坑是 "eslint.validate" 设置不全,或 "editor.codeActionsOnSave" 指向了错误的规则源。
-
"eslint.validate"必须显式列出你用的语言,例如 Vue 项目要加"vue",TS 项目加"typescript"和"typescriptreact" - 禁用
"editor.formatOnSave",否则 Prettier 可能抢在 ESLint fix 前格式化,造成冲突 - 不要在
settings.json里写"eslint.options"指向其他配置路径——这会让插件忽略项目根目录下的文件 - 检查是否有
"eslint.packageManager"设为"yarn"但实际用npm,会导致插件找不到 bin
eslint.config.js 的导出方式和 overrides 的文件匹配逻辑——这两处最容易写对但跑偏。


















