【ばいおーむふぉーまったー】

Biome(フォーマッター) とは?

最終更新:
💡 コードの整形と検査をまとめて扱う開発ツール

JavaScriptやTypeScriptなどのコードを整形し、問題を検査する開発ツール。フォーマッター、リンター、インポート整理などを提供する。既存ツールからの移行では、対応する言語・ルール・整形結果を確認する。

📌 このページのポイント
Biome:整形と検査をまとめて扱う コード Biome 共通の設定 整形 改行・空白 検査 ルールで確認 整理 インポート 移行時は対応機能と差分を確認
整形・検査・インポート整理の役割を示す。ESLintやPrettierの全機能・結果と同じになる保証ではない。
ひよこ ひよこ
整形と検査は同じこと?
ペンギン先生 ペンギン先生
役割が違うよ。整形は空白や改行などをそろえること。検査はルールに沿って問題を見つけることだね。Biomeは両方を扱い、インポートの整理などもできるけれど、すべてのバグを見つける保証ではないんだ。
ひよこ ひよこ
ESLintとPrettierをそのまま置き換えられる?
ペンギン先生 ペンギン先生
必要な機能を確認しよう。Biomeの整形はPrettierに近い考え方だけど、結果に違いがある。ESLintのルールやプラグインがすべて対応するわけでもないよ。「ほぼAPI互換」と考えて無条件に置き換えるのは避けよう。
ひよこ ひよこ
設定を移す方法はある?
ペンギン先生 ペンギン先生
公式には「biome migrate eslint --write」と「biome migrate prettier --write」があるよ。設定を移す補助で、移行後の動作まで同じになる保証ではない。生成された設定とコードの差分を確認してから使おう。
ひよこ ひよこ
何倍も速くなるの?
ペンギン先生 ペンギン先生
公式の速度比較には条件があるよ。整形の比較結果を、ESLintの検査も含めた全作業の倍率として使うことはできない。自分のプロジェクトで同じ対象・同じ作業を比べて確認するのが大切だね。
ひよこ ひよこ
CIではどう使う?
ペンギン先生 ペンギン先生
公式は「biome ci .」を案内しているよ。CIではファイルを書き換えず、整形や検査などの結果を確認する。手元での「biome check --write」とは目的が違うので、実行する場所に合わせて選ぼう。
ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「Biome(フォーマッター)」って出てきたら「コードの整形と検査をまとめて扱う開発ツール」と思えばだいたいOK!
📖 おまけ:英語の意味
「Biome」 = 開発ツールの名前
💬 ここではコードの整形や検査を扱うツールの名前だよ。フォーマッターだけでなく、リンターやインポート整理も提供するんだ。

参考資料

← 用語集にもどる