CodeRoadMap
首页路线题库资源库文章社区
CodeRoadMap

程序员的学习成长路线图。内容免费开放,登录后可同步路线图与课时进度。

由 程序员柏风 独立维护 · 关于作者

学习

  • 路线图
  • 课程
  • 面试题
  • 文章
  • 我

更多

  • 资源
  • 社区
  • 关于作者
  • 内容说明

© 2026 CodeRoadMap

津ICP备2026012044号-1·津公网安备12011002026155号·coderoadmap@126.com
前端工具链入门/课时/Prettier 与 Biome
RawBlame
课时目录12 节

前端工具链入门

  1. 01前端工具链概览
  2. 02npm 与 package.json
  3. 03Yarn 与 pnpm
  4. 04模块打包器
  5. 05Vite / esbuild / SWC
  6. 06Rollup 与 Parcel
  7. 07ESLint
  8. 08Prettier 与 Biome
  9. 09类型检查
  10. 10部署平台
  11. 11Bun 与 Rolldown
  12. 12综合练习

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 + PrettierBiome
工具数量两套配置单 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 里。

    加载本节练习…
    ← 上一课ESLint下一课 →类型检查