Biome - 高速オールインワンツールチェーン

概要

Biome は Rust で書かれた、ウェブプロジェクト向けの高速なオールインワンツールチェーンです。ESLint と Prettier の両方を、100倍高速でかつゼロコンフィグのデフォルト設定を備えた単一ツールに置き換えます。

主な機能:

• リントとフォーマットを1つのツールで実現
• ESLint より 100倍高速
• デフォルトではゼロコンフィグ
• ビルトイン import ソート
• TypeScript ファースト設計
• 部分的な Prettier 互換性
• ネイティブ monorepo サポート
• VS Code 連携

インストール:

npm install --save-dev @biomejs/biome

クイックスタート

1. Biome の初期化

# biome.json設定を作成
npx @biomejs/biome init

# プロジェクトをチェック
npx @biomejs/biome check .

# 問題を自動で修正
npx @biomejs/biome check --write .

# フォーマットのみ
npx @biomejs/biome format --write .

# リントのみ
npx @biomejs/biome lint .

2. Package.json スクリプト

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

3. 基本設定

{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  },
  "files": {
    "ignoreUnknown": false,
    "ignore": ["node_modules", "dist", "build", ".next"]
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "semicolons": "asNeeded",
      "trailingCommas": "all"
    }
  }
}

コアコマンド

Check コマンド（推奨）

check コマンドはリントとフォーマットの両方を実行します:

# すべてのファイルをチェック
biome check .

# 問題を自動で修正
biome check --write .

# 危険な修正を適用（動作が変わる可能性あり）
biome check --write --unsafe .

# 提案された修正を適用
biome check --write --unsafe --apply-suggested

# 特定のファイルをチェック
biome check src/**/*.ts

# CI モード（問題がある場合はエラーで終了）
biome ci .

Format コマンド

リント処理なしでコードをフォーマット:

# すべてのファイルをフォーマット
biome format --write .

# ファイルを変更しないでフォーマットをチェック
biome format .

# 特定のファイルをフォーマット
biome format --write src/**/*.{ts,tsx,js,jsx}

# 標準入力をフォーマット
echo "const x={a:1}" | biome format --stdin-file-path=file.js

Lint コマンド

フォーマット処理なしでコードをリント:

# すべてのファイルをリント
biome lint .

# リント問題を修正
biome lint --write .

# ルール名を表示
biome lint --verbose .

# 危険な修正を適用
biome lint --write --unsafe .

設定の詳細説明

フォーマッター設定

{
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineEnding": "lf",
    "lineWidth": 80,
    "attributePosition": "auto"
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "jsxQuoteStyle": "double",
      "quoteProperties": "asNeeded",
      "trailingCommas": "all",
      "semicolons": "asNeeded",
      "arrowParentheses": "always",
      "bracketSpacing": true,
      "bracketSameLine": false
    }
  },
  "json": {
    "formatter": {
      "trailingCommas": "none"
    }
  }
}

リンター設定

{
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "a11y": {
        "recommended": true,
        "noAutofocus": "error",
        "useKeyWithClickEvents": "warn"
      },
      "complexity": {
        "recommended": true,
        "noForEach": "off",
        "useLiteralKeys": "error"
      },
      "correctness": {
        "recommended": true,
        "noUnusedVariables": "error",
        "useExhaustiveDependencies": "warn"
      },
      "performance": {
        "recommended": true,
        "noAccumulatingSpread": "warn"
      },
      "security": {
        "recommended": true,
        "noDangerouslySetInnerHtml": "error"
      },
      "style": {
        "recommended": true,
        "noNonNullAssertion": "warn",
        "useConst": "error",
        "useTemplate": "warn"
      },
      "suspicious": {
        "recommended": true,
        "noExplicitAny": "warn",
        "noArrayIndexKey": "error"
      }
    }
  }
}

ファイル無視パターン

{
  "files": {
    "ignore": [
      "node_modules",
      "dist",
      "build",
      ".next",
      "coverage",
      "*.min.js",
      "public/assets/**"
    ],
    "ignoreUnknown": false,
    "include": ["src/**/*.ts", "src/**/*.tsx"]
  }
}

特定ファイルの設定オーバーライド

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

VS Code 連携

1. Biome 拡張機能をインストール

# VS Code マーケットプレイスからインストール
code --install-extension biomejs.biome

2. VS Code 設定（.vscode/settings.json）

{
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "quickfix.biome": "explicit",
      "source.organizeImports.biome": "explicit"
    }
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "quickfix.biome": "explicit",
      "source.organizeImports.biome": "explicit"
    }
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome",
    "editor.formatOnSave": true
  },
  "[json]": {
    "editor.defaultFormatter": "biomejs.biome",
    "editor.formatOnSave": true
  },
  "biome.lspBin": "./node_modules/@biomejs/biome/bin/biome"
}

3. ワークスペース設定

{
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.defaultFormatter": "biomejs.biome",
  "biome.rename": true,
  "files.autoSave": "onFocusChange"
}

ESLint と Prettier からのマイグレーション

1. 古いツールの削除

