【2026年版】Biome.js完全ガイド｜ESLint＋Prettierを一本化して開発環境を高速化

※本記事には広告（楽天アフィリエイト）リンクが含まれる場合があります。

「ESLintとPrettierの設定が複雑すぎる」「CIのlintが遅い」——多くのJavaScript/TypeScript開発者が抱えるこの悩みを、Biomeが一気に解決します。

BiomeはRust製の高速ツールチェーンで、Linter・Formatterの両方をひとつのバイナリに統合しています。ESLint＋Prettierの組み合わせと比べて最大97倍高速とされ、2026年現在、個人開発からエンタープライズまで急速に採用が広がっています。

本記事では、Biomeのインストールから実践的な使い方、既存プロジェクトへの移行方法、CI/CD連携まで、すぐに使い始められる実例を交えて徹底解説します。

Biomeとは何か？なぜ今注目されているのか

Biomeは、もともとRome Toolsとして開発が始まったオールインワンJavaScriptツールチェーンです。2023年にコミュニティにフォークされBiomeとして再出発し、2025〜2026年にかけて安定性と機能が大幅に向上。今や多くのモダンなプロジェクトでESLint＋Prettierの代替として選ばれています。

Biomeが解決する問題

従来のJavaScript開発環境では、複数ツールの組み合わせが必須でした。

• ESLint：コード品質のチェック・バグになりやすいパターンの検出
• Prettier：コードフォーマット（インデント・クォート・セミコロンなど）
• eslint-config-prettier：両者のルール競合を解消する設定
• @typescript-eslint/eslint-plugin：TypeScript対応プラグイン

これらを組み合わせると設定ファイルが5〜10個になることも珍しくありません。BiomeはこれをひとつのCLIツールとひとつの設定ファイル（biome.json）に集約します。

パフォーマンスの違い

Biomeの最大の強みはRust製による圧倒的な処理速度です。

ツール	言語	2,000ファイルのLint時間	設定の複雑さ
ESLint + Prettier	JavaScript/Node.js	〜15秒	高（複数設定ファイル）
Biome	Rust	〜0.2秒	低（biome.json 1ファイル）

CIパイプラインでのlintが秒単位で終わるのは、フィードバックループが短くなるという点で開発体験に大きく影響します。

Biomeのインストールと初期設定

Biomeはnpmパッケージとしてインストールするのが最も一般的です。

インストール

# 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公式の推奨です。Biomeの出力はバージョンによって変わることがあるため、チームで同じフォーマット結果を保つために重要です。

設定ファイルの初期化

npx @biomejs/biome init

このコマンドでbiome.jsonが生成されます。

{
  "$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
  "vcs": {
    "enabled": false,
    "clientKind": "git",
    "useIgnoreFile": false
  },
  "files": {
    "ignoreUnknown": false,
    "ignore": []
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "tab"
  },
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "double"
    }
  }
}

Formatterとしての使い方

BiomeのFormatterはPrettierと高い互換性を持ちながら、Prettierより大幅に高速です。

基本コマンド

# フォーマット結果をプレビュー（ファイルは変更しない）
npx biome format .

# ファイルに適用する
npx biome format --write .

# 特定ファイルだけ
npx biome format --write src/components/Button.tsx

主要なFormatter設定

{
  "formatter": {
    "enabled": true,
    "indentStyle": "space",      // "tab" または "space"
    "indentWidth": 2,             // インデント幅
    "lineWidth": 100,             // 1行の最大文字数
    "lineEnding": "lf"            // "lf" / "crlf" / "cr"
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",     // "single" または "double"
      "semicolons": "asNeeded",   // "always" または "asNeeded"
      "trailingCommas": "all"     // "all" / "es5" / "none"
    }
  }
}

Prettierユーザーにとってはなじみのある設定項目です。既存の.prettierrcから手動で移行するか、後述のbiome migrateコマンドで自動変換できます。

Linterとしての使い方

BiomeのLinterはESLint互換の多数のルールを搭載しており、"recommended": trueを指定するだけで実践的なルールセットが有効になります。

基本コマンド

# Lintチェック
npx biome lint .

# 自動修正可能なものは修正する
npx biome lint --write .

# Lint + Format を同時に実行（最もよく使う）
npx biome check .
npx biome check --write .

ルールカテゴリ

Biomeのルールは以下のカテゴリに分かれています：

• accessibility：アクセシビリティ（ARIA属性など）
• complexity：複雑すぎるコードパターンの検出
• correctness：バグになりやすい書き方
• nursery：試験的なルール（本番環境では慎重に）
• performance：パフォーマンス上の問題
• security：セキュリティリスク（dangerouslySetInnerHTMLなど）
• style：コードスタイルの一貫性
• suspicious：不審な・意図が不明なコード

