VSCode 中可通过设置 ESLint: Auto Fix On Save 或配置 editor.codeActionsOnSave 实现保存时自动修复;需确保已安装 ESLint 插件、项目含有效配置文件(如 .eslintrc.js),且工作区正确识别 ESLint 实例。

如果您在使用 VSCode 编辑 JavaScript 或 TypeScript 项目时,希望保存文件时自动应用 ESLint 规则修复可修正的问题,则需要正确配置 ESLint 插件与编辑器行为。以下是实现该功能的多种配置方式:
本文运行环境:MacBook Air,macOS Sequoia。
一、启用 ESLint 保存时自动修复
此方法通过 VSCode 设置直接开启内置的 ESLint 自动修复功能,适用于大多数标准项目结构。
1、打开 VSCode 设置(快捷键 Cmd + ,)。
2、在搜索框中输入 eslint.autoFixOnSave。
3、勾选 ESLint: Auto Fix On Save 选项。
4、确保已安装并启用 ESLint 扩展(由 Microsoft 提供,ID 为 dbaeumer.vscode-eslint)。
二、通过 settings.json 配置 fix on save
此方式提供更精细的控制,支持按语言指定修复行为,并兼容新版 VSCode 推荐的格式。
1、按下 Cmd + Shift + P 打开命令面板。
2、输入并选择 Preferences: Open Settings (JSON)。
3、在 settings.json 中添加以下内容:
"editor.codeActionsOnSave": { "source.fixAll.eslint": true },
4、可选:限制仅对特定语言启用,例如只对 JavaScript 和 TypeScript 生效:
"[javascript]": { "editor.codeActionsOnSave": { "source.fixAll.eslint": true } },
"[typescript]": { "editor.codeActionsOnSave": { "source.fixAll.eslint": true } },
三、配合本地 ESLint 配置文件启用修复
ESLint 插件需识别项目根目录下的配置文件(如 .eslintrc.js、.eslintrc.json 或 eslint.config.js),才能知道哪些规则支持自动修复。
1、确认项目根目录存在有效的 ESLint 配置文件。
2、检查配置中至少有一条规则设置为 "fixable": "code" 或规则文档标明可自动修复(例如 no-console、semi)。
3、在配置中显式启用可修复规则,例如:
"rules": { "semi": ["error", "always"], "no-unused-vars": ["warn"] }
四、解决自动修复不生效的常见原因
当配置完成但保存后无修复动作,通常源于插件未正确识别 ESLint 实例或工作区范围异常。
1、在 VSCode 底部状态栏点击 ESLint 标签,确认显示 ESLint is running。
2、若显示 ESLint is not available,请在项目中执行 npm install eslint --save-dev 或确认已全局安装。
3、检查 VSCode 左下角工作区标识,确保当前打开的是包含 node_modules/eslint 的文件夹,而非父级目录。
五、使用 ESLint 命令面板手动触发修复
当自动修复因语法错误或配置冲突暂时失效时,可通过命令面板立即执行一次性修复。
1、按下 Cmd + Shift + P 打开命令面板。
2、输入并选择 ESLint: Fix all auto-fixable Problems。
3、VSCode 将扫描当前打开的活动文件,并应用所有可安全修复的规则更改。










