Biome 統一前端工具鏈完整教學：一個工具取代 ESLint + Prettier 的開發體驗

你是否也曾經花了一整個下午，只為了讓 ESLint 和 Prettier 停止在同一行程式碼上互相打架？設定檔越疊越多、外掛版本衝突、CI 跑了三分鐘還在 lint——這些痛苦在 2026 年終於有了根本性的解法。Biome 是一套以 Rust 打造的統一前端工具鏈，用單一工具同時搞定 Linter 與 Formatter，而且速度快到讓你懷疑它是不是跳過了什麼步驟。

Biome 是什麼？從 Rome 到統一工具鏈的演進

Biome 的前身是 Rome Tools，由 Babel 的原始作者 Sebastian McKenzie 於 2020 年發起。Rome 專案在 2023 年因為公司營運問題而停擺，但社群隨即 fork 出 Biome 並持續維護至今。Biome 完全使用 Rust 撰寫，這意味著它在解析、分析、格式化的每一個環節都享有接近原生的執行效能。

與傳統的 ESLint + Prettier 組合不同，Biome 從設計之初就把 Linting 跟 Formatting 視為同一件事的兩個面向。你不需要安裝 eslint-config-prettier 來解決規則衝突，也不需要 eslint-plugin-prettier 把格式化偽裝成 lint 規則。一個 biome.json 搞定一切。

為什麼該考慮取代 ESLint + Prettier？

先說結論：不是 ESLint 或 Prettier 不好，而是它們合在一起的開發體驗有結構性的問題。

設定疲勞是第一個痛點。一個中型 React 專案可能需要 .eslintrc.js、.prettierrc、.editorconfig，再加上 eslint-config-airbnb、@typescript-eslint/parser、eslint-plugin-react-hooks 等十幾個套件。每次升級 ESLint 大版本，光是處理外掛相容性就能耗掉半天。

效能瓶頸是第二個問題。ESLint 以 JavaScript 執行，在大型 monorepo 中 lint 數千個檔案可能需要 30 秒以上。Biome 官方基準測試顯示，在相同規則集下，Biome 的執行速度約為 ESLint 的 20-30 倍。這不是微幅改善，而是從「等一下」變成「瞬間完成」的體感差異。

規則衝突則是長期的隱性成本。Prettier 的 printWidth 與 ESLint 的 max-len、Prettier 的分號策略與 ESLint 的 semi 規則，這些交叉地帶永遠是 bug 的溫床。如果你正在使用 Zustand 或 Redux 這類狀態管理方案，專案複雜度上升時這些衝突只會越來越頻繁。

安裝與初始設定

安裝 Biome 非常直覺。在專案根目錄執行：

npm install --save-dev --save-exact @biomejs/biome
npx @biomejs/biome init

這會在專案根目錄產生 biome.json，預設就已經啟用 Linter 和 Formatter。基本設定長這樣：

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

接著在 package.json 加上腳本：

{
  "scripts": {
    "lint": "biome check .",
    "lint:fix": "biome check --write .",
    "format": "biome format --write ."
  }
}

注意 biome check 同時執行 lint、format 檢查與 import 排序，一個指令三件事。

從 ESLint 遷移的實戰步驟

Biome 提供了官方的遷移指令，能自動讀取你現有的 ESLint 設定並轉換：

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

這兩個指令會分析你的 .eslintrc 和 .prettierrc，將對應的規則寫入 biome.json。遷移完成後，建議的漸進式策略如下：

1. 第一週：兩套工具並行，用 biome check 的結果與 ESLint 比對差異
2. 第二週：確認規則覆蓋率無顯著落差後，移除 ESLint 相關套件
3. 第三週：更新 CI pipeline，將 eslint 指令替換為 biome check

目前 Biome 已支援超過 280 條規則，涵蓋 ESLint 核心規則、TypeScript ESLint、React 與 React Hooks、JSX a11y、以及 import 排序。少數未覆蓋的進階規則可透過 overrides 暫時忽略。

關鍵功能深入解析

極速效能

Biome 使用 Rust 編寫的自訂解析器，不依賴 Babel 或 TypeScript 編譯器。在包含 2,000 個 TypeScript 檔案的專案中，實測數據如下：

這樣的速度差距在 CI/CD 環境中尤其有感。如果你的專案使用了 Next.js PPR 部分預渲染等進階功能，build pipeline 本身就已經夠複雜，lint 階段能省下的每一秒都值得。

統一的設定體驗

單一 biome.json 取代了過去散落各處的設定檔。Biome 支援 overrides 讓你對不同路徑或檔案類型套用不同規則，概念類似 ESLint 的 overrides 但語法更直覺：

{
  "overrides": [
    {
      "include": ["**/*.test.ts", "**/*.spec.ts"],
      "linter": {
        "rules": {
          "suspicious": {
            "noExplicitAny": "off"
          }
        }
      }
    }
  ]
}

IDE 即時整合

Biome 提供 VS Code 官方擴充套件，安裝後即可在存檔時自動格式化與修復 lint 問題。在 settings.json 中加入：

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

這讓開發者在撰寫 TanStack Query v5 的資料取得邏輯時，能即時看到 lint 回饋而不需要切換到終端機。

CI/CD 整合實務

在 GitHub Actions 中整合 Biome 只需要幾行設定：

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

biome ci 是專為 CI 環境設計的指令，它同時執行 lint、format 與 import 排序檢查，任何一項不通過就會以非零狀態碼退出。相比過去需要分別跑 eslint --max-warnings 0 和 prettier --check，pipeline 設定簡化了一半。

搭配 Git Hooks，可以用 lefthook 或 husky 在 commit 前自動修正：

npx @biomejs/biome check --write --staged

--staged 旗標確保只檢查暫存區的檔案，不會動到你還在開發中的其他變更。

ESLint + Prettier vs Biome 完整比較

實戰建議與注意事項

在決定遷移之前，有幾點值得評估。首先，如果你的專案大量依賴 ESLint 的自訂外掛（例如公司內部的規則集），Biome 目前不支援外掛系統，這可能是遷移的最大阻力。其次，Biome 對 Vue SFC 和 Svelte 的支援仍在早期階段，React 與純 TypeScript 專案會有最佳體驗。

對於新專案，直接從 Biome 開始是最省心的選擇。對於既有專案，建議先在一個小型子專案或新的 feature branch 上試跑，確認團隊的開發流程沒有斷裂再全面推進。

結語：工具鏈的簡化就是生產力

Biome 代表的不只是一個新工具，而是前端工具鏈從「拼裝車」走向「整合方案」的趨勢。當你把花在設定、除錯、等待 lint 的時間省下來，就能把精力放在真正重要的事情上——寫出更好的程式碼。如果你的團隊正在被 ESLint 和 Prettier 的複雜性消耗，現在是認真評估 Biome 的好時機。