Biome 完全入門｜ESLint+Prettier を代替する次世代ツール【2026年最新】

Biome は、Rust で書かれたLinter + Formatter + Bundler 統合ツールです。ESLint + Prettier の組み合わせを置き換える次世代ツールで、10〜25倍の高速化を実現します。2024年に安定版がリリースされ、2026年現在では多くのプロジェクトで採用されています。

Biome とは

Biome は、JavaScript Developer Tools を統合した Rust 製ツールで、以下の機能を一つのツールで提供します。

• Linter: 問題のあるコードを検出
• Formatter: Prettier 互換の自動フォーマット
• Type Checker（開発中）

主な利点:

• 爆速: Rust 実装で ESLint + Prettier の10倍以上高速
• ゼロコンフィグ: 設定なしで即利用可能
• オールインワン: ESLint と Prettier の統合で競合解消
• 互換性: Prettier の設定を継承可能

ESLint + Prettier との比較

項目	ESLint + Prettier	Biome
実装言語	JavaScript	Rust
Lint 速度	ベースライン	10-25倍
Format 速度	ベースライン	25倍
設定ファイル	2つ	1つ
学習コスト	高	低
エコシステム	大	小（拡大中）
競合	Prettier との衝突あり	なし

インストール

# npm
npm install --save-dev --save-exact @biomejs/biome

# pnpm
pnpm add --save-dev --save-exact @biomejs/biome

# yarn
yarn add --dev --exact @biomejs/biome

# bun
bun add --dev --exact @biomejs/biome

初期化

npx biome init

プロジェクトルートに biome.json が生成されます。

{
  "$schema": "https://biomejs.dev/schemas/1.8.0/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100
  }
}

基本コマンド

Lint チェック

# プロジェクト全体をチェック
npx biome lint ./src

# 特定ファイル
npx biome lint src/app.ts

# 自動修正
npx biome lint --write ./src

# 潜在的に危険な修正も含む
npx biome lint --write --unsafe ./src

Format

# フォーマットチェック
npx biome format ./src

# 自動フォーマット
npx biome format --write ./src

Lint + Format を同時に

# チェック
npx biome check ./src

# 自動修正
npx biome check --write ./src

package.json スクリプトの例

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

設定オプション

フォーマッターの設定

{
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "indentStyle": "space",     // "space" or "tab"
    "indentWidth": 2,
    "lineEnding": "lf",          // "lf" or "crlf"
    "lineWidth": 100,
    "attributePosition": "auto"
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",    // "single" or "double"
      "jsxQuoteStyle": "double",
      "trailingCommas": "all",   // "all" | "es5" | "none"
      "semicolons": "always",    // "always" | "asNeeded"
      "arrowParentheses": "always"
    }
  }
}

Linter の設定

{
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "suspicious": {
        "noExplicitAny": "warn"
      },
      "style": {
        "useConst": "error",
        "useTemplate": "warn"
      },
      "complexity": {
        "noForEach": "off"
      }
    }
  }
}

無視するファイル

{
  "files": {
    "ignore": [
      "node_modules",
      "dist",
      "build",
      ".next",
      "coverage"
    ]
  }
}

ESLint からの移行

既存の ESLint 設定を取り込めます。

# ESLint 設定を Biome の設定に変換
npx biome migrate eslint

Prettier 設定の取り込み:

npx biome migrate prettier

これにより、既存プロジェクトの設定を引き継いで移行できます。

VS Code との連携

拡張機能のインストール

Biome 公式拡張機能 をインストールします。

settings.json

{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  },
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[json]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

保存時に自動でフォーマットと Lint エラー修正が実行されます。

Git フックとの連携

Husky と組み合わせて、コミット前にチェックできます。

npx husky init
echo "npx biome check --write --no-errors-on-unmatched --files-ignore-unknown=true --staged" > .husky/pre-commit

lint-staged との組み合わせ:

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

CI/CD での活用

GitHub Actions の例:

name: CI

on: [push, pull_request]

jobs:
  biome:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: biomejs/setup-biome@v2
      - name: Run Biome
        run: biome ci ./src

biome ci はエラー時に 0 以外を返すため、CI が失敗します。

サポートするルール

Biome は2026年4月現在、約200のLintルールを提供しています。ESLint の主要ルールを網羅しており、TypeScript、JSX、JSON のサポートも含まれます。

主なカテゴリ:

• a11y: アクセシビリティ（eslint-plugin-jsx-a11y 相当）
• complexity: 複雑度の警告
• correctness: 明確なバグを検出
• performance: パフォーマンスの問題
• security: セキュリティリスク
• style: コードスタイル
• suspicious: 疑わしいパターン

パフォーマンスベンチマーク

大規模プロジェクトでの実測値（2025年時点）:

タスク	ESLint + Prettier	Biome	高速化倍率
Lint (10,000 ファイル)	45秒	2秒	22.5倍
Format (10,000 ファイル)	38秒	1.5秒	25.3倍
CI 時間全体	3分	30秒	6倍

Biome を採用している有名プロジェクト

• Astro: 本ブログのフレームワーク
• Tanstack Router
• Vite
• Supabase

多くの著名プロジェクトが ESLint + Prettier から Biome に移行しています。

制限事項

1. TypeScript の型チェックは不可

Biome は型チェックを行いません。tsc --noEmit との併用が必要です。

# 型チェック + Biome
tsc --noEmit && biome check .

2. 一部のエコシステムが未対応

• Vue / Svelte の .vue .svelte ファイルは未サポート
• Markdown、YAML は未サポート

3. ESLint プラグインとの互換性なし

ESLint のカスタムプラグインは使えません。独自ルールが必要な場合は、段階的に Biome 組み込みルールに置き換える必要があります。

まとめ

Biome は ESLint + Prettier の最有力な代替ツールです。

導入を推奨するケース:

• 新規プロジェクト
• ESLint / Prettier のセットアップに疲れている
• CI/CD 時間を短縮したい
• シンプルな設定を好む

まだ移行を待つべきケース:

• Vue / Svelte メインのプロジェクト
• ESLint の独自プラグインに依存している
• 特殊なルールを多用している

まずは新規プロジェクトで試してみるのがおすすめです。圧倒的な速度と設定の簡潔さに驚くはずです。

参考リンク

• Biome 公式サイト
• Biome GitHub Repository
• Migrate from ESLint and Prettier
• Biome VS Code 拡張機能