VS Code需同时安装ESLint扩展和项目本地eslint依赖才能工作;必须配置.eslintrc.*或显式指定eslint.config.js路径,并设root: true;检查语言模式、查看输出日志、启用保存自动修复可确保生效。
vs code 本身不自带代码检查能力,必须通过扩展 + 项目本地配置协同工作;只装插件不配规则,或者只配规则没装插件,都会导致 eslint 不生效。
安装 ESLint 扩展和项目依赖
VS Code 的 ESLint 扩展(由 Dirk Baeumer 维护)只是“桥梁”,真正执行检查的是你项目里安装的 eslint 包。它会自动查找项目根目录下的 node_modules/.bin/eslint,找不到就报错 ESLint server is not running 或 Cannot find module 'eslint'。
- 全局安装不行:VS Code 默认不读全局
eslint,必须本地安装 - 运行
npm init -y && npm install eslint --save-dev(或yarn add eslint -D) - 再在 VS Code 中安装官方扩展:搜索 “ESLint”,认准发布者是
dbaeumer - 重启 VS Code 或重载窗口(
Ctrl+Shift+P→Developer: Reload Window)
初始化并配置 .eslintrc.* 文件
没有配置文件,ESLint 不知道该检查什么、按什么规则报错。VS Code 的 ESLint 扩展默认只识别 .eslintrc.js、.eslintrc.cjs、.eslintrc.json、.eslintrc.yaml 这几种命名,其他如 eslint.config.js(ESLint v8.22+ 新格式)需额外配置才能被识别。
- 推荐用命令行初始化:
npx eslint --init,按提示选 JS 类型、模块系统、框架等,它会自动生成.eslintrc.js - 若用
eslint.config.js(新扁平化配置),需在 VS Code 设置中显式指定:"eslint.options": { "configFile": "./eslint.config.js" } - 确保配置里有
root: true,否则 ESLint 可能向上递归查找父目录的配置,导致规则意外覆盖
module.exports = {
root: true,
env: { browser: true, es2021: true },
extends: ['eslint:recommended'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
rules: { 'no-console': 'warn' }
};检查 ESLint 是否真正在工作
常见假象是“插件已装、文件已保存、但没报错”——实际可能是 ESLint 根本没跑起来,或规则没覆盖到当前文件类型。
- 打开一个
.js文件,故意写console.log(1);,看有没有黄色波浪线(如果no-console设为warn) - 按
Ctrl+Shift+P输入ESLint: Show Output Channel,查看日志里是否出现ESLint server started和文件路径扫描记录 - 确认当前文件右下角显示的语言模式是
JavaScript(不是Plain Text或JSON),否则 ESLint 不会触发 - 如果用 TypeScript,必须额外安装
@typescript-eslint/parser和@typescript-eslint/eslint-plugin,且.eslintrc.*中parser要设为@typescript-eslint/parser
自动修复与保存时检查
ESLint 可以自动修复部分问题(如分号、引号、空格),但默认关闭;手动触发修复也容易漏掉。
- 启用保存即修复:
"editor.codeActionsOnSave": { "source.fixAll.eslint": true } - 注意:这仅对支持自动修复的规则生效(
eslint --fix能处理的),比如quotes、semi;逻辑错误类规则(如no-unused-vars)不会被自动改 - 如果保存后无反应,检查设置里是否被更高级别的设置(如 workspace 设置)覆盖,或是否与其他格式化工具(如 Prettier)冲突
- 冲突时建议用
eslint-config-prettier关闭 ESLint 中与 Prettier 重叠的规则
最常被忽略的是:ESLint 配置文件路径、root: true 字段、以及语言模式是否匹配。三者任一出错,VS Code 就只会安静地当个摆设。










