Biome 2.0登場 - ESLint/Prettierを置き換える超高速ツールチェーン

Biomeは、Rust製の超高速なJavaScript/TypeScriptツールチェーンです。ESLintとPrettierの機能を1つのツールに統合し、圧倒的な速度で開発体験を向上させます。2025年、Biome 2.0のリリースにより、さらに多くのプロジェクトでの採用が進んでいます。

Biomeとは

ツールチェーンの比較

flowchart TB
    subgraph Traditional["従来の構成"]
        Workflow1["開発ワークフロー"]
        ESLint["ESLint<br/>(JavaScript)"]
        Prettier["Prettier<br/>(JavaScript)"]
        TSC["TypeScript<br/>tsc"]
        Config1["設定ファイルが複数必要<br/>(.eslintrc, .prettierrc, tsconfig.json)"]

        Workflow1 --> ESLint
        Workflow1 --> Prettier
        Workflow1 --> TSC
        ESLint --> Config1
        Prettier --> Config1
        TSC --> Config1
    end

flowchart TB
    subgraph BiomeArch["Biomeの構成"]
        Workflow2["開発ワークフロー"]
        Biome["Biome (Rust)<br/>✓ Linter<br/>✓ Formatter<br/>✓ Import Sort"]
        Config2["biome.json 1ファイルで管理"]

        Workflow2 --> Biome --> Config2
    end

パフォーマンス比較

約60倍高速、メモリ1/10

インストールとセットアップ

基本インストール

# 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 @biomejs/biome init

基本的な設定ファイル

// biome.json
{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "trailingCommas": "all",
      "semicolons": "always"
    }
  }
}

package.jsonのスクリプト設定

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

詳細な設定

完全な設定例

{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "files": {
    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"],
    "ignore": [
      "node_modules",
      "dist",
      "build",
      ".next",
      "coverage",
      "*.min.js"
    ]
  },
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  },
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "complexity": {
        "noExcessiveCognitiveComplexity": {
          "level": "warn",
          "options": {
            "maxAllowedComplexity": 15
          }
        },
        "noForEach": "warn"
      },
      "correctness": {
        "noUnusedVariables": "error",
        "noUnusedImports": "error",
        "useExhaustiveDependencies": "warn"
      },
      "performance": {
        "noAccumulatingSpread": "warn",
        "noDelete": "warn"
      },
      "security": {
        "noDangerouslySetInnerHtml": "error"
      },
      "style": {
        "noNonNullAssertion": "warn",
        "useConst": "error",
        "useTemplate": "error",
        "noParameterAssign": "error"
      },
      "suspicious": {
        "noExplicitAny": "warn",
        "noConsoleLog": "warn",
        "noDebugger": "error"
      },
      "nursery": {
        "useSortedClasses": {
          "level": "warn",
          "options": {
            "attributes": ["className", "class"],
            "functions": ["clsx", "cn", "cva"]
          }
        }
      }
    }
  },
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineEnding": "lf",
    "lineWidth": 100,
    "attributePosition": "auto"
  },
  "javascript": {
    "formatter": {
      "enabled": true,
      "quoteStyle": "single",
      "jsxQuoteStyle": "double",
      "quoteProperties": "asNeeded",
      "trailingCommas": "all",
      "semicolons": "always",
      "arrowParentheses": "always",
      "bracketSpacing": true,
      "bracketSameLine": false
    },
    "parser": {
      "unsafeParameterDecoratorsEnabled": true
    }
  },
  "json": {
    "formatter": {
      "enabled": true,
      "indentStyle": "space",
      "indentWidth": 2,
      "lineWidth": 100
    }
  },
  "css": {
    "formatter": {
      "enabled": true,
      "indentStyle": "space",
      "indentWidth": 2,
      "lineWidth": 100,
      "quoteStyle": "double"
    },
    "linter": {
      "enabled": true
    }
  },
  "overrides": [
    {
      "include": ["*.test.ts", "*.test.tsx", "*.spec.ts"],
      "linter": {
        "rules": {
          "suspicious": {
            "noExplicitAny": "off"
          }
        }
      }
    },
    {
      "include": ["*.config.js", "*.config.ts"],
      "linter": {
        "rules": {
          "style": {
            "noDefaultExport": "off"
          }
        }
      }
    }
  ]
}

Linterルールのカテゴリ

ルールカテゴリ一覧

ルールの詳細設定例

{
  "linter": {
    "rules": {
      "correctness": {
        "useExhaustiveDependencies": {
          "level": "warn",
          "options": {
            "hooks": [
              {
                "name": "useQuery",
                "stableResult": [1]
              },
              {
                "name": "useMutation",
                "stableResult": [1]
              },
              {
                "name": "useCustomHook",
                "closureIndex": 0,
                "dependenciesIndex": 1
              }
            ]
          }
        }
      }
    }
  }
}

ESLint/Prettierからの移行

移行チェックリスト

# 1. Biomeのインストール
npm install --save-dev @biomejs/biome

# 2. 設定ファイルの初期化
npx @biomejs/biome init

# 3. ESLint設定からの移行（自動）
npx @biomejs/biome migrate eslint --write

# 4. Prettier設定からの移行（自動）
npx @biomejs/biome migrate prettier --write

ESLintルールの対応表

段階的な移行戦略

// biome.json - 段階的移行用設定
{
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      // 最初は警告のみ
      "correctness": {
        "noUnusedVariables": "warn",
        "noUnusedImports": "warn"
      },
      "suspicious": {
        "noExplicitAny": "warn",
        "noConsoleLog": "off"  // 最初は無効化
      }
    }
  }
}