{
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "complexity": {
        "noExcessiveCognitiveComplexity": "warn"
      },
      "style": {
        "useConst": "error",
        "noVar": "error"
      },
      "security": {
        "noDangerouslySetInnerHtml": "error"
      }
    }
  }
}

ESLint・Prettierからの移行方法

既存プロジェクトをBiomeに移行するには、biome migrateコマンドを使うのが最短ルートです。

自動移行コマンド

# ESLintの設定をBiomeに変換
npx @biomejs/biome migrate eslint --write

# Prettierの設定をBiomeに変換
npx @biomejs/biome migrate prettier --write

これらのコマンドは.eslintrc.*や.prettierrcを読み取り、対応するBiomeルールに変換してbiome.jsonに反映します。完全な1対1変換ではないため、移行後はbiome check .を実行して差分を確認することが重要です。

移行後の旧パッケージ削除

npm uninstall eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-react

使っているパッケージは環境によって異なります。package.jsonのdevDependenciesを確認して、Biomeに移行済みのものを削除してください。

package.json のscripts更新

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

CI/CDへの組み込み

Biomeの高速性は、CIパイプラインでこそ真価を発揮します。

GitHub Actions

name: CI

on:
  push:
    branches: [main]
  pull_request:

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

biome ciはCIモード専用のコマンドで、ファイルの変更は行わず、フォーマット・Lintの両方を確認します。問題があれば0以外の終了コードを返すため、GitHub ActionsのStepが失敗としてマークされます。

pre-commitフック（Lefthook）

コミット前に自動チェックをかけたい場合はLefthookと組み合わせるのが定番です。

# lefthook.yml
pre-commit:
  commands:
    biome-check:
      glob: "*.{js,ts,jsx,tsx,json}"
      run: npx biome check --write {staged_files}
      stage_fixed: true

npm install --save-dev lefthook
npx lefthook install

ステージングされたファイルだけをチェック・修正し、修正後のファイルを自動的に再ステージングします。チーム全員でコードスタイルを統一するのに効果的です。

VS Code連携

BiomeにはVS Code公式拡張があり、ファイル保存時の自動フォーマットと、エディタ上でのLintエラー表示に対応しています。

拡張機能のインストール

VS CodeのExtensionsで「Biome」（biomejs.biome）を検索してインストールします。

.vscode/settings.json の設定

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

この設定でファイル保存時に自動フォーマット＋Lint修正＋import整理が走ります。チームで共有するなら.vscode/settings.jsonをリポジトリにコミットしておきましょう。

Biomeで対応している言語・ファイル形式

Biome 2.x（2026年現在）がサポートするファイル形式は次のとおりです。

• JavaScript / JSX：Lint・Format
• TypeScript / TSX：Lint・Format
• JSON / JSONC：Format（Lint一部対応）
• CSS：Format（Lintも試験的対応）
• GraphQL：試験的対応

HTMLとMarkdownのFormatは現時点で未対応です。これらが必要なプロジェクトでは、HTMLは別途prettier、Markdownはmarkdownlintを併用するか、対応が進むのを待つことになります。

BiomeとESLintの共存戦略

「全部Biomeに移行するのは難しい」という場合、ESLintと共存させることも可能です。たとえば：

• Format：Biomeに完全移行（Prettierを削除）
• Lint：Biomeの基本ルール ＋ ESLintのプロジェクト固有ルール

この段階的移行アプローチは、既存のESLint設定が複雑なプロジェクトや、Biomeがまだ対応していないプラグイン（eslint-plugin-import-xなど）に依存している場合に有効です。

ただし、BiomeとESLintで同じルールを重複して有効にすると競合することがあります。biome.jsonのlinter.rulesで重複するルールを無効にするか、ESLint側でBiomeが担当するルールをオフにしてください。

Biomeのモノレポ対応

モノレポ（monorepo）プロジェクトでは、ルートのbiome.jsonを親設定として、各パッケージでextendsを使って上書きできます。

// packages/app/biome.json
{
  "$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
  "extends": ["../../biome.json"],
  "linter": {
    "rules": {
      "style": {
        "noDefaultExport": "off"
      }
    }
  }
}

これで共通ルールをルートで管理しつつ、パッケージごとに例外設定を持てます。

まとめ：Biomeは「今すぐ試せる」ツール

BiomeはESLint＋Prettierという長年の組み合わせを、1ツール・1設定ファイル・圧倒的な速度で置き換える実力を持っています。

移行コストが心配な方は、まず新規プロジェクトで試してみましょう。biome initからbiome check --write .まで5分もあれば動き始めます。既存プロジェクトにはbiome migrateを使った自動移行から始めるのがおすすめです。

2026年現在、フロントエンド・フルスタック問わず多くのプロジェクトがBiomeを採用しており、エコシステムの成熟も進んでいます。CIのlintが遅い・設定が煩雑と感じているなら、Biomeへの移行を検討する絶好のタイミングです。