ESLint 与 Prettier 需分工协作：ESLint 专注逻辑检查，Prettier 专责格式化；须禁用 ESLint 格式功能、启用 eslint-config-prettier 关闭冲突规则，并在 VSCode 中指定 Prettier 为唯一格式化器。
VSCode 里配 ESLint 和 Prettier 不是为了“装个插件就完事”，而是要让两者不打架、各司其职：ESLint 检查逻辑和潜在错误，Prettier 负责格式化。如果没理清分工，你会遇到保存后代码被反复重排、规则冲突报错、eslint-config-prettier 失效等典型问题。
为什么 ESLint 和 Prettier 会互相覆盖
ESLint 默认带部分格式规则（比如 indent、quotes），而 Prettier 也管这些。二者同时启用且未协调时，VSCode 可能先用 ESLint 格式化一遍，再被 Prettier 覆盖，或者保存时触发两次格式化，导致光标跳动、代码“抖动”。关键不是禁用谁，而是让 ESLint 专注代码质量，把格式全交给 Prettier。
- 安装
eslint-config-prettier，并在 ESLint 配置中 最后 extend 它，用来关闭所有与 Prettier 冲突的格式类规则 - 在
.eslintrc.cjs或.eslintrc.json中确认没有手动开启如semi、comma-dangle等格式规则 - VSCode 设置里关掉
"editor.formatOnSave": true对 ESLint 的绑定（即不要设"editor.defaultFormatter": "dbaeumer.vscode-eslint"）
VSCode 必须启用的三个设置项
仅装插件不够，VSCode 自身的编辑器行为必须对齐工具链。以下三项缺一不可，且顺序和值敏感：
-
"editor.formatOnSave": true—— 保留，但需指定唯一 formatter -
"editor.defaultFormatter": "esbenp.prettier-vscode"—— 必须设为 Prettier 插件，不能是 ESLint -
"eslint.enable": true和"eslint.format.enable": false—— 显式禁用 ESLint 的格式能力，只保留校验
注意："eslint.format.enable" 默认是 true，不手动设 false 就会和 Prettier 同时抢着格式化。
如何验证 ESLint + Prettier 是否真正协同工作
最直接的验证方式是改一个明显违反规则但不涉及格式的问题，比如写 console.log('test');（假设你用了 no-console 规则），看 VSCode 底部状态栏是否标出 ESLint 警告；再删掉分号，保存——代码应自动补上分号（由 Prettier 控制），且 ESLint 不再报 semi 错误（已被 eslint-config-prettier 关闭）。
- 打开命令面板（
Ctrl+Shift+P），运行ESLint: Show Output Channel，查看日志里是否加载了你的配置文件 - 右键编辑器 → “Format Document With…” → 确认默认项是
Prettier，不是ESLint - 在 JS 文件里故意写
if (a) { console.log(b) }（缺大括号），ESLint 应报curly错误；但不会因缩进或换行报错
真正的难点不在安装步骤，而在于配置文件层级叠加（项目级、用户级、插件默认）带来的隐性覆盖。建议始终在项目根目录放 .eslintrc.cjs 和 .prettierrc，并用 npx eslint --print-config ./src/index.js 查看最终生效的规则集——很多“不生效”的问题，其实只是某一层配置悄悄覆盖了你以为的设置。
