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 到默认缩进逻辑。