MENU
  1. ホーム
  2. 未分類
  3. 【Biome】ESLint + PrettierからBiome v2に移行する完全ガイド2026：爆速リンター・フォーマッター環境構築

【Biome】ESLint + PrettierからBiome v2に移行する完全ガイド2026：爆速リンター・フォーマッター環境構築

未分類
目次

結論

Biome（バイオーム）は、ESLint + Prettier + Import Organizer を1つに統合したRust製のWebツールチェーンです。以下のコマンドであっという間に導入できます。

# npm
npm install --save-dev @biomejs/biome

# pnpm
pnpm add -D @biomejs/biome

# yarn
yarn add -D @biomejs/biome

# bun
bun add -D @biomejs/biome

インストールしたら npx @biomejs/biome init で設定ファイルを生成し、npx @biomejs/biome check --write . でチェック＆フォーマット。たったこれだけです。

Biomeって何？——ESLint + Prettierを置き換えるRust製ツールチェーン

Biomeは一言で言えば「フロントエンド開発のためのリンター兼フォーマッター」です。もともとはPrettierのRust実装として始まったプロジェクトで、今ではESLintのルールを網羅するリンター、importの自動整列、設定ファイルまで1つにまとまっています。

なんと言ってもその速度です。Prettierと比較して35倍以上速いというベンチマーク結果もあり、大規模プロジェクトで「保存するたびにフォーマットが遅い」というストレスから解放されます。

最新のBiome v2.5（2026年6月リリース）では、73ものnurseryルールがstableに昇格し、HTML/Vue/Svelte/Astroの対応が大幅に拡充されました。さらに--watchモードやbiome upgradeコマンドも追加されて、運用面でも安定感がありますね。

インストールと初期設定

導入方法はシンプルです。お使いのパッケージマネージャでインストールするだけ。

npm install --save-dev @biomejs/biome

次にプロジェクトのルートで init コマンドを実行します。

npx @biomejs/biome init

するとこんな biome.json が生成されます。

{
  "version": 1,
  "formatter": {
    "enabled": true,
    "indentStyle": "tab"
  },
  "linter": {
    "enabled": true,
    "rules": {
      "preset": "recommended"
    }
  }
}

標準設定ですでに次の3つの機能が有効になります。

  • formatter：コードスタイルの自動整形（Prettierの代替）
  • linter：コード品質のチェック（ESLintの代替）
  • assist.organizeImports：import文の自動整列

これだけでESLintとPrettierの代わりになるのがBiomeの良いところですね。

クイック動作確認

適当なJSファイルを作って即座にフォーマットしてみましょう。

# 汚いコードを用意
echo 'const x = 1 ; const y = 2 ; ' > test.js

# フォーマット実行
npx @biomejs/biome format test.js --write

# 結果確認
cat test.js
# => const x = 1;
# => const y = 2;

2ミリ秒。脅威の速さでフォーマットが完了します。同じファイルをPrettierでやると体感できるくらいの差がありました。

ESLint + Prettierからの移行手順

既存プロジェクトでESLint + Prettierを使っている場合、便利な移行コマンドが用意されています。

ステップ1：Biomeをインストール

npm install --save-dev @biomejs/biome
npx @biomejs/biome init

ステップ2：設定をマイグレーション

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

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

migrate eslint は .eslintrc.* や eslint.config.js を読み取って、同等のルール設定を biome.json にマージします。425以上のルールに対応しているので、カスタムルールもほとんどカバーされます。

migrate prettier は .prettierrc の設定を biome.json の formatter 設定に変換します。互換性は97%らしいので、移行後にコードの見た目が大きく変わることはず。

ステップ3：既存の設定ファイルを削除

# ESLint関連のファイルを削除
rm -f .eslintrc.js .eslintrc.json .eslintrc .eslintignore

# Prettier関連のファイルを削除
rm -f .prettierrc .prettierrc.js prettier.config.js .prettierignore

ステップ4：package.jsonのスクリプトを更新

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

ステップ5：VSCode拡張を切り替え

