VSCode中ESLint不生效的主因是未同时安装本地eslint包和官方插件,且需手动启用插件、配置validate语言列表、设置自动修复及明确overrides作用范围。

VSCode 里 ESLint 不生效,通常是因为没装对插件或没配好工作区
ESLint 本身是命令行工具,VSCode 只是调用它。必须同时满足两个条件:本地项目装了 eslint(或全局装了且路径可访问),VSCode 安装了官方 ESLint 插件(ID:dbaeumer.vscode-eslint)。只装插件不装 eslint 包,插件会直接报错 Failed to load plugin 'xxx': Cannot find module 'eslint'。
- 推荐在项目根目录运行
npm install eslint --save-dev(或yarn add eslint -D),避免全局安装带来的版本冲突 - VSCode 插件需手动启用:打开扩展面板 → 搜索
ESLint→ 点击「启用」(尤其在多工作区时,可能被禁用) - 插件默认只检查
.js、.jsx、.ts、.tsx文件,如需检查.vue或.svelte,需在settings.json中配置"eslint.validate"
如何让 ESLint 识别 TypeScript 或 Vue 文件
默认配置下,ESLint 不会处理 .ts 或 .vue 文件,因为解析器和处理器不同。必须显式声明语言支持,否则保存后无任何提示,也看不到波浪线。
- 对于 TypeScript:确保已安装
@typescript-eslint/parser和@typescript-eslint/eslint-plugin,并在.eslintrc.js中设置parser: '@typescript-eslint/parser',同时把typescript加入overrides的files - 对于 Vue:安装
eslint-plugin-vue,并在extends中加入'plugin:vue/vue3-essential'(Vue 3)或'plugin:vue/essential'(Vue 2) - 在 VSCode 设置中补全验证语言列表:
{ "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact", "vue" ] }
为什么保存时不自动修复,或只修了一部分
ESLint 插件默认不会自动修复所有规则,仅对带 ✅(fixable)标识的规则生效,且需开启对应设置。另外,格式化优先级可能被 Prettier 覆盖,导致看似“没修”。
- 启用保存时修复:在工作区
settings.json中加"editor.codeActionsOnSave": { "source.fixAll.eslint": true } - 注意该设置和
"editor.formatOnSave"是两套机制,不要混用;若同时启用了 Prettier,建议禁用其formatOnSave,改用 ESLint 统一修复 - 某些规则(如
no-console)默认不可修复,需手动修改;而semi、quotes这类风格类规则才支持自动插入/删除分号、引号 - 如果只修了部分,检查当前文件是否匹配
.eslintrc.js中的overrides条件(比如files: ['*.test.js']就不会作用于普通.js)
项目里有多个配置文件(.eslintrc.js / .eslintignore / package.json),哪个起作用
ESLint 会从被检查文件所在目录向上查找,找到第一个 .eslintrc.* 或 eslintConfig 字段即停止。这意味着子目录里的配置会覆盖根目录配置,但 .eslintignore 始终以项目根目录为基准,不会随查找路径变化。
-
.eslintignore必须放在项目根目录,否则会被忽略(插件日志里会出现Could not find .eslintignore) - 如果
package.json里有eslintConfig字段,它和.eslintrc.js是互斥的:存在任一者,另一个就无效 - 使用
overrides比写多个配置文件更可控,例如统一管理测试文件、类型声明文件、构建产物的规则开关










