Prettier 和 ESLint：代码质量的左膀右臂
Prettier 管格式，ESLint 管质量——职责不同但配置不当会打架。本文讲清两者分工、冲突解决方案与现代化工作流集成。
两者不是二选一：Prettier 只负责"代码长什么样"（缩进、引号、换行），ESLint 负责"代码对不对"（未用变量、危险模式）。标准搭配：ESLint 跑规则 + Prettier 管格式，用 eslint-config-prettier 关掉 ESLint 的格式规则消除冲突。
职责分界
| Prettier | ESLint | |
|---|---|---|
| 管什么 | 格式（美学） | 质量（正确性） |
| 例子 | 单引号 vs 双引号 | no-unused-vars |
| 理念 | 无配置争议（opinionated） | 高度可配置 |
Prettier 的"专断"是特性：终结团队关于格式的所有争论——配置五分钟，争论永远零。
安装与冲突消除
npm install --save-dev prettier eslint eslint-config-prettier
// eslint.config.js（flat config）
{
"extends": [
"...其他配置",
"prettier" // 最后引入：关掉所有与 Prettier 冲突的格式规则
]
}
不要用 eslint-plugin-prettier（把 Prettier 当 ESLint 规则跑）——性能差且错误提示混乱。格式问题交给 Prettier 单独跑。
工作流集成
// package.json
{
"scripts": {
"format": "prettier --write .",
"lint": "eslint ."
},
"lint-staged": {
"*": ["prettier --write"],
"*.{js,ts}": ["eslint --fix"]
}
}
保存时编辑器跑 Prettier（VS Code 设置 formatOnSave），提交时 lint-staged 双检查——格式全自动，质量有把关。
性能与新选择
- ESLint 慢是已知痛点——Oxlint 可做快速补充（见本系列对比文章）；
- Biome 把两者合一（Rust 实现，lint+format 一体）——新项目可评估单工具方案。
常见问题（FAQ）
Q：Prettier 的固执配置能改吗？
有少量选项（printWidth、singleQuote、semi 等）——刻意保持少，这是"停止争论"设计的一部分。接受它的默认值是回报率最高的选择。
Q：老项目接入 Prettier 怎么平滑？
一次性 prettier --write . 全量格式化，单独一个提交（.git-blame-ignore-revs 记录该提交哈希，blame 不被污染）。
Q：TypeScript 项目的特殊配置？
typescript-eslint 提供 TS 规则；Prettier 原生支持 TS。两者组合与 JS 项目无异。
参考文档
本文依据公开文档整理，示例需按项目依赖版本验证；不将文档中的性能描述视为本项目实测结果。
