要在 VSCode 中实现保存时自动触发 ESLint 修复，核心是在 settings.json 中显式配置 editor.codeActionsOnSave 选项，并确保项目已安装本地 ESLint 依赖且规则支持自动修复。
先说结论：默认安装插件不会自动修复，必须手动写入配置项 source.fixAll.eslint 才能生效。
- 适合：前端开发场景，尤其是 JS/TS/Vue 项目需要统一代码规范时
- 先准备：安装官方 ESLint 插件、项目本地安装 eslint 包、存在有效的配置文件
- 验收：保存文件后观察代码是否自动修正，且状态栏 ESLint 图标正常亮起
命令速用版
直接在 VSCode 的 settings.json 中添加以下配置，这是触发自动修复的关键开关：
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript",
"typescript",
"vue"
]
}为什么会这样
VSCode 的 ESLint 插件默认只负责高亮和提示错误，不会在保存时主动修改代码。这是为了避免意外覆盖用户代码。必须通过 editor.codeActionsOnSave 明确告诉编辑器“保存时执行哪些代码操作”，其中 source.fixAll.eslint 专门对应 ESLint 的修复能力。此外，ESLint 本身只修复标记为可修复（fixable）的规则，逻辑错误或不支持自动修复的规则不会变动。
分步处理
1. 检查插件与依赖：确认已安装由 Microsoft 提供的官方 ESLint 扩展，并在项目根目录运行 npm install eslint `--save-dev` 确保本地有可执行文件。
2. 修改设置：打开设置（Ctrl+,），搜索 codeActionsOnSave，点击“在 settings.json 中编辑”，写入上述配置片段。注意不要写成布尔值，必须是对象结构。
3. 确认配置文件：确保项目根目录存在 .eslintrc.js、.eslintrc.json 或 eslint.config.js，否则插件无法加载规则。
4. 处理冲突：如果同时使用 Prettier，建议关闭 editor.formatOnSave 或在 ESLint 配置中集成 Prettier，避免两者同时修改格式导致冲突。
怎么验证是否生效
保存一个包含可修复错误（如多余分号、引号不匹配）的文件，观察代码是否自动变更。查看 VSCode 右下角状态栏是否有 ESLint 图标亮起。若未生效，打开命令面板运行 ESLint: Show Output Channel，检查是否有 Failed to load config 或 Cannot find module 等报错信息。
常见坑
1. 配置作用域覆盖：项目内的 .vscode/settings.json 会覆盖用户全局设置，优先检查工作区配置。
2. 规则不可修复：部分规则（如 no-console、complexity）不支持 `--fix`，保存时不会变动，这不是配置错误。
3. 文件类型未识别：Vue 或 TS 文件需在 eslint.validate 中显式声明，且 ESLint 配置中需包含对应解析器（如 @typescript-eslint/parser）。
4. 插件未激活：若状态栏显示 Disabled，说明当前文件未匹配 ESLint 配置中的 files 规则或插件未加载成功。
参考来源
- VSCode 怎么开启在保存时自动运行 ESLint `--fix` 修复所有语法警告
- VSCode 怎么设置开启保存时自动触发 ESLint 的 fix 自动修复功能
- VSCode 怎么配置 Vue 项目保存时自动修复 ESLint 报错
- 如何在 VSCode 中通过 ESLint 插件自动修复前端代码规范问题