Web開発におけるコード整形（フォーマット）や静的解析（リンティング）のツール選びで悩んだことはありませんか？
Biome は、JavaScriptやTypeScriptのコード整形やチェックを高速に一括で行えるツールです。本記事では、公式ドキュメントや実際に導入してみた体験をもとに、Biomeの特徴と導入手順をわかりやすく解説します。
✅ Biomeの特徴
1. 圧倒的に高速なフォーマッター & リンター
BiomeはRustで実装されており、PrettierやESLintと比較して最大35倍の速度を実現しています。
リンターの機能としては以下があります。
- コードフォーマット
- 静的解析（書き方ミスやルール違反のチェック）
- import文の整理
もし自動フォーマッターやリンターの動きが遅く感じる方にとっては、導入を検討してもいいかと思います。
2. 統一された設定ファイルによる一貫性
設定は biome.json または biome.jsonc に記述します。
コマンドラインでも同じ設定を使えるうえに、最初からおすすめの設定があらかじめ用意されているので、すぐに使い始められます。
3. 多言語対応 & LSP統合
対応言語は以下の通り：
- JavaScript / TypeScript / JSX / TSX
- JSON
- CSS
- GraphQL など
主要エディタ（VS Code, JetBrains, Zedなど）に向けたLSP（VSCodeなどのエディタで使える、リアルタイムでエラーや整形をしてくれる拡張機能）拡張も提供されており、リアルタイム診断が可能です。
🚀 導入手順
注意点として、Node.js v14.18以上が必要です。導入に関するその他詳細事項についてはこちらを参照ください。
1. インストール
yarn add --dev --exact @biomejs/biome
2. 初期設定
yarn biome init
biome.json が生成され、vcs（Git連携）、formatter、linter、import整理などの設定が自動で行われます。デフォルト設定でも使えますが、biome.jsonの設定項目についてもっと知りたいという方はこちらを参照ください。
3. 主要コマンド
biome format --write <files> # コード整形（フォーマッター）
biome lint --write <files> # リンティングと自動修正
biome check --write <files> # 上記すべてを一括実行
🧩 VS Code での連携
VSCodeプラグイン「Biome」をインストール後、settings.json に以下を設定：
{
"[typescript]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[typescriptreact]": {
"editor.defaultFormatter": "biomejs.biome"
},
"editor.codeActionsOnSave": {
"source.fixAll.biome": "explicit"
}
}
🔧 注意点（躓きポイント）
プロジェクトのディレクトリ構造に応じて、Biomeのバイナリパスを指定しないと動作しないケースがあります。
例：プロジェクト構成が frontend/, backend/ に分かれていて、frontend/ 側にBiomeがインストールされている場合：
{
"biome.lsp.bin": "./frontend/node_modules/.bin/biome"
}
これを指定しないと、以下のようなエラーが出続けることがあります：
Extension 'Biome' is configured as formatter but it cannot format 'Typescript'-files
✍️ まとめ
Biomeは、リンターとしてのパフォーマンスの高さが非常に魅力的なツールです。
本記事が、あなたの開発体験をより快適にする一助となれば幸いです。
