biome

Biome 2.x

概要

JavaScript、TypeScript、JSX、JSON のリンティングとフォーマットを行う、高速なオールインワンのツールチェーンです。Biome 2.x は、Rust で書かれた単一の高性能ツールで ESLint と Prettier を置き換えます。

インストール：pnpm add -D @biomejs/biome

API リファレンス： ルールの全リファレンスと CLI フラグについては、Context7 MCP を使用してください（mcp__context7__resolve-library-id → @biomejs/biome）。

ワークフロー

初期設定：

1. Biome をインストールします：pnpm add -D @biomejs/biome
2. 設定を初期化します：pnpm biome init
3. プロジェクトの標準に合わせて biome.json を設定します
4. VS Code 拡張機能をインストールします：biomejs.biome
5. package.json に npm スクリプトを追加します
6. テストします：pnpm biome check .

ESLint／Prettier からの移行：

1. 移行ヘルパーを実行します：pnpm biome migrate eslint --write
2. 生成された biome.json を確認します
3. ESLint／Prettier の設定ファイルと依存関係を削除します
4. pre-commit フックと CI スクリプトを更新します
5. 全体をチェックします：pnpm biome check --write .

日常的な使用：

1. 保存時にフォーマットします（VS Code 連携）
2. コミット前に pnpm biome check . を実行します
3. 自動修正可能な問題を修正します：pnpm biome check --write .
4. 残った問題を手動で修正します

設定

biome.json の構造

{
  "$schema": "https://biomejs.dev/schemas/2.0.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": "always",
      "trailingCommas": "es5",
      "arrowParentheses": "asNeeded"
    }
  },
  "files": {
    "ignore": ["dist", "build", "node_modules", "*.min.js", "coverage"]
  }
}

TypeScript／React プロジェクトの設定

{
  "linter": {
    "rules": {
      "recommended": true,
      "a11y": { "noBlankTarget": "error", "useAltText": "error", "useButtonType": "error" },
      "complexity": { "noExcessiveCognitiveComplexity": "warn", "noUselessFragments": "error" },
      "correctness": { "noUnusedVariables": "error", "useExhaustiveDependencies": "warn", "useHookAtTopLevel": "error" },
      "performance": { "noAccumulatingSpread": "warn" },
      "security": { "noDangerouslySetInnerHtml": "warn" },
      "style": { "noNonNullAssertion": "warn", "useConst": "error", "useImportType": "error" },
      "suspicious": { "noExplicitAny": "error", "noDebugger": "error", "noConsoleLog": "warn" }
    }
  },
  "javascript": {
    "formatter": { "jsxQuoteStyle": "double", "quoteStyle": "single" }
  }
}

ファイルごとの上書き設定

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

CLI コマンド

# Check (lint + format) — use this for most tasks
pnpm biome check .
pnpm biome check --write .          # auto-fix
pnpm biome check --write --dry-run . # preview changes

# Lint or format only
pnpm biome lint --write .
pnpm biome format --write .

# Diagnostics
pnpm biome rage                     # effective config + diagnostics
pnpm biome explain src/App.tsx      # explain failures for a file
pnpm biome migrate eslint --write   # migrate from ESLint
pnpm biome migrate prettier --write # migrate from Prettier

Package.json スクリプト

{
  "scripts": {
    "lint": "biome lint .",
    "format": "biome format --write .",
    "check": "biome check .",
    "fix": "biome check --write .",
    "typecheck": "tsc --noEmit",
    "quality": "pnpm lint && pnpm typecheck && pnpm build"
  }
}

エディター連携

VS Code の settings.json

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

コードを無視する

// biome-ignore lint/suspicious/noExplicitAny: legacy code
function legacy(param: any) { return param; }

// biome-ignore format: preserve matrix formatting
const matrix = [
  1, 0, 0,
  0, 1, 0,
  0, 0, 1,
];

ディレクトリ全体を無視する場合は、インラインコメントよりも biome.json の files.ignore を優先してください。

Git フックとの連携

lint-staged + Husky を使用する場合：

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

Lefthook（lefthook.yml）を使用する場合：

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

CI/CD との連携

GitHub Actions

name: Code Quality
on: [push, pull_request]
jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
        with: { version: 10 }
      - uses: actions/setup-node@v4
        with: { node-version: '24', cache: 'pnpm' }
      - run: pnpm install --frozen-lockfile
      - run: pnpm biome check .
      - run: pnpm typecheck

ESLint ルールの相当ルール

ESLint ルール	Biome ルール
no-unused-vars	correctness/noUnusedVariables
@typescript-eslint/no-explicit-any	suspicious/noExplicitAny
react-hooks/exhaustive-deps	correctness/useExhaustiveDependencies
no-console	suspicious/noConsoleLog
prefer-const	style/useConst
jsx-a11y/alt-text	a11y/useAltText

ベストプラクティス

• 推奨ルールセットを 基準として使用し、その後、特定のルールをカスタマイズします
• VS Code で保存時のフォーマットを有効にし、 シームレスなワークフローを実現します
• Git フック（Husky／Lefthook）を使用して、 コミット前にチェックを実行します
• 統一されたワークフローのために、 lint と format を個別に実行するのではなく biome check を使用します
• 生成ファイルは、 インラインコメントではなく biome.json で無視します
• テストとソースコードで異なるルールを適用するには、 overrides を使用します
• チーム内で一貫性を保つために、 biome.json をバージョン管理にコミットします
• カスタムルールを使用する理由を説明するコメントを添えて、 そのルールを文書化します

アンチパターン

• lint と format を別々に実行する（代わりに check を使用してください）
• 正当な理由なく推奨ルールを無効にする
• biome-ignore を過剰に使用する（根本的な問題を修正してください）
• biome.json をバージョン管理にコミットしない
• 同じプロジェクトで ESLint と Biome を併用する
• 設定ではなくインラインコメントでファイルを無視する
• ESLint／Prettier を削除する前に移行を十分にテストしない
• 「簡単な修正」のために pre-commit フックをスキップする
• biome.json で古いスキーマバージョンを使用する

フィードバックループ

# Preview formatting changes without writing
pnpm biome format --write --dry-run .

# Diagnose config issues
pnpm biome rage

# CI test locally (exit code 0 = success)
pnpm biome check . --error-on-warnings && echo "OK"

VS Code との連携を確認します：コマンドパレット → 「Biome: Show Output Channel」→ LSP サーバーのログが表示されることを確認します。