三亩地 三亩地SAN MU DI · CODE DIARY
ARTICLE DETAIL

日记详情

真实记录编程学习的某一天,欢迎挑你感兴趣的翻一翻。

Biome:Rust 重写前端工具链,35 倍性能提升的代码质量守护

Biome:Rust 重写前端工具链,35 倍性能提升的代码质量守护

Biome:Rust 重写前端工具链,35 倍性能提升的代码质量守护

2026 年的前端开发,依然在承受着一个荒诞的现实:两个互不相干的工具——Prettier 负责格式化,ESLint 负责检查——各自独立地扫描你的代码,各自维护各自的配置文件,各自消耗各自的 CI 时间,然后互相打架。如果 ESLint 的--fix和 Prettier 的格式化产生冲突,代码就会在两种格式之间反复横跳。

更糟糕的是,ESLint 和 Prettier 都是用 JavaScript 写的。在一个数万行文件的大型项目中,它们的扫描时间可以轻松突破 30 秒。你的 CI 管道因此变慢,你的开发者体验因此变差,你的耐心因此耗尽。

Biome 是什么?

Biome 用 Rust 重写了整个工具链——格式化、Lint、导入排序、编辑器集成——全部在一个二进制文件中完成。它的格式化速度比 Prettier 快 35 倍,Lint 速度比 ESLint 快 15 倍。截至 2026 年 8 月,它已经拥有 25000+ GitHub Stars,被 Google、Microsoft、Vercel、Cloudflare、Discord 等顶级公司在生产环境中使用。

从 ESLint + Prettier 迁移到 Biome

迁移过程出奇地简单。首先安装 Biome:

npminstall--save-dev --save-exact @biomejs/biome

然后初始化配置:

npx @biomejs/biome init

生成的biome.json配置文件直观且强大:

{"$schema":"https://biomejs.dev/schemas/1.9.4/schema.json","organizeImports":{"enabled":true},"linter":{"enabled":true,"rules":{"recommended":true,"complexity":{"noUselessFragments":"error","useLiteralKeys":"warn"},"correctness":{"noUnusedVariables":"error","useExhaustiveDependencies":"warn"},"style":{"noNonNullAssertion":"warn","useConst":"error"}}},"formatter":{"enabled":true,"indentStyle":"space","indentWidth":2,"lineWidth":100},"javascript":{"formatter":{"quoteStyle":"single","trailingCommas":"all","semicolons":"always"}}}

Biome 的一个核心设计理念是「约定优于配置」。它内置了 200+ 条 lint 规则,覆盖了 ESLint 推荐规则的大部分功能。与 ESLint 不同,Biome 的规则不需要安装额外的插件——它们全部内置在二进制文件中。

性能基准测试

在一个包含 5000+ TypeScript 文件的 monorepo 中,实际的性能对比数据令人震惊:

工具格式化Lint总耗时
Prettier + ESLint28.3s45.7s74.0s
Biome0.8s3.1s3.9s

性能提升 19 倍。CI 管道中每次提交节省 70 秒,以每天 200 次提交计算,每天节省约 4 小时的 CI 计算时间。

编辑器集成

Biome 提供了 VS Code 扩展和 JetBrains 插件,提供实时的格式化和 lint 反馈。配置 VS Code 使用 Biome 作为默认格式化器:

{"editor.defaultFormatter":"biomejs.biome","editor.formatOnSave":true,"editor.codeActionsOnSave":{"quickfix.biome":"explicit","source.organizeImports.biome":"explicit"}}

迁移策略

对于大型项目,Biome 推荐渐进式迁移策略:

  1. 第一步:先启用 Biome 的格式化器,替代 Prettier。两者格式化结果高度兼容(99%+ 一致)。
  2. 第二步:逐步启用 lint 规则,从recommended开始,每次启用一批规则,修复后提交。
  3. 第三步:完全移除 ESLint 和 Prettier 依赖,清理.eslintrc.prettierrc配置文件。

对于仍在使用 ESLint 自定义规则的项目,Biome 的规则覆盖度已经达到约 80%。对于剩余 20% 的特殊规则,可以暂时保留 ESLint 仅执行那些规则,实现两套工具并存。

CI/CD 集成

在 GitHub Actions 中集成 Biome 非常简单:

# .github/workflows/ci.ymlname:Code Qualityon:[push,pull_request]jobs:biome:runs-on:ubuntu-lateststeps:-uses:actions/checkout@v4-uses:biomejs/setup-biome@v2with:version:latest-name:Run Biomerun:biome ci .

biome ci命令专为 CI 环境设计,它会在发现问题时以非零退出码退出,同时输出格式化的错误信息。与biome check不同,biome ci不会自动修复问题,而是将问题报告给开发者。

常见问题与解决方案

问题 1:Biome 的格式化结果与 Prettier 不一致

Biome 的格式化器追求与 Prettier 99%+ 的兼容性,但在某些边缘情况(如 template literal 缩进、JSX 属性换行)可能有细微差异。建议在迁移前运行biome format --write .并审查 diff,确保团队接受这些差异。

问题 2:ESLint 插件的自定义规则如何迁移

对于 ESLint 插件的自定义规则,Biome 提供了no-restricted-importsno-restricted-globals等通用规则来覆盖大部分场景。如果某些规则 Biome 确实不支持,可以保留 ESLint 仅运行这些规则:

# 仅运行 Biome 不支持的 ESLint 规则eslint--rule'my-custom-rule: error'--no-eslintrc.

问题 3:大项目的渐进式迁移

对于超过 10 万行代码的大型项目,推荐使用biome migrate命令自动迁移配置:

# 自动从 ESLint 和 Prettier 配置迁移biome migrate eslint--writebiome migrate prettier--write# 查看迁移后的配置catbiome.json

与其他 Rust 工具链的协同

Biome 并不是孤立存在的。在 2026 年的前端工具链中,一套完整的 Rust 工具链组合如下:

  • Biome:代码格式化和 Lint(替代 Prettier + ESLint)
  • SWC / Rspack:代码编译和打包(替代 Babel + Webpack)
  • Lightning CSS:CSS 处理和压缩(替代 PostCSS + cssnano)
  • Oxc:TypeScript 类型检查(替代 tsc,速度提升 50-100 倍)

这套组合可以让大型项目的 CI 时间从数分钟降低到数十秒,彻底改变前端开发的体验。对于追求极致开发体验的团队来说,将 Biome 纳入 CI 管道是 2026 年最具性价比的优化之一。

← 返回列表