Claude Code × Biome：ESLint+Prettierを一発で置き換えるRust製ツールチェーン

Claude Code × Biome：ESLint+Prettierを一発で置き換えるRust製ツールチェーン

はじめに

Claude CodeにPRを作ってもらったら、レビューコメントがフォーマットの指摘で溢れた——そんな経験はないだろうか。AIが生成したコードは動くけれど、インデントがズレていたり、クォートの使い方が統一されていなかったりする。ESLintの設定を整えようとすれば、.eslintrc・.prettierrc・eslint-config-prettierの相性問題が待っている。

BiomeはRust製のWebツールチェーンで、フォーマッターとリンターを1ツール・1設定ファイルに統合する。Claude Codeとの組み合わせで実現したいのは「AIが生成したコードを、Biomeが自動で整形する」という状態だ。本記事では、その具体的なセットアップとワークフローを紹介する。

Biomeとは何か

BiomeはJavaScript・TypeScript・CSS・GraphQLを対象とした、Rust製のオールインワンツールチェーンだ。2023年8月のv1.0リリース以降、2025年6月にv2.0がリリースされ、2026年4月時点では423以上のLint規則を持つまでに成長した。

ESLint+Prettierを使っている現状の問題は、設定の複雑さにある。eslint-config-prettierでルールの競合を解消し、@typescript-eslint/eslint-pluginを追加し、.eslintignoreと.prettierignoreを両方管理する——このような構成では127以上のnpmパッケージが積み重なることも珍しくない。

Biomeへの移行後は設定ファイルがbiome.jsonの1ファイルになり、インストールするパッケージも@biomejs/biomeの1つだけになる。

Claude Code × Biomeの統合

ESLint/PrettierからBiomeへの移行をClaude Codeに依頼する

Biomeには既存のESLint・Prettier設定を自動変換するコマンドが用意されている。Claude Codeへの指示は以下の手順を伝えるだけで済む：

以下の手順でESLintとPrettierをBiomeに移行してください:
1. npx @biomejs/biome migrate eslint --write
2. npx @biomejs/biome migrate prettier --write
3. biome.jsonの内容を確認し、不要なルールを整理
4. package.jsonのscriptsをBiome用に更新
5. 既存のESLint/Prettier設定ファイルと依存パッケージを削除

移行コマンドはESLint設定を読み込み、対応するBiomeルールに自動変換する。ESLintのkebab-caseのルール名はBiomeのcamelCaseへ自動変換されるため、手動でのルール名の書き換えは不要だ。

Claude Codeの出力コードに自動でBiomeを適用する

.claude/settings.jsonにPostToolUseフックを設定すると、Claude Codeがファイルを生成・編集した直後にBiomeが自動実行される：

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Edit|Write|MultiEdit",
        "hooks": [
          {
            "type": "command",
            "command": "npx @biomejs/biome check --write ${file}"
          }
        ]
      }
    ]
  }
}

${file}プレースホルダーで編集されたファイルのみを対象にBiomeが実行される。この設定により、Claude Codeが生成したコードが即座にプロジェクトのフォーマット・Lintルールに沿った状態になる。

ただし、このフック設定の${file}プレースホルダーの正確な動作はClaude Codeのバージョンによって変わる可能性がある。公式ドキュメントで最新の設定形式を確認してほしい。フックの設定が確認できない場合は、「Claude Codeの作業完了後にnpx biome check --write .を手動実行する」か「pre-commitフックで整形する」形でも同等の効果が得られる。

実践的な設定

biome.json（TypeScript/Reactプロジェクト向け）