# 移行後にESLint/Prettierを削除
npm uninstall eslint prettier eslint-config-prettier eslint-plugin-*

# 設定ファイルの削除
rm .eslintrc* .prettierrc* .eslintignore .prettierignore

エディタ統合

VS Code

// .vscode/extensions.json
{
  "recommendations": ["biomejs.biome"]
}

// .vscode/settings.json
{
  // Biomeをデフォルトフォーマッターに
  "editor.defaultFormatter": "biomejs.biome",
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[json]": {
    "editor.defaultFormatter": "biomejs.biome"
  },

  // 保存時に自動フォーマット
  "editor.formatOnSave": true,

  // 保存時にコードアクション実行
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  },

  // ESLint/Prettierを無効化
  "eslint.enable": false,
  "prettier.enable": false
}

Neovim (nvim-lspconfig)

-- init.lua
require('lspconfig').biome.setup({
  cmd = { 'npx', 'biome', 'lsp-proxy' },
  root_dir = require('lspconfig.util').root_pattern('biome.json', 'biome.jsonc'),
  single_file_support = false,
})

-- null-ls.nvimとの統合
local null_ls = require('null-ls')
null_ls.setup({
  sources = {
    null_ls.builtins.formatting.biome,
    null_ls.builtins.diagnostics.biome,
  },
})

JetBrains IDE (WebStorm等)

設定手順:
1. Settings → Languages & Frameworks → JavaScript → Code Quality Tools → Biome
2. "Enable" にチェック
3. Biome package: node_modules/@biomejs/biome
4. Configuration file: biome.json

フォーマット設定:
1. Settings → Editor → Code Style
2. "Enable EditorConfig support" をオフ
3. Settings → Tools → Actions on Save
4. "Reformat code" と "Run Biome" にチェック

CI/CD統合

GitHub Actions

# .github/workflows/ci.yml
name: CI

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

jobs:
  lint:
    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 .

  # PRにインライン注釈を追加
  lint-review:
    runs-on: ubuntu-latest
    if: github.event_name == 'pull_request'
    permissions:
      contents: read
      pull-requests: write
    steps:
      - uses: actions/checkout@v4

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

      - name: Run Biome with reviewdog
        uses: reviewdog/action-biome@v1
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          reporter: github-pr-review

GitLab CI

# .gitlab-ci.yml
stages:
  - lint

biome:
  stage: lint
  image: node:20-alpine
  cache:
    key: ${CI_COMMIT_REF_SLUG}
    paths:
      - node_modules/
  script:
    - npm ci
    - npx @biomejs/biome ci .
  rules:
    - if: $CI_PIPELINE_SOURCE == "merge_request_event"
    - if: $CI_COMMIT_BRANCH == "main"

pre-commitフック (Husky + lint-staged)

# Huskyのインストール
npm install --save-dev husky lint-staged
npx husky init

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

# .husky/pre-commit
npx lint-staged

高度な使用方法

プラグインAPI（実験的機能）

// biome-plugin.js - カスタムルールの例
export default {
  name: 'my-custom-rules',
  rules: {
    noTodoComments: {
      meta: {
        docs: {
          description: 'Disallow TODO comments in production code',
        },
      },
      create(context) {
        return {
          Comment(node) {
            if (node.value.includes('TODO')) {
              context.report({
                node,
                message: 'TODO comments should be resolved before merge',
              });
            }
          },
        };
      },
    },
  },
};

Monorepo設定

// ルートのbiome.json
{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "extends": [],
  "files": {
    "ignore": ["packages/*/dist", "packages/*/node_modules"]
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "formatter": {
    "enabled": true
  }
}

// packages/web/biome.json - パッケージ固有の設定
{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "extends": ["../../biome.json"],
  "linter": {
    "rules": {
      "correctness": {
        "useExhaustiveDependencies": "warn"
      }
    }
  }
}

カスタムインポートソート

{
  "javascript": {
    "organizeImports": {
      "groups": [
        ["react", "react-dom"],
        ["^@?\\w"],
        ["^@/"],
        ["^\\.\\."],
        ["^\\."]
      ]
    }
  }
}

トラブルシューティング

よくある問題と解決策

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

# 詳細なエラー出力
npx @biomejs/biome check --verbose .

# 特定のファイルのデバッグ
npx @biomejs/biome lint --verbose src/problematic-file.ts

# 設定の検証
npx @biomejs/biome check --config-path biome.json --verbose

エラー抑制コメント

// ファイル全体で特定のルールを無効化
// biome-ignore-all lint/suspicious/noExplicitAny: Legacy code

// 次の行のみ無効化
// biome-ignore lint/suspicious/noExplicitAny: Necessary for this API
const data: any = response.data;

// 複数ルールの無効化
// biome-ignore lint/style/useConst lint/correctness/noUnusedVariables: Intentional
let unusedVar = 'test';

// フォーマットの無効化
// biome-ignore format: Keep this formatting
const matrix = [
  [1, 0, 0],
  [0, 1, 0],
  [0, 0, 1],
];

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

大規模プロジェクトでの比較（10,000ファイル）:

まとめ

Biomeは、フロントエンド開発のツールチェーンを大きく改善します。

Biome導入のメリット

導入推奨ケース

• 新規プロジェクト
• CIの高速化が必要なプロジェクト
• 設定の簡素化を求めるチーム
• Monorepo環境

Biomeは、JavaScriptエコシステムの新しいスタンダードとなりつつあります。

参考リンク

• Biome公式ドキュメント
• Biome GitHub
• Biome VS Code拡張
• Migration Guide