# ESLint と Prettier を削除
npm uninstall eslint prettier eslint-config-prettier \
  eslint-plugin-react eslint-plugin-import \
  @typescript-eslint/parser @typescript-eslint/eslint-plugin

# 設定ファイルを削除
rm .eslintrc.js .eslintrc.json .prettierrc .prettierignore

2. 設定をマイグレーション

Biome のマイグレーションツールを使用:

# Prettier 設定をマイグレーション
biome migrate prettier --write

# ESLint 設定をマイグレーション
biome migrate eslint --write

3. 手動マイグレーション

Prettier → Biome フォーマッター:

// .prettierrc (古い設定)
{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100
}

// biome.json (新しい設定)
{
  "formatter": {
    "lineWidth": 100
  },
  "javascript": {
    "formatter": {
      "semicolons": "asNeeded",
      "quoteStyle": "single",
      "trailingCommas": "all"
    }
  }
}

ESLint → Biome リンター:

// .eslintrc.json (古い設定)
{
  "rules": {
    "no-unused-vars": "error",
    "prefer-const": "warn"
  }
}

// biome.json (新しい設定)
{
  "linter": {
    "rules": {
      "correctness": {
        "noUnusedVariables": "error"
      },
      "style": {
        "useConst": "warn"
      }
    }
  }
}

4. スクリプトを更新

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

Git フック統合

Husky + lint-staged を使用

# 依存関係をインストール
npm install --save-dev husky lint-staged
npx husky init

.husky/pre-commit:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

package.json:

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

Lefthook を使用

lefthook.yml:

pre-commit:
  commands:
    lint:
      glob: "*.{js,ts,jsx,tsx,json}"
      run: biome check --write --no-errors-on-unmatched {staged_files}

シンプルな Git フック（依存関係なし）

.git/hooks/pre-commit:

#!/bin/bash

# ステージ済みファイルを取得
STAGED_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep -E '\.(js|ts|jsx|tsx|json)$')

if [ -n "$STAGED_FILES" ]; then
  echo "Running Biome on staged files..."
  npx @biomejs/biome check --write --no-errors-on-unmatched $STAGED_FILES

  # フォーマットされたファイルをステージに戻す
  git add $STAGED_FILES
fi

CI/CD 統合

GitHub Actions

name: Biome CI

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

jobs:
  biome:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Run Biome CI
        run: npx @biomejs/biome ci .

      - name: Check formatting
        run: npx @biomejs/biome format .

      - name: Lint
        run: npx @biomejs/biome lint .

GitLab CI

biome:
  image: node:20-alpine
  stage: test
  script:
    - npm ci
    - npx @biomejs/biome ci .
  cache:
    paths:
      - node_modules/
  only:
    - merge_requests
    - main

CircleCI

version: 2.1

jobs:
  biome:
    docker:
      - image: cimg/node:20.11
    steps:
      - checkout
      - restore_cache:
          keys:
            - deps-{{ checksum "package-lock.json" }}
      - run: npm ci
      - save_cache:
          paths:
            - node_modules
          key: deps-{{ checksum "package-lock.json" }}
      - run: npx @biomejs/biome ci .

workflows:
  test:
    jobs:
      - biome

import ソート

Biome にはビルトイン import ソート機能があります:

# import を整理
biome check --write --organize-imports-enabled=true .

設定:

{
  "organizeImports": {
    "enabled": true
  }
}

例:

// 修正前
import { useState } from 'react';
import axios from 'axios';
import { Button } from './components/Button';
import type { User } from './types';
import './styles.css';

// 修正後（ソート済み）
import type { User } from './types';

import axios from 'axios';
import { useState } from 'react';

import { Button } from './components/Button';

import './styles.css';

TypeScript サポート

Biome は TypeScript を第一級でサポートしています:

{
  "linter": {
    "rules": {
      "suspicious": {
        "noExplicitAny": "warn",
        "noUnsafeDeclarationMerging": "error"
      },
      "correctness": {
        "noUnusedVariables": "error"
      },
      "style": {
        "useImportType": "error",
        "useExportType": "error"
      }
    }
  }
}

型を考慮したリント:

// Biome が未使用変数を検出
const unused = 123; // ❌ エラー

// 型の import を強制
import { User } from './types'; // ❌ エラー
import type { User } from './types'; // ✅ 正しい

// 危険な型アサーションを検出
const num = "123" as any as number; // ⚠️ 警告

Monorepo サポート

Biome は monorepo で素晴らしく動作します:

プロジェクト構造

my-monorepo/
├── biome.json (ルート設定)
├── packages/
│   ├── web/
│   │   └── biome.json (ルートを継承)
│   ├── api/
│   │   └── biome.json
│   └── shared/
│       └── biome.json

ルート設定

{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "extends": [],
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  }
}

パッケージオーバーライド

{
  "extends": ["../../biome.json"],
  "formatter": {
    "lineWidth": 100
  },
  "linter": {
    "rules": {
      "style": {
        "noNonNullAssertion": "off"
      }
    }
  }
}

Monorepo スクリプト

