爆速リンター・フォーマッター「Biome」を使ってみて！

はじめに

Biome 使ってますか？

もしあなたが今から新しいプロジェクトを立ち上げようとしているなら、悪いことは言わないので、とりあえず npm create~~ した直後に Biome を入れてください。

2024年の登場から進化を続け、2025年6月には待望の v2 (コードネーム: Biotype) がリリースされました。今のフロントエンド開発において、これほど強力で快適なツールはありません。

この記事では、なぜそこまで Biome を推すのか、ESLint/Prettier と何が違うのか、そして大幅に改善されたフレームワーク対応状況についてもお話しします。

Biome とは？

Biomeは、Web 開発のためのツールチェーンです。もともと Rome という名前で開発されていましたが、いろいろあって Biome として生まれ変わりました。

最大の特徴は Rust で書かれている という点。そして、Linter と Formatter が一体化している という点です。

1. 圧倒的な爆速体験

Rust 製であることの最大の恩恵は、その 速度 です。

ESLint や Prettier も素晴らしいツールですが、プロジェクトが大きくなってくると、保存するたびに一瞬待たされたり、CI での Lint チェックに時間がかかったりした経験はありませんか？

Biome は、それらと比較して 桁違いに速い です。公式のベンチマークでも、Prettier の 25 倍以上の速度が出ているとか…。実際に使ってみると、「保存した瞬間にもう整形が終わっている」という感覚で、体感速度が全く違います。

2. 設定がこれ一つで完結する

これまでのフロントエンド開発では、

• コードの品質チェックには ESLint
• コードの整形には Prettier

この2つを組み合わせて使うのが定石でした。しかし、これらを共存させるためには eslint-config-prettier を入れたり、設定ファイルを行ったり来たりと、環境構築が地味に面倒でしたよね。

Biome なら、これ一つで Linter も Formatter も兼ねています。

設定ファイルも biome.json ひとつだけ。依存関係もスッキリして、node_modules も軽くなります。

3. 進化した「型認識」Lint (Type-aware linting)

Biome v2 の目玉機能として、Type-aware linting（型認識リント） がついに搭載されました。

これまで、高度な型チェックを行うには TypeScript コンパイラに依存した ESLint 設定が必要で、これが動作を重くする一因でした。しかし、Biome v2 は TypeScript コンパイラに依存せずに型チェックを行う という離れ業をやってのけました。

これにより、爆速なまま「この変数は undefined になる可能性があるよ」といった高度な指摘をしてくれるようになりました。これも biome.json の設定ひとつで有効化できます。

導入方法

導入も相変わらず超簡単です。

# インストール
npm install --save-dev --save-exact @biomejs/biome

# 初期化
npx @biomejs/biome init

もし既存のプロジェクトでアップデートする場合は、便利なマイグレーションコマンドも用意されています。

# 設定ファイルの自動更新
npx @biomejs/biome migrate --write

これだけです。VS Code 利用者は公式拡張機能（v3 以降でマルチワークスペース対応なども強化されています）を入れておけば、もう快適生活の始まりです。

課題だった「フレームワーク対応」の今

以前までは Vue, Svelte, Astro などの対応が不完全だったのですが、状況は大きく変わりました。

2025年10月にリリースされた v2.3.0 以降、Svelte, Vue, Astro ファイルへの「完全なサポート（Full Support）」が実験的に追加されています。

以前はスクリプトタグの中しか見れなかったりしましたが、現在は HTML/Template 部分や CSS 部分も含めて、ファイル全体をフォーマット・リントできるようになっています。

• React (JSX/TSX): 完璧です。迷わず使いましょう。
• Svelte / Vue / Astro: 実用レベルにはなったかもしれませんが、大規模プロジェクトではまだ様子見が必要かもしれません。

私のこのブログ（SvelteKit製）でも一部導入を試みましたが、やはりまだ不安定な部分もあり、<script>タグ内で変数を使用しないと未使用として検出などが目立っていました。 しかし、それを除いた<script>や<style>内でのリンター、フォーマッターとしての体験はピカイチでした！

まとめ

• Biome v2 (Biotype) で型認識リントも爆速に
• Linter と Formatter がこれ一本
• Svelte / Vue / Astro 対応も劇的進化（実験的サポート）

とにかく、速さは正義 です。まだ触ったことがない方は、ぜひ一度この爆速体験を味わってみてください。一度味わうと、もう戻れませんよ！