VSCodeを使っているなら、ESLint拡張とPrettier拡張を無効化して、Biome拡張をインストールしましょう。保存時フォーマットもBiomeに一本化できます。

// .vscode/settings.json
{
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[json]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "editor.codeActionsOnSave": {
    "source.organizeImports.biome": "explicit"
  }
}

実践的な設定例

よく使うパターンの設定例をまとめておきます。

TypeScript + React プロジェクト

{
  "$schema": "https://biomejs.dev/schemas/2.5.12/schema.json",
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100
  },
  "linter": {
    "enabled": true,
    "rules": {
      "preset": "recommended",
      "correctness": {
        "noUnusedVariables": "error"
      },
      "style": {
        "noNonNullAssertion": "error"
      }
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "jsxQuoteStyle": "double"
    }
  }
}

Next.js + TypeScript でより厳格なルール

{
  "$schema": "https://biomejs.dev/schemas/2.5.12/schema.json",
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 80
  },
  "linter": {
    "enabled": true,
    "rules": {
      "preset": "recommended",
      "complexity": {
        "noUselessConstructor": "error",
        "noForEach": "warn"
      },
      "correctness": {
        "noUnusedImports": "error",
        "noUnusedVariables": "error"
      },
      "performance": {
        "noBarrelFile": "warn"
      },
      "style": {
        "noDefaultExport": "off",
        "useNodejsImportProtocol": "error"
      }
    }
  }
}

CIでの実行例

CIに組み込むなら ci コマンドが便利です。整形・リント・import順序を一括チェックして、問題があれば終了コード1を返します。

# .github/workflows/ci.yml
name: CI
on: [push, pull_request]
jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: npm ci
      - run: npx @biomejs/biome ci .

また、--watch モードを使えばファイル変更を検知して自動で再チェックしてくれます。開発中はターミナルで npx @biomejs/biome check --watch src/ を立ち上げておくと便利ですね。

Biome v2.5の注目新機能

2026年6月にリリースされたv2.5系では、以下のような改善が入っています。

  • HTMLファイルの本格対応：Vue、Svelte、Astroのテンプレートだけでなく、.html ファイルもlint/format対象に
  • 73ルールがnursery→stableに昇格：型推論系ルールやVueディレクティブのチェックなどが標準で使えるように
  • concise レポーター：診断メッセージをコンパクトに表示
  • --watch モード：ファイル変更を検知して自動再チェック
  • noUndeclaredClasses / noUnusedClasses：CSSクラスの未定義・未使用を検出
  • フォーマッターが7%高速化（v2.5.6）

特にCSSクラス名の未定義チェック（noUndeclaredClasses）は、HTMLの class="..." を解析して、実際にスタイルシートで定義されているかどうかを調べてくれます。タイポによるスタイル漏れを、保存した瞬間に発見できるのはかなり便利ですよ。

まとめ

最後に、ESLint + Prettier と Biome を比較してみましょう。

項目 ESLint + Prettier Biome
言語 JavaScript/Node.js Rust（自己完結バイナリ）
設定ファイル 2〜3ファイル 1ファイル（biome.json）
フォーマット速度 基準 約35倍高速
Lintルール数 プラグイン次第 455ルール（プラグイン不要）
Import整列 別途プラグイン 標準搭載
型推論Lint TypeScriptコンパイラ依存 独自型システム
HTML/Vue/Svelte プラグインで対応 標準対応
移行コマンド なし biome migrate

【広告】お名前.comならドメイン取得が格安。

おわりに

ESLint + Prettierが悪いわけじゃないですが、Biomeの速度と機能を見ると乗り換えたくなる人が増えてきている気がしますね。新規プロジェクトなら最初からBiomeを入れておくのが、2026年現在のオススメです。

既存プロジェクトでも移行コマンドがあるので試しやすいですよ。保存時のフォーマットが体感できるくらい速くなって、日々のストレスがだいぶ減ります。

【広告】このサイトはConoHa WINGで運営しています。安定した高速サーバーで快適にブログを書けています。いつもありがとう！！

未分類
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

コメント

コメントする

CAPTCHA


目次