{
  "scripts": {
    "check": "biome check .",
    "check:packages": "biome check packages/*",
    "format": "biome format --write .",
    "lint": "biome lint packages/*"
  }
}

パフォーマンス上の利点

速度比較

ツール	実行時間（10,000ファイル）
ESLint + Prettier	約60秒
Biome	約0.6秒

平均的なワークロードで 100倍高速 です。

キャッシング

Biome は知的にキャッシュします:

# 初回実行（キャッシュなし）
biome check .  # 1.2秒

# 2回目以降（キャッシュあり）
biome check .  # 0.1秒

# キャッシュをクリア
rm -rf node_modules/.cache/biome

並列処理

Biome はデフォルトですべての CPU コアを使用します:

# CPU コアを制限
biome check --max-diagnostics=50 .

# 詳細出力
biome check --verbose .

よく使うパターン

React プロジェクト

{
  "linter": {
    "rules": {
      "a11y": {
        "recommended": true,
        "useButtonType": "error",
        "useKeyWithClickEvents": "error"
      },
      "correctness": {
        "useExhaustiveDependencies": "warn",
        "useHookAtTopLevel": "error"
      },
      "suspicious": {
        "noArrayIndexKey": "error"
      }
    }
  },
  "javascript": {
    "formatter": {
      "jsxQuoteStyle": "double"
    }
  }
}

Next.js プロジェクト

{
  "files": {
    "ignore": [".next", "out", "node_modules"]
  },
  "overrides": [
    {
      "include": ["app/**/*.tsx", "pages/**/*.tsx"],
      "linter": {
        "rules": {
          "a11y": {
            "recommended": true
          }
        }
      }
    }
  ]
}

Node.js バックエンド

{
  "linter": {
    "rules": {
      "security": {
        "recommended": true,
        "noGlobalEval": "error"
      },
      "correctness": {
        "noUnusedVariables": "error"
      }
    }
  },
  "javascript": {
    "formatter": {
      "semicolons": "always"
    }
  }
}

ベストプラクティス

1. biome check を使う - format/lint の別コマンドの代わりに
2. --write フラグを有効にする - 自動修正のために
3. VS Code を設定する - 保存時フォーマット用
4. git フックを追加する - コミット前に品質を強制
5. CI モードを使う - (biome ci) 継続統合で
6. 推奨ルールから始める - その後カスタマイズ
7. import ソートを活用する - import を自動整理
8. オーバーライドを使う - ファイルタイプやディレクトリごとに
9. VCS 統合を有効にする - .gitignore を尊重
10. 設定を最小限にする - Biome は賢いデフォルトを持っています

トラブルシューティング

Biome がフォーマットしない

# フォーマッターが有効か確認
biome rage

# ファイルが無視されていないか確認
biome check --verbose src/file.ts

# VS Code 拡張機能ログを確認
# View → Output → Biome

Prettier との競合

# VS Code 設定で Prettier を無効化
"[javascript]": {
  "editor.defaultFormatter": "biomejs.biome"
}

# Prettier の依存関係を削除
npm uninstall prettier

パフォーマンスの問題

# キャッシュ位置を確認
biome rage

# キャッシュをクリア
rm -rf node_modules/.cache/biome

# 最大診断数を減らす
biome check --max-diagnostics=20 .

ルール設定が機能しない

// カテゴリ名が重要
{
  "linter": {
    "rules": {
      "correctness": {  // カテゴリ名が重要
        "noUnusedVariables": "error"
      }
    }
  }
}

ローカル Biome 設定（あなたのリポジトリ）

アクティブなプロジェクトのパターン:

• ai-code-review/biome.json: files.includes が src/**/*.ts を対象とし、テストを除外、lineWidth: 100、シングルクォート、常にセミコロンあり、noExplicitAny: warn。
• itinerizer-ts/biome.json: files.ignore が node_modules、dist、.claude、データディレクトリを含む。organizeImports.enabled = true。
• matsuoka-com と diogenes は同様のフォーマット設定デフォルト（2スペースインデント、lineWidth 100）を使用。

共通スクリプト:

{
  "lint": "biome check src/ --diagnostic-level=error",
  "lint:fix": "biome check src/ --write",
  "format": "biome format src/ --write"
}

リソース

• 公式ドキュメント: https://biomejs.dev
• VS Code 拡張機能: https://marketplace.visualstudio.com/items?itemName=biomejs.biome
• GitHub: https://github.com/biomejs/biome
• ルール リファレンス: https://biomejs.dev/linter/rules/
• マイグレーション ガイド: https://biomejs.dev/guides/migrate-eslint-prettier/

まとめ

• Biome は高速なオールインワン リンターとフォーマッター
• 100倍高速 - ESLint + Prettier より
• デフォルトはゼロコンフィグ - 賢いデフォルト設定
• Rust で構築 - 最大のパフォーマンスのために
• TypeScript ファースト - 優れた型サポート
• import ソート付属 - すぐに使える
• VS Code 統合 - 公式拡張機能あり
• 最適用途: モダンウェブプロジェクト、monorepo、CI/CD
• 簡単なマイグレーション - ESLint と Prettier から