新一代工具链 BiomeJS 让前端构建速度起飞

BiomeJS Web 项目开发的一体化工具链关键字: biomejs, 格式化, ESLint, rust, Prettier

[[toc]]

官方网页

官网地址 https://biomejs.dev 中文文档 https://biomejs.dev/zh-cn/guides/getting-started/

核心特性实测体验

1. 极速格式化毫秒级响应

IDE 实时格式化的体验确实很惊艳！在 VSCode 中开启 Biome 插件后，保存 .tsx 文件几乎是瞬间完成，不再有 Prettier 那明显的延迟感。官方基准测试显示，在英特尔酷睿 i7 1270P 上格式化 171,127 行代码，Biome 的表现堪称惊艳。

而且它与 Prettier 有 97% 的兼容覆盖率，迁移后代码风格几乎无差异，团队协作无需重新适应。

2. 智能 Linter 会教你怎么写代码

Biome 内置的 linter 不是简单地报错，而是像导师一样指导你优化代码。例如这段代码：

// 优化前
array.map(sentence => sentence.split(' ')).flat();

Biome 会提示："The call chain .map().flat() can be replaced with a single .flatMap() call." 并且给出一键修复的方案。这种上下文感知的建议比 ESLint 的晦涩规则清晰太多。

目前 Biome 已集成 超过 200 条规则，覆盖 ESLint、typescript-eslint 及社区最佳实践，开箱即用。

3. 一体化命令 check 的魔法

这是我最爱的功能。过去需要运行 prettier --write && eslint --fix 两个命令，现在只需：

npx @biomejs/biome check --write ./src

一行命令同时完成格式化和修复，工具间共享 AST，避免重复解析。这种内部整合让复杂项目维护变得异常清爽。

迁移实战：10 分钟搞定

从 Prettier + ESLint 迁移到 Biome 出乎意料地简单：

安装与初始化

# 移除旧工具
npm uninstall prettier eslint @typescript-eslint/eslint-plugin

# 安装 Biome（推荐精确版本）
npm i -D --save-exact @biomejs/biome

# 自动生成配置
npx @biomejs/biome init

配置极简

生成的 biome.json 极其简洁，远非 ESLint 那臃肿的配置可比：

{
  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  }
}

::: tip 更多配置可以查阅 https://biomejs.dev/zh-cn/reference/configuration/ :::

验证与切换

# 检查差异（通常微乎其微）
npx @biomejs/biome format --write ./src
git diff

# 全面检查
npx @biomejs/biome check --write ./src

整个过程 10 分钟内完成，CI 构建时间从 5 分钟降至 40 秒。

企业级背书与生态

Biome 已获得业界认可：

AWS、Google、Microsoft 等科技巨头采用
Vercel、Discord、Cloudflare 等现代公司信任
Astro、Node.js 等开源项目集成
获得 2024 OS Award 开源奖项

谁适合立刻切换？

:ballot_box_with_check: 强烈推荐

项目文件数 超过 500 个，格式化耗时明显
纯 TS/React 项目，无自定义 ESLint 插件
大型 monorepo，CI 格式化耗时是瓶颈
VSCode 用户，团队接受 97% 兼容性
追求 极致性能，对 Rust 工具有好感
想 减少依赖项，简化工具链

:negative_squared_cross_mark: 不建议

重度 Vue/Svelte 项目
依赖自定义 ESLint 规则
WebStorm 用户
Tailwind 插件深度绑定

:warning: 折中方案

{
  "scripts": {
    "format": "biome format --write src",           // 日常
    "lint": "biome lint src && eslint src --quiet"  // Biome 快速 + ESLint 补漏
  }
}

新一代工具链 BiomeJS 让前端构建速度起飞 - 开发日志,biomejs, 格式化, ESLint, rust, Prettier - BiomeJS Web 项目开发的一体化工具链