eslint 和 prettier 冲突的本质是职责未分离导致的重复格式化：eslint-plugin-prettier 等桥接方案过时，且 vscode 的 formatonsave 与 eslint 自动修复同时操作代码引发覆盖；正确做法是 prettier 仅格式化、eslint 仅做质量检查并禁用所有格式规则，vscode 中设 eslint 为默认格式化工具并启用 eslint.format.enable。
ESLint 和 Prettier 冲突的本质是什么
不是工具本身打架，而是 ESLint 的 eslint-plugin-prettier 和 prettier-eslint 这类桥接方案已过时，且 VSCode 默认启用的 editor.formatOnSave 与 ESLint 的自动修复（eslint.codeAction.showDocumentation）可能重复操作同一段代码——比如一个换行、一个缩进，结果互相覆盖，最终格式错乱或报红。
正确做法是：让 Prettier 只做格式化（不介入规则检查），ESLint 只做代码质量检查 + 有限修复（禁用所有格式类规则），二者职责彻底分离。
- 禁用 ESLint 中所有和格式相关的规则，例如
indent、quotes、semi、comma-dangle等，统一交给 Prettier - 在 VSCode 中关闭 Prettier 扩展的自动格式化（避免和 ESLint 的保存时修复冲突）
- 把 ESLint 扩展设为默认格式化工具，并开启
eslint.format.enable
VSCode 设置里必须改的三项关键配置
打开 VSCode 设置（Ctrl+, 或 Cmd+,），搜索并修改以下三项，缺一不可：
-
"editor.formatOnSave": true—— 保持开启，但必须确保此时默认格式化工具是 ESLint -
"editor.defaultFormatter": "dbaeumer.vscode-eslint"—— 明确指定 ESLint 扩展接管格式化（前提是已安装eslint和vscode-eslint） -
"eslint.format.enable": true—— 这是关键开关，它让 ESLint 扩展支持格式化能力（依赖项目中存在.prettierrc和eslint-config-prettier）
不要设置 prettier.eslintIntegration（该配置已在新版 Prettier 扩展中移除），也不要手动绑定 prettier-vscode 到 editor.defaultFormatter。
项目级配置文件怎么写才不踩坑
根目录下必须同时存在 .eslintrc.cjs（或 .eslintrc.js）和 .prettierrc，且 ESLint 配置中要显式关闭格式规则：
// .eslintrc.cjs
module.exports = {
extends: [
'eslint:recommended',
'plugin:react/recommended',
'prettier' // ← 这行必须放在最后，会覆盖前面所有格式类规则
],
plugins: ['react'],
rules: {
'no-console': 'warn'
}
};
-
eslint-config-prettier必须通过npm install --save-dev eslint-config-prettier安装，并在extends中作为最后一项引入 -
.prettierrc只管格式，内容如{"semi": false, "singleQuote": true}即可，无需额外插件 - 如果用了 TypeScript，还需加装
@typescript-eslint/eslint-plugin和eslint-config-prettier，且prettier仍需排在extends最末位
保存后还是格式错乱？检查这三件事
常见“看似配置好了但无效”的真实原因：
- 工作区启用了
settings.json覆盖了用户级设置，检查当前文件夹下的.vscode/settings.json是否误写了"editor.defaultFormatter": "esbenp.prettier-vscode" - ESLint 扩展未识别到本地
node_modules/.bin/eslint，终端运行npx eslint --version确认 CLI 可用；若报错，说明项目没装eslint或版本太低（建议 ≥8.0） - 文件未被 ESLint 认为是“受控文件”，检查右下角状态栏语言模式是否为
javascriptreact或typescriptreact，而不是plaintext或javascript（后者可能跳过 JSX 检查）
最隐蔽的问题：某些 monorepo 项目里，VSCode 打开的是子包目录，但 ESLint 配置在根目录，此时需在子包的 .vscode/settings.json 中显式指定 "eslint.workingDirectories": ["./"]。
