根本原因是插件升级后默认行为变更:vscode-eslint v2.4+ 默认启用source.fixAll.eslint,prettier-vscode v12+ 默认监听formatOnSave,导致一次保存触发ESLint和Prettier双重格式化而冲突;须显式关闭eslint.format.enable、source.fixAll.eslint,并确保prettier在.eslintrc.js的extends末尾。

VSCode 插件更新后 Prettier 和 ESLint 突然打架,不是规则写错了,而是插件行为变了——尤其 vscode-eslint v2.4+ 和 prettier-vscode v12+ 默认启用了更激进的保存钩子,会同时触发两次格式化。
为什么更新后保存就“抖动”、波浪线闪个不停
插件升级后,vscode-eslint 默认打开了 editor.codeActionsOnSave 中的 "source.fixAll.eslint",而 prettier-vscode 也默认监听 editor.formatOnSave。结果是:一次 Ctrl+S,ESLint 先修一遍(比如加了分号),Prettier 紧跟着再修一遍(删掉分号),文件来回跳,报错反复出现。
- 典型现象:
prettier/prettier报错但不自动修复,或修复后立刻又标红 - 检查方式:右键 → “Format Document With…” → 看当前默认项是否为
esbenp.prettier-vscode;再打开命令面板(Ctrl+Shift+P)搜Fix all auto-fixable problems,看它是否真调用的是 Prettier - 新版
vscode-eslint还会读取.eslintrc.*里的rules并尝试修复,哪怕你写了"prettier/prettier": "error",它也可能误判为可 auto-fix
settings.json 必须显式关掉的三个开关
光靠配置文件不够,VSCode 插件更新后这些设置可能被重置或覆盖,必须手动确认:
-
"eslint.format.enable": false—— 关闭 ESLint 插件自身的格式化能力(不是禁用 ESLint!只是不让它动代码) -
"editor.formatOnSave": true—— 保持开启,这是触发 Prettier 的入口 -
"editor.codeActionsOnSave": { "source.fixAll.eslint": false }—— 注意不是true,新版插件默认设为true,必须显式关掉;如果留空或删掉这行,它会继承全局默认值(v2.4+ 是true)
.eslintrc.js 中 prettier 必须在 extends 最末尾
插件更新不会改你的配置文件,但很多人当初没注意顺序,一更新就暴露问题。例如:
module.exports = {
extends: [
"eslint:recommended",
"plugin:react/recommended",
"prettier", // ✅ 正确:最后才加,确保覆盖前面所有格式规则
"plugin:prettier/recommended" // ❌ 错误:这行不能放 <code>prettier</code> 后面,否则它又把规则开回来
]
};
-
eslint-config-prettier的作用是“关规则”,它必须在所有其他配置之后执行,才能真正压住indent、quotes、semi等 - 如果用了
plugin:prettier/recommended,它内部已包含prettier,那你就不用再单独写一遍;但若两者都写,prettier必须放在最后 - 运行
npx eslint --print-config .eslintrc.js查看最终生效的规则,重点搜semi、quotes是否为off
验证是否真由 Prettier 格式化
最直接的办法:临时删掉项目里的 .prettierrc 或注释掉 semi 字段,然后保存一个 JS 文件。如果它仍按分号结尾,说明根本没走 Prettier,而是 VSCode 内置格式器或 ESLint 在偷偷干活。
- 确保项目根目录有
.prettierrc(内容至少含{"semi": false, "singleQuote": true}),不要只靠 VSCode 设置 - 检查
settings.json里有没有"prettier.semi": true这类插件级配置——它会覆盖.prettierrc,且新版插件默认值可能已变 - 如果用的是 TypeScript,确认
@typescript-eslint/parser没在rules里重复启用@typescript-eslint/semi这类规则
最容易被忽略的是:插件更新后,VSCode 不会自动 reload 配置,改完 settings.json 或 .eslintrc.js 后必须重启编辑器,否则旧缓存还在跑。


















