Biome：ESLint + Prettier 的 Rust 接班人？

如果有一個工具比 ESLint 快 10-56 倍，而且同時還是 Prettier 的替代品，你會考慮嗎？Biome 正在用 Rust 重新實現 ESLint 和 Prettier 的功能，效能數據碾壓了兩者。到了 2026 年，Biome 生態系已經足夠成熟——423+ rules、內建 formatter、CI/CD 整合——開始取代 ESLint + Prettier 的組合，成為新專案的預設選擇。

---

為什麼要放棄 ESLint + Prettier

ESLint 和 Prettier 是 JavaScript/TypeScript 生態系最流行的兩個工具：

ESLint = Linter（檢查程式碼品質）
Prettier = Formatter（統一程式碼風格）

兩者加起來，大概占了多數前端專案 50-70% 的 lint + format 時間。但這兩個工具是分開的：

• 兩套配置：.eslintrc + .prettierrc
• 兩套安装：npm install eslint prettier
• 兩套更新：每次都要同時維護兩個工具
• 慢：ESLint 的 JavaScript 執行環境有天花板

Biome 的賭注是：把這兩個工具合併成一個，用 Rust 重新實現，然後快 10-56 倍。

---

Biome 的效能數據

獨立基準測試

工具	10,000 檔案 Linting	10,000 檔案 Formatting
Biome	0.8 秒	0.3 秒
ESLint	45 秒	—
Prettier	—	12 秒
Oxlint	~0.6 秒	—

Biome 的 formatter 比 Prettier 快 40 倍，Biome 的 linter 比 ESLint 快 56 倍。

真實專案測量（shadcn/ui）

shadcn/ui 是一個大型開源 UI 專案（大量元件）：

Biome：783ms
ESLint + Prettier：13秒

差異約 16 倍。在 CI 環境裡，這個差異直接影響 Feedback Loop 的速度。

---

Biome 的核心功能

1. Linter + Formatter 合一

Biome 用一個工具同時做到 ESLint 和 Prettier 做的事情：

# 格式化
biome format --write ./src

# Lint 檢查
biome lint ./src

# 自動修復
biome check --write ./src

# 組織 import
biome organize-imports ./src

過去需要三個工具做的事情（ESLint + Prettier + eslint-plugin-import），Biome 一個工具就搞定了。

2. 423+ Lint Rules

Biome 內建了 423+ rules，涵蓋：

類別	範例 Rules
安全性	noDangerouslySetInnerHtml、noGlobalEval
正確性	noUnusedVariables、noUnreachable
效能	noDelete、useOptionalCatchBinding
Accessibility	altText、validAriaRole
樣式	noNegationElse、useTemplate

3. 單一配置文件

// biome.json
{
  "$schema": "https://biomejs.dev/schemas/2.3.0/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "correctness": {
        "noUnusedVariables": "error"
      },
      "security": {
        "noDangerouslySetInnerHtml": "warn"
      }
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100
  }
}

一個檔案取代了 .eslintrc + .prettierrc + eslint-plugin-import + eslint-plugin-react + …

---

Biome vs ESLint vs Oxlint

維度	Biome	ESLint	Oxlint
語言	Rust	JavaScript	Rust
速度	快	慢	極快
Formatter	✅ 內建	❌ 需要 Prettier	❌
Auto-fix	✅	✅	❌
Rules	423+	700+	~300
Plugins	❌（純內建）	✅ 4000+	❌
TypeScript	✅ 原生	✅	✅

Biome 的定位：比 ESLint 快，比 Oxlint 功能更完整。

---

遷移教學：從 ESLint + Prettier 到 Biome

步驟 1：安裝 Biome

npm install --save-dev @biomejs/biome

步驟 2：生成配置

npx @biomejs/biome init
# 生成 biome.json

步驟 3：Migration Codemod（可選）

Biome 提供了從 ESLint 和 Prettier 的自動遷移工具：

# 從 ESLint 遷移配置
npx @biomejs/biome migrate eslint --config-path ./biome.json

# 從 Prettier 遷移配置
npx @biomejs/biome migrate prettier --config-path ./biome.json

步驟 4：驗證

# 格式化並檢查
npx biome check --write ./src

# CI 模式（不改變檔案，只輸出錯誤）
npx biome ci ./src

步驟 5：VS Code 整合

// .vscode/settings.json
{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports.biome": "explicit"
  }
}

---

什麼時候適合用 Biome

Biome 非常適合的場景

• 新專案：沒有 ESLint/Prettier 歷史包袱，直接用 Biome
• 小型團隊：只有 1-3 人的前端團隊，不想維護兩套工具
• CI/CD 加速：建置時間想從幾十秒變成幾秒
• 效能敏感：對 lint + format 的 Feedback Loop 有要求

暫時不適合的場景

• 高度客製化的 ESLint 配置：很多企業有數百條 custom rules
• 依賴特定 plugins：Biome 不支援 ESLint plugins
• 需要非常特定的 code style 規則：Biome 的預設值是 opinionated

---

結語：工具鏈的 Rust 化正在加速

Biome 的出現，是 JavaScript 工具鏈 Rust 化趨勢的一部分。ESLint + Prettier 長期以來是前端工程的標配，但它們的速度瓶頸在大型專案裡越來越明顯。

Biome 的策略很務實：不是重新發明輪子，而是用更快的語言，重新實現已經證明有效的功能。423+ rules 來自 eslint-plugin-typescript-eslint 和其他成熟規則，formatter 吸收了 Prettier 的 Opinionated 設計。

對於 2026 年的新專案，Biome 是一個值得評估的選擇。對於現有專案，可以先在非关键的模組上測試 Biome，評估它與現有配置的相容性，再決定是否全面遷移。

---

延伸閱讀

• ESLint Flat Config 遷移 — 程式碼品質工具
• Vite 8 Rust 統一建置 — 建置工具最新動態

本文是「2026 前端工具演進」系列文章之一。