脱・設定地獄！ESLint/Prettierから「Biome」へ移行する完全ガイド【2025年版】

フロントエンド開発の「設定地獄」にサヨナラ

package.json に並ぶ大量の eslint-plugin-* や prettier-plugin-*。 競合するルールを解決するための .eslintrc の複雑な設定。 そして、CIで数分かかるLintチェック...。

そんな悩みを一撃で解決するのが、Biome (旧Rome) です。 2025年現在、Biomeはフォーマッターとリンターを統合したRust製の超高速ツールチェーンとして、多くのプロジェクトで採用が進んでいます。

Biomeのメリット

1. 爆速: Rust製のため、Prettierの約35倍、ESLintの約15倍高速です。
2. 設定不要: 推奨設定が最初から組み込まれており、ほぼゼロコンフィグで動作します。
3. オールインワン: フォーマット、リント、インポートソートが1つのツールで完結します。

実践：ESLint/Prettierからの移行手順

既存のプロジェクト（Next.jsなどを想定）をBiomeに移行してみましょう。

1. インストール

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

2. 設定ファイルの生成

npx @biomejs/biome init

これで biome.json が生成されます。

3. ESLint/Prettier設定の移行（自動）

Biomeには、既存の設定ファイルから設定を読み込む移行ツールがあります。

npx @biomejs/biome migrate eslint --write
npx @biomejs/biome migrate prettier --write

これにより、.eslintrc や .prettierrc の内容に近い設定が biome.json に反映されます。

4. package.jsonのスクリプト更新

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

biome check は、フォーマット、リント、インポートソートを一度に実行するコマンドです。 --apply オプションを付けると、安全な自動修正（Safe Fixes）が適用されます。

5. VS Code拡張機能の導入

VS Codeのマーケットプレイスから「Biome」拡張機能をインストールし、デフォルトフォーマッターに設定します。

.vscode/settings.json

{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports.biome": "explicit"
  }
}

移行後の変化

圧倒的な速度

CIでのLintチェック時間が、例えば 3分から10秒 に短縮されることも珍しくありません。 ローカル開発でも、保存した瞬間にフォーマットとリントが完了するため、開発体験（DX）が劇的に向上します。

依存関係の削減

package.json から以下のパッケージを削除できます：

• eslint
• prettier
• eslint-config-*
• eslint-plugin-*
• prettier-plugin-*

これにより、node_modules のサイズが小さくなり、インストール時間も短縮されます。

注意点：ESLintにあってBiomeにないもの

Biomeは現在も進化中ですが、ESLintの膨大なプラグインエコシステム（例：eslint-plugin-react-hooks の一部のルールなど）を完全にはカバーしていません。

そのため、2025年現在の推奨される移行戦略は以下の2パターンです：

1. 完全移行: 新規プロジェクトや、標準的なルールで十分な場合。
2. ハイブリッド: フォーマットと基本リントはBiomeで行い、特定のルール（React Hooksなど）だけESLintを残す。

まとめ

Biomeへの移行は、単なるツールの置き換え以上の価値があります。 それは、「設定ファイルのメンテナンス」という非生産的な時間からの解放です。

2025年、あなたのプロジェクトもBiomeで「爆速開発環境」を手に入れませんか？