VS Code 中 ESLint 配置生效需确保本地安装、正确配置文件路径、避免与 Prettier 冲突、验证插件加载配置及区分开发与 CI 检查。

VS Code 里配 ESLint 不是装个插件就完事——关键得让 eslint 真正读到你的配置、识别项目规则、并在保存时按需修复。否则你看到的“红色波浪线”可能来自默认规则,和你团队的 .eslintrc.js 完全无关。
确认项目本地已安装 eslint 及对应插件
VS Code 的 ESLint 插件(dbaeumer.vscode-eslint)默认只调用工作区根目录下的本地 eslint,不走全局安装。如果你运行 npx eslint --version 报错,或 node_modules/.bin/eslint 不存在,插件会静默降级为无配置检查。
- 执行
npm install eslint --save-dev
或yarn add eslint --dev
(推荐使用--save-dev) - 若用 TypeScript,额外装
@typescript-eslint/parser和@typescript-eslint/eslint-plugin - 确保
package.json中有"eslintConfig"字段,或项目根目录存在.eslintrc.js/.eslintrc.cjs/eslint.config.js(ESLint v8.53+ 推荐后者)
避免 VS Code 自动启用 Prettier 冲突 ESLint 修复
很多人同时装了 Prettier 和 ESLint 插件,结果 Ctrl+S 时代码被格式化两次:一次 ESLint 自动 fix,一次 Prettier 强行重排,最终格式混乱甚至报错。
- 在
settings.json中禁用 Prettier 的自动格式化:"editor.formatOnSave": false
- 改用 ESLint 自带的格式能力:设置
"editor.codeActionsOnSave": {"source.fixAll.eslint": true} - 如果必须用 Prettier,不要让它接管整个文件——只对非 JS/TS 文件生效,或用
eslint-config-prettier关闭 ESLint 中与 Prettier 冲突的规则
检查 ESLint 插件是否真正加载了你的配置文件
常见现象:修改了 .eslintrc.js,但 VS Code 里没反应;或者控制台输出 ESLint: Cannot find module 'xxx'。这通常不是插件问题,而是配置路径或解析器没对上。
- 打开命令面板(
Ctrl+Shift+P),运行ESLint: Show Output Channel,看日志里是否出现Using configuration from ...并指向你预期的文件 - 若提示
Failed to load parser '@typescript-eslint/parser',检查该包是否在node_modules中,且.eslintrc.js中parser路径写的是'@typescript-eslint/parser'(不是'./node_modules/@typescript-eslint/parser') - 使用
eslint.config.js(ESLint v9+ 新格式)时,确保导出的是export default [...]数组,而非module.exports = {...}
区分开发时检查与 CI 中的严格校验
本地 VS Code 检查可以宽松些(比如忽略某些警告),但 CI 流程(如 GitHub Actions)必须跑完整规则。别让本地“看着没报错”误导你提交违规代码。
- 在
.eslintignore中排除构建产物(dist/、build/),但不要排除src/下的测试文件(*.test.js)——除非你明确不想检查它们 - CI 脚本中统一用
npx eslint . --ext .js,.ts --report-unused-disable-directives
,强制报告所有未使用的// eslint-disable-line - VS Code 设置里可开启
"eslint.probe": ["javascript", "typescript", "vue"]
,但别加"json"——JSON 文件交给jsonc语法检查更合适
最常被忽略的一点:ESLint 配置文件本身也是 JavaScript,一旦 .eslintrc.js 里写了语法错误(比如少了个逗号、用了还没声明的变量),VS Code 插件会直接静默失败,连报错都不显示。遇到“完全没反应”,第一反应应该是手动运行 npx eslint --debug src/index.js 看底层是否崩在配置加载阶段。










