【Biome】ESLint + Prettier から Biome v2 への移行ガイド2026

ESLintとPrettierからBiome v2への移行手順をまとめます。Biome 2.5.13で問題を仕込んだファイルを実際にlintし、migrateコマンドやVSCode設定の切り替えまで確認しました。

この記事が解決する悩み

• ESLintとPrettierの設定ファイルが増えて、管理しきれなくなってきた
• 移行したら何が動かなくなるのか、先に知っておきたい

対象読者: フロントエンドのlint・format設定を運用している人
前提知識: ESLintの設定を自分で書いた経験があること

結論

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;

脅威の速さでフォーマットが完了します。

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="..." を解析して、実際にスタイルシートで定義されているかどうかを調べてくれます。タイポによるスタイル漏れを、保存した瞬間に発見できるのはかなり便利ですよ。

Vue プロジェクトで Biome を使うときの注意点

VueのSFCはBiome v2.3から対応していますが、実験的な扱いで、フル対応は自分でオンにしないと有効になりません。何も設定せずに .vue を渡すとscriptブロックが部分的に処理されるだけです。

Vue を本格対応させる設定

html.experimentalFullSupportEnabled をtrueにすると、template・script・styleをまとめてlintとformatの対象にできます。HTMLのformatterも明示的に有効化しておきましょう。

{
  "$schema": "https://biomejs.dev/schemas/2.5.12/schema.json",
  "html": {
    "experimentalFullSupportEnabled": true,
    "formatter": {
      "enabled": true
    }
  }
}

Vue 専用ルールは「ドメイン」で有効化する

v2系ではフレームワーク別のルールがドメインとしてまとまっています。vue が3.0.0以上で依存に入っていれば、推奨ルールは自動で有効になります。

{
  "linter": {
    "domains": {
      "vue": "recommended"
    }
  }
}

代表的なのは noVueReservedKeys、noVueSetupPropsReactivityLoss、useVueConsistentDefinePropsDeclaration、useScopedStyles（nursery）あたりです。リアクティビティを落とす書き方を保存時に指摘してくれるのがありがたいところですね。

Vue ファイルで誤検知が出るときの回避策

フル対応をオンにしていない状態で .vue をlintすると、埋め込み部分の解析が不完全で誤検知が出ます。公式は該当ルールをoffにする回避策を案内しています。

{
  "overrides": [
    {
      "includes": ["**/*.vue", "**/*.svelte", "**/*.astro"],
      "linter": {
        "rules": {
          "style": {
            "useConst": "off",
            "useImportType": "off"
          },
          "correctness": {
            "noUnusedVariables": "off",
            "noUnusedImports": "off"
          }
        }
      }
    }
  ]
}

できればoverridesで逃げるより、フル対応をオンにしてtemplateごとlintしたほうが得ですよ。埋め込み言語をまたぐルールはv2.5.0で精度が上がっています。

ESLint + Prettier と Biome の比較：どちらを選ぶか

まとめの比較表は機能の一覧です。ここでは「どの状況でどちらを選ぶか」の判断基準をまとめておきます。

移行でいちばん気をつけるのは「ESLintと完全には同じにならない」ことです。公式も、ルールオプションの未実装や実装差のせいで同じ挙動にはならないと明記しています。

またESLintはVCSのignoreファイルを尊重するので、Biome側もVCS連携を有効にしておくと差分が出にくくなります。

{
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  }
}

移行コマンドは --write を付けて実行するのが基本です。いきなり全部置き換えず、まず1ブランチで差分を見るのがおすすめですよ。

まとめ

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

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

おわりに

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

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

検証環境

上記の環境で実際に実行して確認した結果です。環境が異なる場合は挙動が変わることがあります。

参考

本文の記述は以下の一次情報を確認して書いています。

• Biome 公式サイト（トップ / ドキュメント入口）
• Biome v2.5 リリース告知（公式ブログ）
• ESLint + Prettier からの移行ガイド（公式）
• GitHub – biomejs/biome（公式リポジトリ）

あわせて読みたい

• 【pnpm】ERR_PNPM_IGNORED_BUILDS の直し方 — allowBuilds へ移行
• 【Node.js】ERR_UNSUPPORTED_TYPESCRIPT_SYNTAX の直し方
• 【Node.js】Node 26 完全ガイド2026 — Temporal API と Iterator.concat
• 【Vite】Vite 8 移行ガイド2026 — Rolldown 統合で壊れる設定

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