VSCode 保存时让 ESLint 自动修复，关键是在 settings.json 里正确配置 editor.codeActionsOnSave，并确保项目有可用的 ESLint 配置文件和本地依赖。

命令速用版

打开 VSCode 设置文件（Ctrl + , 搜索 settings.json），直接写入以下配置：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.options": {
    "extensions": [".js", ".ts", ".vue", ".tsx"]
  },
  "editor.formatOnSave": false
}

注意：新版 ESLint 插件已逐渐废弃 eslint.validate 配置，通常无需显式声明语言类型，插件会自动识别。

为什么会这样

VSCode 的 ESLint 插件默认只做高亮和提示，保存时不会主动改代码。这是设计行为，不是 bug——编辑器需要明确知道你对哪些问题执行修复动作。

editor.codeActionsOnSave 必须写成对象形式，键名带.eslint 后缀。写成 true 或"source.fixAll": true 都无效，前者被忽略，后者会尝试调用所有语言服务器的修复逻辑，可能和 Prettier 等工具冲突。

另外，ESLint 只修复标记为可修复（fixable）的规则。比如 semi、quotes 这类格式问题能自动修，但 no-console、no-unused-vars 默认不可修复，除非用扩展插件。

分步处理

第一步：确认项目基础环境

在项目根目录运行命令检查 eslint 是否已安装：

npm list eslint

如果没有输出或显示 empty，执行安装：

npm install eslint `--save-dev`

确认项目根目录下存在 ESLint 配置文件，如.eslintrc.js、.eslintrc.json 或 eslint.config.js。

第二步：配置 VSCode 设置

打开 VSCode 设置（Ctrl + ,），搜索 settings.json，在用户级或工作区级写入上述配置。工作区级配置优先级更高，适合团队统一规范。

注意 editor.formatOnSave 设为 false，否则 Prettier 或其他 formatter 会抢在 ESLint 前格式化，导致引号、分号等规则反复打架。

第三步：处理 Vue/TS 特殊场景

Vue 单文件组件需要额外配置：

• 确认已安装 eslint-plugin-vue，版本与 Vue 版本兼容
• parserOptions.parser 必须显式指定为"@typescript-eslint/parser"或"@babel/eslint-parser"
• files 或 overrides 需包含"*.vue"

TypeScript 项目需安装@typescript-eslint/parser 和相关插件，否则.ts 和.tsx 文件不会被检查。

怎么验证是否生效

打开命令面板（Ctrl + Shift + P），运行"ESLint: Show Output Channel"，查看输出通道有无"Failed to load config"或"No ESLint configuration found"类报错。

检查右下角状态栏是否有 ESLint 图标亮起，若显示 Disabled 说明该文件未匹配 files 或 overrides 配置。

手动制造一个可修复的错误（如缺少分号），保存文件后看是否自动修正。如果没反应，打开开发者工具（Ctrl + Shift + P 运行"Developer: Toggle Developer Tools"）看 Console 是否报错。

也可以在终端运行 npx eslint `--ext` .js,.vue src/确认项目级配置本身没问题，排除 VSCode 插件问题。

常见坑

配置文件路径不对

VSCode 不会自动向上查找.eslintrc.js，只认当前工作区根目录下的配置文件。如果打开的是 monorepo 根目录，但 ESLint 配置在 packages/my-app 里，需要改为用 VSCode 直接打开 packages/my-app 目录。

同时开了 Prettier

如果项目用了 Prettier，别把 source.fixAll.eslint 和 source.fixAll.prettier 同时设为 true，容易冲突。建议在 ESLint 配置里 extends: ["prettier"]统一风格，只开 ESLint 的自动修复。

包管理器识别错误

项目用 pnpm 或 yarn 时，VSCode 可能找不到本地 eslint。此时需在工作区设置中指定："eslint.packageManager": "pnpm"或"eslint.runtime": "/path/to/node"。

大文件卡顿

超过 1000 行的文件开启 fixAll 可能保存时卡顿几百毫秒，这是正常现象。如果影响体验，可改为"source.fixAll.eslint": "explicit"，只在右键菜单或快捷键触发修复。

参考来源

• VSCode ESLint 插件官方文档 - 配置保存时自动修复
• ESLint 官方文档 - Fixable Rules 说明