Prettier 与 Biome
格式化;biome 一体化工具。
25 分钟
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 一键恢复 - 对比 与 行为