Prettier 与 ESLint 样式规则冲突导致报错，需同时配置 eslint-config-prettier（禁用 ESLint 冲突规则）和 eslint-plugin-prettier（将 Prettier 集成进 ESLint），并在 VS Code 中启用 ESLint 自动修复。
Prettier 格式化后 ESLint 报错，不是格式化失败，而是规则没对齐
为什么保存后 ESLint 还在报 semi、quotes 等样式类错误
ESLint 默认自带一套样式规则（如 semi、quotes、indent），而 Prettier 也管这些——两者直接冲突。Prettier 格式化完代码，ESLint 却按自己那套规则再检查一遍，自然报错。
- 根本原因不是 Prettier 没生效，而是 ESLint 没“认”Prettier 的结果
- 常见报错如
Expected semicolon、Strings must use singlequote，都属于 ESLint 的样式规则，不是逻辑错误 - 如果你只装了
eslint-plugin-prettier但没装eslint-config-prettier，就等于只请了裁判（Prettier 规则）来打分，却没让主裁（ESLint）退场——冲突必然发生
必须同时配齐两个包：eslint-config-prettier + eslint-plugin-prettier
前者负责“关掉 ESLint 自带的样式规则”，后者负责“把 Prettier 当成一条 ESLint 规则来跑”。缺一不可。
- 安装命令：
npm install --save-dev eslint-config-prettier eslint-plugin-prettier - 在
.eslintrc.cjs（或.eslintrc.js）中，extends数组末尾加"prettier"（即eslint-config-prettier提供的 preset） - 同时确保
plugins包含"prettier"（对应eslint-plugin-prettier） - 不要手动在
rules里写"prettier/prettier": "error"——eslint-config-prettier的recommended已包含且自动启用修复
VS Code 里要开启 ESLint 自动修复，否则格式化和校验是两件事
即使规则对齐了，如果 VS Code 没配置 ESLint 在保存时自动修复，你看到的仍是“格式化完还报错”的假象。
- 在
.vscode/settings.json中加："editor.codeActionsOnSave": { "source.fixAll.eslint": true } - 注意：这个动作依赖 ESLint 扩展已启用，且项目中有合法的
.eslintrc.*配置 - 别和
editor.formatOnSave混用——它调的是 Prettier；codeActionsOnSave调的是 ESLint 的 fix 能力，二者分工明确 - 验证方式：改一行代码触发 ESLint 报错 →
Ctrl+Shift+P→ 输入ESLint: Fix all auto-fixable Problems，看是否能一键修复
容易被忽略的细节：Prettier 版本与 ESLint 插件兼容性
新版 eslint-plugin-prettier（v5+）要求 Prettier v3+；旧版 Prettier（如 v2.8）可能不支持 endOfLine: "lf" 或 arrowParens: "always" 等选项，导致 ESLint 的 prettier/prettier 规则校验失败。
- 运行
npx prettier --version和npx eslint --version确认本地版本 - 查 eslint-plugin-prettier 官方兼容表，避免版本错配
- 团队项目务必在
package.json的devDependencies中锁死prettier和eslint-plugin-prettier版本，而不是靠全局安装
最常卡住的地方，其实是以为“配了 Prettier 就万事大吉”，却忘了 ESLint 仍按老规矩打分。真正起效的闭环是：Prettier 格式化 → ESLint 关掉样式规则 → ESLint 把 Prettier 结果当标准来校验 → VS Code 在保存时自动执行这两步。少一环，就只剩“看起来在工作，其实各干各的”。
