ESLint与Prettier应分工协作:ESLint负责代码质量检查,Prettier专责格式化;需用eslint-config-prettier禁用冲突规则,并在VS Code中配置formatOnSave与fixAll.eslint协同工作,避免混用eslint-plugin-prettier。

ESLint 和 Prettier 不是替代关系,强行让 ESLint “接管” 格式化会破坏 Prettier 的设计初衷,也容易引发冲突。正确做法是:ESLint 负责代码质量(如未使用变量、await 未 await),Prettier 负责格式(缩进、引号、换行),二者分工明确。
为什么 eslint-config-prettier 是必须的
ESLint 自带的规则(比如 quotes、semi)和 Prettier 的格式化行为直接冲突——比如 Prettier 默认不加分号,而 ESLint 的 semi: ["error", "always"] 会报错。不关掉这些规则,保存时就会反复“打架”。
- 安装:
npm install --save-dev eslint-config-prettier - 在
.eslintrc.js的extends数组末尾加上"prettier"(注意:必须放最后,否则会被前面的配置覆盖) - 它不会启用任何新规则,只禁用所有与 Prettier 冲突的 ESLint 格式类规则
如何让 VS Code 保存时自动修复 + 格式化
VS Code 默认不会把 ESLint 的 auto-fix 和 Prettier 的格式化串联起来;必须手动指定优先级,否则可能只执行其中一种。
- 确保已安装插件:
ESLint(by Microsoft)和Prettier(by Prettier) - 在工作区
.vscode/settings.json中写入:{ "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.validate": ["javascript", "typescript", "vue"], "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSaveMode": "modifications" } - 关键点:
source.fixAll.eslint触发 ESLint 的自动修复(逻辑检查类),而defaultFormatter指定 Prettier 执行最终格式化(样式类)——两者不重叠、不干扰
eslint-plugin-prettier 该不该用
这个插件把 Prettier 当作 ESLint 的一条规则来运行(即 Prettier 错误会以 ESLint 警告形式出现),看似“统一”,实则违背工具边界,且带来额外风险:
- 它会让 Prettier 的格式错误进入 ESLint 报错流,导致 CI/CD 中
eslint --fix无法真正修复(因为 Prettier 本身不支持 --fix 输出) - VS Code 保存时若同时开启
source.fixAll.eslint和此插件,可能触发无限循环或格式异常 - 除非团队强制要求“所有提示必须来自 ESLint”,否则不推荐。日常开发中,格式问题由 Prettier 独立处理更稳定
最易被忽略的一点:Prettier 的配置(如 .prettierrc)必须显式存在且合法,否则 VS Code 的 defaultFormatter 会静默失效——哪怕只写 {} 也能避免 fallback 到默认缩进逻辑。










