【Biomeとは？】PrettierとESLintをひとつにまとめたツールの使い方（ビギナー向け）

Biomeの簡単な紹介

コードの整形やエラーチェックには、PrettierとESLintが広く使われています。

• Prettier
→ コードの「見た目」を整える（詳しくはこちら）

• ESLint
→ コードの「ルール違反やバグ」を指摘する（詳しくはこちら）

どちらも便利なツールですが、それぞれインストールして別々に設定する必要があり、少し手間がかかりました。

そこで近年注目を集めるのがBiome（バイオーム）です。

Biome（バイオーム）とはいわば、「Prettier + ESLint + プラスアルファ」というツールです。

Biomeで何が変わるの？

PrettierとESLintを使う場合、次のことが必要です。

• 2つの拡張機能をVS Codeに入れる
• 2つのパッケージをプロジェクトにインストールする
• settings.json、.prettierrc、eslint.config.jsなど複数のファイルで設定する

Biomeを使うと次のようになります。

• 1つの拡張機能をVS Codeに入れる
• 1つのパッケージをプロジェクトにインストールする
• biome.jsonという1つのファイルで設定する

設定の手間が大幅に減るのです。

Biomeはなぜ速いの？

Biomeには「速い」という特徴もあります。

JavaScriptで書かれたPrettierやESLintと比べ、Rustで書かれたBiomeは実行スピードが高速です。

大きなプロジェクトになるほど、この差が体感しやすくなります。

Biomeの使い方

下記URLを開き、VS Codeにインストールします。

Biomeリンク

次にパッケージをインストールします

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

インストール後、次のコマンドで設定ファイルを自動生成できます。

npx @biomejs/biome init

ルートにbiome.jsonが作られ、デフォルトで中身は次のようになっています（記事執筆時点）。

// biome.json

{
  "$schema": "https://biomejs.dev/schemas/latest/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2
  }
}

• "linter" → ESLintに相当する設定
• "formatter" → Prettierに相当する設定
• "organizeImports" → importの順番を自動で整理する機能

"recommended": true にしておけば、一般的なルールが自動で有効になります。

最初はこのままで十分です。

なお、Biomeをデフォルトのコード整形ツールとして設定するには、.vscode/settings.jsonに次のように書きましょう。

{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true
}

Prettierの記事で書いた設定と構造は同じです。

"editor.defaultFormatter"を"biomejs.biome"に変えるだけです。

PrettierやESLintから移行する場合

すでにPrettierやESLintを使っているプロジェクトにBiomeを導入する場合、次のコマンドで設定を自動変換できます。

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

既存の設定を読み取って、biome.json上に書き換えてくれます。

完全に移行できないルールもあるので、移行後はよく確認をするようにしましょう。

よくある質問（Q & A）

Q1. BiomeはPrettierやESLintの代替になる？

ほとんどのケースでは代替になります。

ただし、ESLintはエコシステムが非常に充実しています。

特定のフレームワークや用途に特化したルールが必要な場合、ESLintの方が適切なこともあるでしょう。

「複雑なロジックチェックはESLint、基本的な整形と高速化はBiome」と分けているケースもあります。

しかし個人開発やビギナーの学習用途であれば、Biome1つで十分対応できます。

Q2. Biomeはどんなファイルに対応している？

Biomeは、フロントエンド開発でよく使われる多くのファイル形式に対応しています。

たとえば次のようなファイルに使えます。

• JavaScript（.js）
• TypeScript（.ts）
• JSX／TSX
• JSON
• CSS
• HTML
• Markdown

ReactやTypeScriptを使う開発であれば、ほとんどのファイルをカバーできると考えて大丈夫です。

Q3. Biomeは小さなプロジェクトでも使う意味がある？

あります。

Biomeは設定がシンプルなので、小さなプロジェクトでもすぐに使い始められます。

特にこれからPrettierやESLintを初めて導入する場合は、最初からBiomeを選ぶことで設定の手間を減らせます。

Q4. Biomeは将来的に主流になる？

Biomeは近年急速に注目を集めているツールですが、現在はまだ発展途中の部分もあります。

特にESLintは長年使われてきた実績があり、豊富なプラグインが存在します。

そのためすぐに完全に置き換わることはないですが、Biomeは設定がシンプルで機能がまとまっているため、新しいプロジェクトでは採用される機会が増えています。

これから覚えておく価値の高いツールの1つと言えるでしょう。

Biomeという新しいツールを学んだこの機会に、現在のフロントエンドの学習ステップも確認してみましょう。

React → TypeScript → Next.jsの順番でスキルを積み上げるためのロードマップを無料で配布しています。

自分の現在地と次のステップを確認してみてください▼

⚫︎ monotein.com/present