VSCode中ESLint自动修复不生效,首要检查配置文件是否被识别、本地eslint是否安装、语言模式是否正确;核心配置需包含codeActionsOnSave、validate、options三部分,并禁用formatOnSave以防冲突。

VSCode 里 ESLint 自动修复不生效,90% 的情况不是规则写错了,而是整个检查链路根本没跑起来——插件只是个“遥控器”,真正干活的是你项目里的 eslint 可执行文件和它加载的配置。
为什么保存后一点反应都没有?先查这三件事
ESLint 插件默认静默失败,不会弹报错框。打开命令面板(Ctrl+Shift+P),运行 ESLint: Show Output Channel,看日志里有没有 Using configuration from 或 Failed to load config:
- 没看到
Using configuration from→ 配置文件没被识别,检查是否在项目根目录下、命名是否为.eslintrc.js/.eslintrc.cjs/package.json中的eslintConfig字段 - 出现
Cannot find module 'eslint-plugin-react'→ 对应插件没装,比如用了react规则但漏了npm install eslint-plugin-react --save-dev - 提示
ESLint server is not running或Using globally installed ESLint→ VSCode 没找到本地node_modules/.bin/eslint,确认已执行npm install eslint --save-dev,并在设置中设eslint.packageManager为npm(或yarn/pnpm)
editor.codeActionsOnSave 配置必须手写进 settings.json
图形界面勾选无效,必须编辑工作区或用户级 settings.json。以下是最小可用配置(适用于 JS/TS/Vue):
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript", "typescript", "vue"],
"eslint.options": {
"extensions": [".js", ".ts", ".vue"]
},
"editor.formatOnSave": false
}
注意:"editor.formatOnSave": false 是关键——否则 Prettier 和 ESLint 同时格式化,会互相覆盖引号、分号、空格等规则;eslint.options.extensions 必须显式加 ".vue",否则单文件组件里的逻辑不被扫描。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记(深入)”;
哪些规则能自动修?别指望它改逻辑
eslint --fix 只能修语法层面、无歧义的格式问题。打开 ESLint 官方规则页,右上角带 ✅ Fixable 标记的才支持:
- 能修的:
semi(分号)、quotes(引号)、indent(缩进)、no-trailing-spaces(行尾空格)、no-unused-vars(删未用变量) - 不能修的:
react-hooks/exhaustive-deps(依赖数组缺项,得人工补)、vue/multi-word-component-names(组件名不合法,不能自动重命名)、complexity(圈复杂度超限,没法自动拆函数) - 部分可修但有风险:
no-console能删console.log,但若你想替换成logger.info,它做不到
TypeScript 和 Vue 项目最容易卡在 parser 配置上
ESLint 默认只认 JS 语法。遇到 .ts 或 .vue 就直接跳过,连报错都不会有——因为解析阶段就失败了:
- TypeScript 项目必须在
.eslintrc.cjs里写:parser: '@typescript-eslint/parser',且parserOptions.project指向./tsconfig.json(否则@typescript-eslint/no-explicit-any这类规则不触发) - Vue 单文件组件需额外配
parserOptions.parser子项:{ "vue": "vue-eslint-parser" },不能只靠顶层parser - 避免用
export default写配置——Node.js 加载不稳定,统一用module.exports = {},后缀推荐.eslintrc.cjs
最常被忽略的是:VSCode 打开的路径必须是项目根目录(File > Open Folder),否则向上查找配置时会越级失败;多层嵌套工作区下,eslint.config.js(Flat Config)需插件 v2.4.10+ 且显式开启 eslint.experimental.useFlatConfig: true,否则直接无视。

















