Biome 入门：替代 ESLint + Prettier 的一体化工具链

前端项目标配 ESLint（查问题）+ Prettier（管格式），两套配置、两份依赖、还可能互相打架。Biome 用一个 Rust 工具把它们全替了——而且快 20 倍以上。

Biome 是什么

Biome（曾名 Rome）是用 Rust 写的 Web 工具链一体化方案：格式化、Lint、导入排序，一个工具全包。两个核心卖点：

速度。Rust 重写 + 单遍处理（扫描一遍代码同时完成解析、格式化、Lint），大型项目格式化从秒级降到毫秒级。保存文件即时格式化，不再有「格式化卡一下」的等待。

零配置起步。biome init 之后开箱即用，默认规则就是社区共识（ESLint recommended + Prettier 默认风格的合集），小项目几乎不用改配置。

冲突免疫。ESLint 和 Prettier 并存时有著名的规则打架问题（缩进、换行各有主张），需要 eslint-config-prettier 这类补丁关掉冲突规则。Biome 一体化，天然不存在打架。

接入

pnpm add -D -E @biomejs/biome
pnpm biome init        # 生成 biome.json

{
  "formatter": {
    "enabled": true,
    "indentStyle": "tab",       // 本站用 tab 缩进
    "lineWidth": 100
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true       // 社区共识规则集
    }
  },
  "files": {
    "ignore": ["dist/**", "node_modules/**"]
  }
}

// package.json
{
  "scripts": {
    "format": "biome format --write ./src",
    "lint": "biome check --write ./src"    // check = lint + 格式检查 + 导入排序
  }
}

biome check --write 是日常主力：检查 + 自动修复一条命令。

与 ESLint 的能力对比

诚实评估，Biome 覆盖了 ESLint 的常用部分，但不是全量替代：

判断标准：业务规则、深度 type-aware 检查、自定义插件需求多的团队留在 ESLint；要的是格式 + 通用质量检查（大多数项目的真实需求）Biome 完全够且体验更好。本站就选了后者——前端代码库以自研为主，没有历史 ESLint 插件包袱。

日常使用模式

编辑器联动（VS Code 装 Biome 扩展）：

// .vscode/settings.json —— 保存即格式化，用 Biome 作为默认 formatter
{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit"      // 保存时自动修 lint 问题
  }
}

CI 门禁：

- run: pnpm biome check ./src      # 不带 --write，发现问题即失败

这套「保存即修 + CI 兜底」的组合，让代码风格问题在进仓库前就消失。

从 ESLint + Prettier 迁移

pnpm biome migrate eslint --write       # 读 .eslintrc 自动转换配置
pnpm biome migrate prettier --write     # 读 .prettierrc 转换格式化配置

迁移命令会读取现有配置生成对应 biome.json，然后格式化全仓库一次（会有一次大批量 diff，单独提一个格式化 commit 别混业务变更）。

小结

Biome 的本质主张是：格式化和 Lint 本来就是同一件事（都是对代码的确定性变换），拆成两个工具是历史产物。它把速度、配置统一性、零冲突三样一起给了你。代价是插件生态不如 ESLint 丰富——但除非你有重度自定义规则需求，否则感知不到。新前端项目，它应该是默认选择。