Biome 入門 — ESLint + Prettier を一本化して開発体験を向上させる

Biome は ESLint と Prettier の機能を一つにまとめた Rust 製ツールです。この記事では、インストールから既存プロジェクトへの移行、VS Code との連携まで実際のコマンドとともに解説します。

Biome とは

Biome は Rome の後継として 2023 年に登場した、リンター・フォーマッターを兼ねた高速な開発ツールです。Rust で実装されており、ESLint + Prettier の組み合わせと比べて大幅に高速です。

バージョン情報: 2025年10月時点で Biome v2.3 がリリースされています。本記事の内容は v2 系を前提に書いています。v1 系からのアップグレードは npx @biomejs/biome migrate コマンドで行えます。

ESLint + Prettier との比較

項目	ESLint + Prettier	Biome
役割	リント + フォーマット（2 ツール）	リント + フォーマット（1 ツール）
実装言語	JavaScript	Rust
速度	標準	最大 35 倍高速（公式ベンチマーク）
設定ファイル	.eslintrc + .prettierrc	biome.json 1 ファイル
ESLint ルール互換性	全対応	主要ルールを段階的に対応中
Prettier 互換性	別ツール	97% 互換
プラグインエコシステム	豊富	成長中
Vue / Svelte / Astro 対応	プラグイン経由	v2.3 からネイティブ対応

向いているプロジェクト

• 新規プロジェクトや小〜中規模の TypeScript / JavaScript プロジェクト
• ESLint の複雑な設定に疲れている場合
• CI のリント・フォーマットチェックを高速化したい場合

インストール

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

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

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

--save-exact でバージョンを固定するのが公式推奨です。Biome はマイナーバージョンでフォーマット出力が変わることがあるため、チームで出力を統一するために固定します。

設定ファイルを初期化します。

npx @biomejs/biome init

biome.json が生成されます。

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

基本的な使い方

# フォーマットのチェック（変更なし）
npx @biomejs/biome format .

# フォーマットを適用
npx @biomejs/biome format --write .

# リントのチェック
npx @biomejs/biome lint .

# フォーマット + リントを一括実行（CI に最適）
npx @biomejs/biome check .

# フォーマット + リントを適用
npx @biomejs/biome check --write .

biome.json の詳細設定

Next.js + TypeScript プロジェクト向け設定例

{
  "$schema": "https://biomejs.dev/schemas/2.3.0/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "correctness": {
        "useExhaustiveDependencies": "warn",
        "noUnusedVariables": "error"
      },
      "suspicious": {
        "noConsoleLog": "warn"
      },
      "style": {
        "noNonNullAssertion": "warn"
      }
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "double",
      "trailingCommas": "es5",
      "semicolons": "asNeeded"
    }
  },
  "files": {
    "ignore": [
      "node_modules",
      ".next",
      "out",
      "public"
    ]
  }
}

特定ルールを無効化する

{
  "linter": {
    "rules": {
      "recommended": true,
      "suspicious": {
        "noExplicitAny": "off"
      }
    }
  }
}

ファイル単位での無効化はコメントで指定します。

// biome-ignore lint/suspicious/noExplicitAny: 外部ライブラリ型との互換のため
const value: any = externalLib.getValue()

package.json へのスクリプト追加

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

VS Code との連携

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

code --install-extension biomejs.biome

.vscode/settings.json に以下を追加して、保存時に自動フォーマットが動くようにします。

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

ESLint + Prettier からの移行手順

1. Biome をインストール

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

2. 既存設定を Biome に移行（マイグレーションコマンド）

Biome には公式のマイグレーションコマンドがあります。

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

これにより .eslintrc.* や .prettierrc の設定が biome.json に取り込まれます。

3. 古いパッケージを削除

npm uninstall eslint prettier \
  eslint-config-next \
  eslint-config-prettier \
  eslint-plugin-prettier \
  @typescript-eslint/eslint-plugin \
  @typescript-eslint/parser

4. 設定ファイルを削除

rm .eslintrc.json .eslintrc.js .eslintignore .prettierrc .prettierignore

5. .editorconfig との関係

Biome は .editorconfig を読み込みません。.editorconfig で定義していたインデントや改行コードの設定は biome.json に移します。

{
  "formatter": {
    "indentStyle": "space",
    "indentWidth": 2,
    "lineEnding": "lf"
  }
}

CI での使い方

GitHub Actions での設定例です。

# .github/workflows/lint.yml
name: Lint & Format

on:
  pull_request:

jobs:
  biome:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
      - run: npx @biomejs/biome ci .

biome ci コマンドは biome check と同じチェックを行いますが、CI 向けに最適化された出力形式で結果を表示します。

ハマりやすいポイント

Prettier と 97% しか互換性がない

Biome は Prettier と 97% 互換と公式が明言しています。残り 3% の差異でフォーマット結果が変わる場合があります。移行後は差分を全ファイルに適用してコミットしておくとよいです。

# 移行直後に全ファイルを一括フォーマット
npx @biomejs/biome format --write .
git add -A
git commit -m "chore: Biome によるフォーマット適用"

ESLint プラグインが使えない

eslint-plugin-react-hooks や eslint-plugin-import など、ESLint エコシステムのプラグインは Biome では直接使えません。Biome が対応していないルールが必要な場合は、そのルールだけ ESLint を残す（併用）方法もあります。

next lint との関係

Next.js の next lint コマンドは内部で ESLint を使います。Biome に完全移行した場合は next lint を使わず、biome check に統一します。

// package.json
{
  "scripts": {
    "lint": "biome check .",
    // "lint": "next lint",  ← 削除
  }
}

JSON ファイルのフォーマット

Biome はデフォルトで JSON もフォーマットします。tsconfig.json や package.json も整形されることを念頭に置いてください。特定のファイルを除外する場合は files.ignore に追加します。

{
  "files": {
    "ignore": ["package-lock.json"]
  }
}

まとめ

Biome は設定の簡素化・速度・1 ツールへの統一という点で大きなメリットがあります。特に新規プロジェクトや ESLint 設定の複雑さに悩んでいる場合は導入を強くおすすめします。一方、特定の ESLint プラグインへの依存が強い既存プロジェクトでは段階的な移行や併用が現実的です。