ESLint在VSCode不生效主因是未安装本地eslint依赖,需在项目根目录运行npm install eslint --save-dev;插件仅显示结果,真正执行靠本地包。

VSCode 里 ESLint 不生效?先确认插件和依赖是否装对
ESLint 在 VSCode 中不报错,大概率不是配置问题,而是根本没装上核心依赖。VSCode 的 ESLint 插件只是“显示器”,真正干活的是项目本地的 eslint 包。
- 必须在项目根目录运行
npm install eslint --save-dev(或yarn add eslint -D),全局安装eslint大概率被忽略 - VSCode 插件要装官方版:搜索 “ESLint” 并认准作者是
Microsoft - 打开 VSCode 后按
Ctrl+Shift+P(macOS 是Cmd+Shift+P),输入ESLint: Show Output Channel,看输出里有没有报Cannot find module 'eslint'—— 有就说明插件找不到本地包
如何让 ESLint 正确识别 Vue / TypeScript / React 项目
默认 eslint 只检查纯 JavaScript,Vue 单文件、TS 类型注解、JSX 语法都会被跳过,甚至直接报解析错误。
- Vue 项目需额外安装
eslint-plugin-vue和parser: 'vue-eslint-parser',且parserOptions.parser要指向@typescript-eslint/parser(如果用了 TS) - TypeScript 项目不能只靠
eslint-plugin-typescript—— 必须用@typescript-eslint/parser替换默认 parser,并配project字段指向tsconfig.json - React + JSX 需启用
react和react-hooks插件,并在settings.json中加"eslint.options": { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
VSCode 自动修复不工作?检查这几个关键设置
按下 Ctrl+Shift+P → ESLint: Fix all auto-fixable Problems 没反应,或保存时不自动修复,通常卡在这几个地方:
-
editor.codeActionsOnSave必须显式开启:{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true } } - 如果项目同时用了 Prettier,
eslint-config-prettier必须放在 extends 数组最后,否则规则冲突会导致 fix 失败 - 某些规则(如
no-console)默认不可 auto-fix,得查文档确认该规则是否带fixable: "code" - VSCode 工作区设置优先级高于用户设置,检查右下角是否显示 “Workspace Settings” 并被覆盖
为什么 .eslintrc.js 里写了 rules 却没效果
常见陷阱是路径匹配失效或环境误配。ESLint 不会无差别扫描所有文件,它严格按 files、excludedFiles、overrides 和 env 执行规则。
- 确保
overrides中的files匹配真实路径,比如["*.test.js"]不会匹配src/utils.test.js,应写成["**/*.test.js"] - 若用
env: { node: true },但文件里用了document,ESLint 会报未定义变量 —— 浏览器环境要加browser: true - 自定义规则名写错一个字母(比如
eqeqeq写成eqeqq)不会报错,只会静默忽略 - 修改
.eslintrc.js后,VSCode 不会自动重载,需手动触发ESLint: Restart ESLint Server










