BiomeでESLint + Prettierから卒業した話

はじめに

Biomeは、JavaScriptエコシステム向けの高速なリンター兼フォーマッターですね。

GitHubで22,600スター以上、月間1,450万ダウンロードという数字を見ると、急速に普及しているのがわかります。個人的には、2025年の今、新規プロジェクトでESLint + Prettierを選ぶ理由がほぼなくなったと思っています。

正直なところ、最初は「ESLintとPrettierで十分じゃん」と思っていたんですよ。でも実際にBiomeに乗り換えてみたら、設定ファイルの管理が楽になって、ビルドも速くなって、「なんで早く移行しなかったんだ」という感覚でした。

ライセンスはMIT/Apache 2.0のデュアルライセンスで、安心して使えます。

Biomeとは

Biomeは「One toolchain for your web project」を掲げるツールチェーンです。もともとは「Rome」というプロジェクトだったものが、コミュニティによってフォークされて生まれました。

特筆すべきはRustで実装されていること。これ、意外と重要で、JavaScript製のツールとは比べ物にならないくらい速い。大規模コードベースでも一瞬でリント・フォーマットが終わります。

特徴・メリット

1. ESLint + Prettierを1つに統合

Biomeはリンターとフォーマッターを両方備えています。今まで別々に設定していた2つのツールが1つになる。

設定ファイルも1つ（biome.json）で済むし、.eslintrcと.prettierrcの競合に悩まされることもない。時短になるし、精神衛生上も良い。

2. Prettier互換97%

「既存のPrettierスタイルを維持したい」という心配は不要です。公式によると97%の互換性を達成しているとのこと。

既存プロジェクトへの移行でも、ほぼ同じフォーマット結果が得られます。差分が大量に出る心配はない。

3. 393ルール搭載のリンター

ESLint、typescript-eslint、その他のソースから393以上のルールを搭載しています。しかも診断メッセージが詳細で、エラーの場所と修正方法を明確に示してくれる。

30代になって思うのは、エラーメッセージがわかりやすいツールはQOLを上げるということ。

4. 圧倒的な速度

Rustで実装されているので、速度が桁違いです。

公式のベンチマークによると、Prettierの25倍以上高速とのこと。コードベースが大きくなってきた時に、この差は効いてきます。CIの時間短縮にもなる。

5. ゼロコンフィグで始められる

設定なしでも動きます。デフォルト設定が良い感じにチューニングされているので、とりあえず導入してすぐ使い始められる。

もちろん、必要に応じて細かくカスタマイズすることも可能です。

6. Node.jsを必須としない設計

これ、意外とポイントです。BiomeはWASM版も提供されていて、ブラウザ上でも動く。エディタ統合もスムーズで、LSP（Language Server Protocol）に対応しています。

インストール方法

前提条件

Node.js 14.18以上を推奨（なくても動くけど、npmでインストールする場合は必要）。

プロジェクトへのインストール

# npm
npm i -D --save-exact @biomejs/biome

# pnpm
pnpm add -D --save-exact @biomejs/biome

# yarn
yarn add -D --exact @biomejs/biome

# bun
bun add -D --exact @biomejs/biome

--save-exactをつけるのがポイント。Biomeはバージョンごとに挙動が変わることがあるので、固定しておくのが安心です。

設定ファイルの作成

npx @biomejs/biome init

これでbiome.jsonが生成されます。

基本的な使い方

フォーマット

# 指定ディレクトリをフォーマット
npx @biomejs/biome format --write ./src

# ファイル単体
npx @biomejs/biome format --write ./src/index.ts

リント

# 指定ディレクトリをリント
npx @biomejs/biome lint ./src

# 自動修正を適用
npx @biomejs/biome lint --write ./src

フォーマット + リントを同時実行

# check コマンドで両方実行
npx @biomejs/biome check --write ./src

これ一択ですね。普段はcheckコマンドだけ使えばいい。

package.jsonへの追加

{
  "scripts": {
    "lint": "biome lint ./src",
    "format": "biome format --write ./src",
    "check": "biome check --write ./src"
  }
}

biome.json の設定例

{
  "$schema": "https://biomejs.dev/schemas/1.9.0/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "suspicious": {
        "noExplicitAny": "warn"
      },
      "style": {
        "useConst": "error"
      }
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "semicolons": "always"
    }
  }
}

設定がシンプルで見通しが良いのがありがたい。ESLintの設定ファイルの複雑さを思い出すと、これだけでも移行する価値があります。

実践的なユースケース

ESLint + Prettierからの移行

既存プロジェクトからの移行は意外と簡単です。

# 1. Biomeをインストール
npm i -D --save-exact @biomejs/biome

# 2. 設定ファイル生成
npx @biomejs/biome init

# 3. 既存の設定を移行（ESLintルールの対応表は公式ドキュメント参照）
# biome.json を編集

# 4. 全ファイルをフォーマット
npx @biomejs/biome check --write ./src

# 5. 動作確認後、ESLint + Prettierを削除
npm uninstall eslint prettier eslint-config-prettier eslint-plugin-*

コスパ的に、移行作業にかかる時間は1〜2時間程度。その後のメンテナンスコストを考えると、十分ペイする投資だと思います。

VS Code連携

公式拡張機能があります。

VS Code拡張機能「Biome」をインストール
settings.jsonに追加

{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

保存時に自動フォーマット + リントが走るので、コードを書いている間は何も考えなくていい。

CI/CD統合

GitHub Actionsでの使用例：

name: CI

on: [push, pull_request]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npx @biomejs/biome ci ./src

biome ciコマンドは、CIに最適化された出力を返します。エラーがあれば非ゼロの終了コードで終わるので、PRのブロックに使えます。

対応言語

Biomeは以下の言語・形式に対応しています：

JavaScript / TypeScript
JSX / TSX
JSON
CSS（実験的）
GraphQL（実験的）

CSSとGraphQLはまだ実験的サポートですが、順次安定版になっていくと思います。

ESLint + Prettierとの比較

正直な比較をしておきます。

観点	Biome	ESLint + Prettier
速度	圧倒的に速い	普通
設定の複雑さ	シンプル	複雑になりがち
プラグインエコシステム	発展途上	豊富
ルール数	393+	数千（プラグイン含む）
導入の手軽さ	楽	設定に時間がかかる
既存プロジェクト対応	移行が必要	そのまま使える