eslint与prettier保存时反复格式化,根本原因是二者修复行为语义冲突:eslint可修改逻辑(如补return),prettier仅调整空白结构;当共存且规则不收敛时,vscode陷入“格式化→eslint修复→再格式化”死循环。

为什么 ESLint + Prettier 保存时会反复格式化
根本原因是两个工具在「修复」和「格式化」行为上存在语义冲突:ESLint 的 source.fixAll.eslint 会改代码逻辑(如补 return、删未使用变量),而 Prettier 只动空白和结构。当两者都设为保存触发,且规则不收敛时,VSCode 就可能陷入“格式化 → 触发 ESLint 修复 → 再次触发格式化 → …”的死循环。
关闭 ESLint 自动修复,只保留 Prettier 格式化
最简方案是让 Prettier 独占格式化,ESLint 仅做提示不自动修。这样既保风格统一,又避免冲突。
-
editor.formatOnSave设为true(启用保存格式化) - 删掉或注释掉
editor.codeActionsOnSave中的"source.fixAll.eslint"条目 - 确保
eslint.format.enable是false(防止 ESLint 插件抢注格式化器) - 右下角语言模式点开 →「Configure Default Formatter」→ 选
esbenp.prettier-vscode,确认它被写进[javascript]或[vue]块里
若必须用 ESLint 修复,需强制收敛规则
想保留 source.fixAll.eslint,就得让 ESLint 的修复结果不再触发 Prettier 的变更。关键在对齐两套规则:
- 项目根目录的
.eslintrc.js中,必须包含prettier插件并禁用所有与格式相关的规则:extends: ["eslint:recommended", "plugin:prettier/recommended"] -
.prettierrc里不能有 ESLint 已覆盖的项,比如别设semi: false,除非eslint-config-prettier明确禁用了semi规则 - VSCode 设置中显式关掉 Prettier 的自动格式化:把
prettier.requireConfig设为true,并确保项目里有.prettierrc;否则它可能 fallback 到默认配置,和 ESLint 规则打架
Vue 文件特别容易卡死循环,因为语言块分治
Vue 文件被拆成 <template></template>、<script></script>、<style></style> 三块,每块可绑定不同 formatter。Volar 默认全交给自己,但如果你又配了 vetur.format.defaultFormatter.* 或全局 editor.defaultFormatter,就极易出现某一块被 Prettier 格式化、另一块被 ESLint 修复、再触发新一轮格式化的嵌套。
- 统一用 Volar 时,删掉所有
vetur.*配置,禁用 Vetur 插件 - 确保
[vue]块只指定一个 formatter:"editor.defaultFormatter": "vue.volar",不要同时设volar.format.enable和prettier.*路径 - 如果坚持用 Prettier 处理 Vue,必须关掉 Volar 的格式化:
"volar.format.enable": false,再靠editor.formatOnSave触发 Prettier —— 但此时要确认prettier-vscode插件已加载且prettierPath指向本地node_modules/prettier











