Biome：统一前端工具链的未来

前言

前端项目依赖的工具越来越多：Prettier 管格式、ESLint 管 lint、Stylelint 管样式……每次新建项目光配置这些工具就够头疼了。Biome 的出现，就是要把这些全部统一。

Biome 是一个用 Rust 编写的高性能前端工具链，同时提供格式化（Formatter）和代码检查（Linter）功能，宣称比 Prettier 快 35 倍，比 ESLint 快 100 倍以上。

为什么需要 Biome

传统的工具链有几个痛点：

配置割裂。Prettier、ESLint、Stylelint 各有一套配置文件，.prettierrc、.eslintrc.js、.stylelintrc，维护成本高，新人上手慢。

性能瓶颈。JavaScript 实现的工具在大型 monorepo 中速度感人，每次 git commit 前的 pre-commit hook 可能要跑几分钟。

规则分散。ESLint 的插件生态碎片化，同一个规则在不同项目中行为不一致。

Biome 的核心思路：一个工具，一个配置文件，覆盖所有场景。

快速上手

npm i -D --save-exact @biomejs/biome
npx @biomejs/biome format --write ./src
npx @biomejs/biome lint --write ./src
npx @biomejs/biome check --write ./src

check 命令会同时运行格式化和 lint，并自动修复可修复的问题。零配置即可上手，Biome 会自动检测项目中的配置文件。

核心能力

格式化

支持 JavaScript、TypeScript、JSX、TSX、JSON、JSONC、HTML、CSS（含 SCSS/Less）、GraphQL。兼容 Prettier 达 97%，意味着从 Prettier 迁移几乎没有风险。

Lint 规则

Biome 内置了 472 条规则，涵盖 ESLint、typescript-eslint 和其他来源的最佳实践。每条规则都有清晰的诊断信息和修复建议。

常见的规则映射：

规则是分层级的：correctness（正确性）、style（风格）、performance（性能）、a11y（无障碍）、security（安全）。

与 CI/CD 集成

name: CI
on: [push, pull_request]
jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: "22"
          cache: "npm"
      - run: npm ci
      - run: npx @biomejs/biome check --ci ./src

--ci 模式下 Biome 不会自动修改文件，而是报告需要修复的问题，适合在 CI 中使用。

迁移现有项目

npx @biomejs/biome migrate eslint --write
npx @biomejs/biome migrate prettier --write

Biome 配置

{
  "$schema": "https://biomejs.dev/schemas/1.9.0/schema.json",
  "organizeImports": { "enabled": true },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "style": { "useTemplateLiterals": "warn" },
      "complexity": { "useFlatMap": "error" }
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "semicolons": "always"
    }
  }
}

在 Next.js 项目中使用

Next.js 15+ 内置支持 Biome，在 package.json 中添加：

{
  "scripts": {
    "lint": "biome check --write ./src",
    "lint:ci": "biome check --ci ./src"
  }
}

推荐在 pre-commit hook 中使用 husky + lint-staged：

{
  "lint-staged": {
    "*.{ts,tsx,js,jsx}": ["biome check --write"]
  }
}

局限性

Biome 尚不支持 Stylelint 完整的 CSS 检查能力，对于大型 CSS 项目可能仍需保留部分原有工具。此外，Prettier 兼容性 97% 意味着极少数极端情况可能有差异，上线前需仔细 review。插件生态也比 ESLint 年轻很多。

总结

Biome 代表了前端工具链的一种新范式：少即是多。一个工具、一个配置、一个团队规范。如果你的项目还在用 ESLint + Prettier 的老组合，强烈建议给 Biome 一个机会——35 倍的速度提升和统一配置带来的体验提升是实质性的。