VSCode自动修复代码必须依赖插件+精确配置,核心开关是editor.codeActionsOnSave;eslint.autoFixOnSave已废弃;需正确配置验证语言、规则文件路径、本地ESLint包及插件版本,并区分可修复与不可修复规则。

VSCode 本身不自动修复代码,所有“保存即修”行为都依赖插件 + 精确配置,缺一不可。光装 ESLint 或 Stylelint 插件,但没开 editor.codeActionsOnSave,等于关着水龙头拧开水阀。
必须配 editor.codeActionsOnSave 才能触发自动修复
这个设置是唯一有效的开关,eslint.autoFixOnSave 已废弃(VSCode 1.80+ 不再识别)。它不是可选项,而是硬性前提。
-
"editor.codeActionsOnSave": { "source.fixAll.eslint": true }—— JavaScript/TypeScript 项目只走这条路径 -
"editor.codeActionsOnSave": { "source.fixAll.stylelint": true }—— CSS/SCSS 项目用这个(需安装官方 Stylelint 插件) -
"editor.codeActionsOnSave": { "source.fixAll": true }—— 小心!这会同时调 ESLint、Prettier、TypeScript 等所有可用修复器,极易冲突 - 如果项目同时用 ESLint 和 Prettier,必须禁用 Prettier 的保存修复:
"editor.formatOnSave": false,否则分号刚加上,立刻被删掉
插件得认得你的文件类型,否则规则压根不跑
ESLint 默认只校验 .js 文件,.vue、.ts、.html 都要显式声明,否则状态栏显示 “ESLint is running”,但你写满 template 也不会报错。
- Vue 项目必须加:
"eslint.validate": ["javascript", "typescript", "vue", {"language": "vue", "autoFix": true}] - TypeScript 项目要确保 parser 正确:
parser: '@typescript-eslint/parser',且已安装@typescript-eslint/eslint-plugin - CSS 类文件若用 Stylelint,需在
settings.json中加:"stylelint.enable": true,并确认.stylelintrc.*存在 - 状态栏右下角没出现 ESLint / Stylelint 图标,或悬停提示 “No config found”,说明配置文件路径或命名错了(如写成
.eslintrc而非.eslintrc.js)
不是所有规则都能修,得看文档里有没有 ✅ Fixable
ESLint 官网每条规则页右上角标有 ✅ 表示支持自动修复;❌ 就算配对了也白搭。别指望它帮你重写逻辑、补全 hook 依赖或把 alert() 换成 toast()。
- 可修的常见规则:
semi、quotes、indent、no-trailing-spaces、no-unused-vars(仅删除未使用变量,不改引用) - 不可修的典型规则:
react-hooks/exhaustive-deps(依赖数组漏项)、complexity(圈复杂度超限)、no-alert(删掉 alert 是修,但替换成用户友好的提示不是) - 运行
npx eslint --print-config src/App.tsx可验证当前文件实际生效的规则和fixable值,比猜靠谱
本地 ESLint 包必须存在,插件只是个遥控器
VSCode ESLint 插件不会自带 eslint 可执行文件,它只是启动一个子进程去调你项目里的 node_modules/.bin/eslint。没装,就卡在 “ESLint is working” 或直接报错。
- 项目级安装优先:
npm install eslint --save-dev(不要全局装,避免版本错乱) - 若用
eslint.config.js(ESLint v8.52+ 新格式),插件版本必须 ≥ v2.4.10,旧版直接不识别 - 报
Failed to load config?先检查node_modules是否完整,再确认 VSCode 当前工作区打开的是项目根目录(不是某层子文件夹) - 插件装完必须重启 VSCode,否则
eslint.validate可能不生效,尤其 Vue 项目里<script setup></script>块不标错,基本就是这原因
最常被忽略的一点:自动修复只发生在“保存”那一刻,它不干预你敲代码的过程,也不重写业务逻辑。能修的只是风格类、语法糖类问题;真正影响运行时的错误(比如拼错变量名但同名变量恰好存在),静态工具根本不敢动。


