{
  "$schema": "https://biomejs.dev/schemas/2.4.11/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true,
    "defaultBranch": "main"
  },
  "files": {
    "ignoreUnknown": true,
    "includes": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx", "**/*.json"]
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100,
    "lineEnding": "lf"
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "correctness": {
        "noUnusedVariables": "error"
      },
      "suspicious": {
        "noExplicitAny": "warn"
      },
      "style": {
        "useConst": "error"
      }
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "trailingCommas": "es5",
      "semicolons": "always"
    }
  },
  "organizeImports": {
    "enabled": true
  }
}

スキーマURLのバージョン番号（2.4.11）は最新バージョンに合わせて変更してほしい。公式ドキュメント（biomejs.dev）で現在のバージョンを確認してから使用することを推奨する。

CLAUDE.mdでBiomeルールを定義する

## コード品質ルール

- フォーマットはBiomeで統一（ESLint/Prettierは使用しない）
- コード生成後は必ず npx biome check --write <ファイルパス> を実行
- インデント: スペース2つ
- クォート: シングルクォート
- セミコロン: 必須
- import順序: Biomeの organizeImports に従う
- 未使用変数: エラー扱い（noUnusedVariables）

## 開発コマンド
- lint + format チェック: npm run check
- 自動修正: npm run fix
- CI用: npx biome ci .

package.json scripts

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

GitHub Actions ワークフロー

name: Code Quality

on:
  push:
  pull_request:

jobs:
  quality:
    runs-on: ubuntu-latest
    permissions:
      contents: read
    steps:
      - name: Checkout
        uses: actions/checkout@v5
        with:
          persist-credentials: false

      - name: Setup Biome
        uses: biomejs/setup-biome@v2
        with:
          version: latest

      - name: Run Biome
        run: biome ci .

GitHub Actionsのアクションバージョン（biomejs/setup-biome@v2）は、GitHubリポジトリ（github.com/biomejs/setup-biome）で最新版を確認してほしい。

プリコミットフック（Lefthook使用）

# lefthook.yml
pre-commit:
  commands:
    biome:
      glob: "*.{js,ts,jsx,tsx,json}"
      run: >
        npx @biomejs/biome check
        --write
        --no-errors-on-unmatched
        --files-ignore-unknown=true
        --colors=off
        {staged_files}
      stage_fixed: true

エンジニアリングマネジメントの視点

コードレビューの構造を変える

AIコーディングツールの普及でPRの数と速度が上がった分、レビュー時間も増加している。フォーマットやLintの指摘をレビューで消費するのは、今後ますます無駄になる。BiomeをCIとプリコミットフックの両方に組み込むことで、「フォーマット指摘ゼロのPR」を標準にできる。レビューのリソースをロジック・設計の議論に集中させることが目的だ。

チーム全体の品質基準を統一する

BiomeをCLAUDE.mdに組み込む最大の価値は、Claude Codeを使うチーム全員が同じフォーマット・Lintルールのもとでコードを生成できる点にある。「誰が書いたか分からないAI生成コード」の品質ばらつきを、設定ファイル1枚で機械的に排除できる。

移行コストの現実

依存パッケージの削減（127パッケージ → 1パッケージ）と設定ファイルの集約（4ファイル → biome.jsonの1ファイル）は、移行後の保守コストを下げる。移行作業自体は数千ファイル規模でも数時間で完了するケースが報告されているが、実際のコストはプロジェクトの規模とESLintルールの複雑さによって変わる。小規模なプロジェクトで試してから展開範囲を広げる方が安全だ。

まとめ

BiomeはClaude Codeと組み合わせることで「AIが生成したコードを即座に整形する」仕組みを作れる。PostToolUseフックはその最もダイレクトな実現手段だが、pre-commitフックとCIでのbiome ciという組み合わせでも、同等の品質ゲートが機能する。

まず試すなら、npx @biomejs/biome initから始めて、package.jsonにcheckとfixのscriptsを追加し、CLAUDE.mdにBiomeの規約を書いておくといい。それだけでClaude Codeが生成するコードにBiomeルールが自動で適用される環境が整う。フォーマット指摘のないPRがチームに定着したとき、レビューで議論できることが変わる。

コメント

タイトルとURLをコピーしました