Biome の歩き方 - ESLint / Prettier から移す前に知る設定と限界

Biome の歩き方 - ESLint / Prettier から移す前に知る設定と限界

作成日:
更新日:
BiomeESLintPrettier開発ツールフロントエンド

ESLint と Prettier は長年フロントエンドの標準でしたが、「2つのツールの設定・依存・プラグインの管理」「大規模リポジトリでの遅さ」という負担も抱えていました。

Biome は、リンタとフォーマッタを1つのツールに統合し、Rust で実装して高速化したツールチェーンです。この記事では、ESLint / Prettier からの移行方法、設定、そしてまだ置き換えられない領域までを、導入判断の目線で整理します。「ネイティブ言語で JS ツールを速くする」流れは TypeScript の Go 移植とも地続きです。

Biome とは何か

Biome は、JavaScript・TypeScript・CSS・JSON・GraphQL・HTML を対象に、リント（コード品質）とフォーマット（整形）を1つで担うツールです。Rust 製で高速なのが最大の特長です。

  • 1ツールに統合: ESLint（リント）＋ Prettier（整形）を Biome 1つに
  • 高速: Rust 実装。大規模リポジトリでの体感差が大きい
  • 設定が単純: 2つのツールの設定ファイル・プラグインを別々に管理しなくてよい

ルールの多くは ESLint の相当ルールから着想・移植されていますが、命名規則が異なります（ESLint の kebab-case-rule-name に対し、Biome は camelCaseRuleName）。

移行は専用コマンドがある

ESLint / Prettier からの移行は、Biome が設定を読み取って変換するコマンドが用意されています。

Biome の導入と移行
# インストール
npm install -D @biomejs/biome
 
# 初期化
npx biome init
 
# 既存設定からの移行
npx biome migrate eslint --write
npx biome migrate prettier --write

migrate コマンドは、既存の設定を可能な範囲でインテリジェントに移植します。TypeScript ESLint・React・JSX A11y・Unicorn などのプラグインや、共有設定（shared config）の取り込みにも対応します。

NOTE

migrate コマンドは、プラグインや設定の解決に Node.js を必要とします。また、現時点では YAML や JSON5 形式の Prettier 設定には対応していない点に注意してください。

まだ置き換えられない領域（重要）

Biome は強力ですが、「ESLint/Prettier を完全に捨てられる」とは限りません。公式が挙げる、まだ置き換えきれない領域があります。

  • 型認識ルール（type-aware rules）: TypeScript コンパイラとの連携が必要なルール。Biome 独自の型推論で対応が進んでいるものの、@typescript-eslint が full type-check を要するルールを完全に代替できるとは限らない
  • フレームワーク固有プラグイン: eslint-plugin-react-hooks や eslint-plugin-next のような専門プラグイン
  • チーム独自のカスタムルール: ESLint 用に自作したルール

WARNING

「Biome に移行＝ESLint を即アンインストール」と考えると、フレームワーク固有ルール（React Hooks の依存配列チェックなど）が抜け落ちる危険があります。移行前に、自分のプロジェクトが依存しているプラグイン・カスタムルールを棚卸しし、Biome で代替できるか確認してください。

導入を判断する視点

状況判断
新規プロジェクトBiome 単独で始めるのが快適。1ツールで高速・設定が単純
ESLint/Prettier の遅さに困っている移行の効果が大きい。まず migrate で変換して試す
React Hooks / Next.js 固有ルールに強く依存Biome ＋ 必要な ESLint プラグインの併用、または当面 ESLint 継続も選択肢
大量のカスタム ESLint ルール資産がある移行コストを見積もってから。段階移行が無難

現実的な落としどころは、「フォーマットと一般的なリントは Biome、フレームワーク固有ルールだけ ESLint を残す」という併用構成です。Prettier は Biome に一本化しやすく、まず整形だけ Biome に寄せるのも有効な第一歩です。

CI での使い方

CI では、整形崩れとリント違反をまとめてチェックできます。

CI でのチェック（整形＋リントを一括）
npx biome ci .

biome ci は、フォーマットの差分・リントの違反・インポート整理を一度に検査します。ESLint と Prettier を別々に走らせていたのが1コマンドになり、CI 時間の短縮にも効きます。

まとめ

  • Biome は Rust 製で、リント＋フォーマットを1ツールに統合。JS/TS/CSS/JSON/GraphQL/HTML 対応
  • 移行は biome migrate eslint --write / biome migrate prettier --write で既存設定を変換できる
  • ただし完全代替ではない: 型認識ルール・フレームワーク固有プラグイン（React Hooks/Next 等）・独自カスタムルールは要確認
  • 現実解は併用: フォーマット＋一般リントは Biome、フレームワーク固有ルールは ESLint を残す
  • 新規プロジェクトや「遅さに困っている」ケースは導入効果が大きい
  • CI は biome ci で整形・リント・インポート整理を一括チェック

「ESLint と Prettier の2つを管理する疲れ」と「大規模リポジトリの遅さ」に効くのが Biome です。まずは Prettier の置き換えと一般的なリントから始め、フレームワーク固有ルールは無理に捨てない——この段階的な進め方が安全です。

参考リンク