Prettier 与 Biome

Prettier 是「有主见的代码格式化器」——几乎零配置，团队不再争论缩进与换行。Biome（前身 Rome）则尝试 Lint + Format 一体，用 Rust 追求极速，是近年值得关注的新选项。

学习目标

• 会用 Prettier 格式化 TS/TSX/JSON/CSS
• 理解 Editor / pre-commit / CI 三层格式化 enforcement
• 知道 Biome 与 ESLint+Prettier 组合的取舍

Prettier 工作方式

npx prettier --write "src/**/*.{ts,tsx,css,md}"

特点：

• 不讨论：行宽 80/100、单引号、尾逗号——选 .prettierrc 一次定死
• 与 ESLint 配合：Lint 管逻辑，Prettier 管空格（见 ft-eslint）

{
  "semi": true,
  "singleQuote": false,
  "printWidth": 100
}

三层 enforcement

1. 编辑器「保存时格式化」（Format on Save）
2. husky + lint-staged：commit 前只格式化 staged 文件
3. CI：prettier --check 防止漏网

javascript-core 练手代码也建议早期养成格式化习惯——进 react-essentials 后文件变多，靠人工对齐不现实。

Biome 是什么

npm i -D @biomejs/biome
npx biome check --write .

	ESLint + Prettier	Biome
工具数量	两套配置	单 CLI
生态	最全插件	快速增长，规则子集
速度	中等	通常更快
迁移	成熟	需评估规则覆盖

选型建议： greenfield 小项目可试 Biome；Next/React 大型模板、需 eslint-config-next 时 仍多选 ESLint + Prettier。

与 TypeScript / MDX

• typescript-essentials：Prettier 原生支持 TS，与 tsc 独立
• 课程 Markdown draft（如 nextjs-essentials 课时）同样可用 Prettier 统一列表与代码块缩进

练习

• 故意打乱一个 .tsx 缩进，用 Prettier 一键恢复
• 对比 prettier --check 与 --write 行为
• 读 Biome 官网「与 ESLint 对比」一页，写一句你的项目会选哪边

小结

Prettier 终结格式争论；Biome 用一体化换速度。 下一课专门讲类型检查如何与构建、Lint 并行跑在 CI 里。