必须显式配置editor.codeactionsonsave启用eslint修复,因editor.formatonsave仅触发格式化(如prettier),不处理逻辑问题(如no-unused-vars);eslint默认不自动修复,需eslint.run: "onsave"和"source.fixall.eslint": true共同激活。

editor.codeActionsOnSave 控制 ESLint 修复时机,editor.formatOnSave 控制 Prettier 格式化时机——两者默认并行触发,但实际执行顺序取决于配置组合。必须显式启用 ESLint 的保存时修复,并确保 Prettier 不参与语义修复,才能实现“先 ESLint、后 Prettier”的稳定链式行为。
为什么不能只开 formatOnSave 就完事?
因为 editor.formatOnSave: true 只调用格式化器(比如 Prettier),它不修复 no-unused-vars、no-console 这类逻辑问题;而 ESLint 默认保存时不自动修——即使装了插件,也要靠 editor.codeActionsOnSave 显式唤起修复动作。
常见错误现象:Ctrl+S 后引号变了、缩进整齐了,但 console.log 还在、未使用的变量没删——说明 ESLint 根本没跑修复逻辑。
-
eslint.run必须设为"onSave"(不是默认的"onType") -
editor.codeActionsOnSave必须包含"source.fixAll.eslint": true,否则 ESLint 插件不会响应保存事件 - 不要同时开启
eslint.format.enable: true,这会让 ESLint 也尝试格式化,和 Prettier 冲突
editor.codeActionsOnSave 和 formatOnSave 怎么配合才不打架?
VSCode 的执行顺序是:先运行 codeActionsOnSave 中定义的动作(如 ESLint 修复),再执行 formatOnSave(Prettier 格式化)。但这个顺序仅在二者都启用且无扩展干扰时成立。
容易踩的坑:
- 如果
editor.defaultFormatter指向了 ESLint 扩展(比如dbaeumer.vscode-eslint),Prettier 就根本不会被调用 - 某些旧版配置里写了
"prettier.eslintIntegration": true,这是已废弃字段,会强制让 Prettier 读 ESLint 规则,导致行为不可控 - 项目中若存在
.vscode/settings.json和用户级settings.json冲突,优先级以工作区为准,但格式化器绑定可能被用户设置覆盖
推荐最小可靠配置(写入项目根目录 .vscode/settings.json):
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.run": "onSave",
"eslint.validate": ["javascript", "typescript", "vue"]
}
ESLint 和 Prettier 规则冲突了怎么办?
冲突不是发生在 VSCode 设置里,而是在规则定义层。比如 ESLint 的 quotes 和 Prettier 的 singleQuote 都想管引号,但解析逻辑不同,保存时可能来回改几轮才停,甚至卡住。
解决方式只有一条:让 ESLint 彻底不管格式,只管逻辑。
- 安装
eslint-config-prettier并加入.eslintrc.js的extends数组末尾 - 用
plugin:prettier/recommended替代手动写rules,它会自动关闭所有与 Prettier 重叠的规则 - 检查
.prettierrc是否存在且生效(VSCode 只认项目根目录下的该文件) - 禁用 ESLint 的格式类规则验证:确保
eslint.validate列表里没有"json"或"markdown"这类非代码语言,它们容易触发意外格式动作
怎么确认当前文件真的走完了“ESLint → Prettier”流程?
最直接的办法是故意写一个可修复的问题,比如漏掉分号(如果项目用 semi: true)、多写了空格、或用了双引号(如果 .prettierrc 设了 singleQuote: true)。
保存后观察:
- 如果
console.log被删了、var自动转成const、未使用变量高亮消失 → ESLint 修复成功 - 紧接着缩进变成 2 空格、括号换行对齐、字符串全变单引号 → Prettier 格式化成功
- 如果只有后者发生,前者没动静,重点查
eslint.run和codeActionsOnSave是否启用、当前文件语言模式是否正确(右下角状态栏显示JavaScript,不是Plain Text)
真正容易被忽略的是语言模式识别——哪怕 .js 文件,如果 VSCode 错判成 JSON 或 TypeScript React,eslint.validate 列表里没对应项,整个链就断了。











