3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@masukane9473in株式会社ナハト

ESLint + Prettierの設定、まだ頑張ってますか？ ── 「Biome」なら1つで全部できます

3
Posted at

はじめに

新しいプロジェクトを立ち上げるたびに、こんな作業をしていませんか。

  1. ESLintをインストール
  2. Prettierをインストール
  3. eslint-config-prettier を入れて競合を解消
  4. .eslintrc.json を書く
  5. .prettierrc を書く
  6. .eslintignore を書く
  7. .prettierignore を書く
  8. VSCodeの設定で formatOnSave と editor.defaultFormatter を調整
  9. チームメンバーから「動かないんですけど」と言われて対応

設定ファイルだけで4〜5個。依存パッケージは数十個。

もう、やめませんか。

Biome（バイオーム） を使えば、リンターとフォーマッターが 1つのツール・1つの設定ファイル・ゼロ依存 で完結します。しかもRust製で、ESLint + Prettierの 数十倍高速 です。

Biomeとは

Biomeは、JavaScript / TypeScript / CSS / GraphQL / JSON などのWeb開発向け言語に対応した オールインワンのリンター＆フォーマッター です。

2023年8月にv1.0がリリースされ、2025年6月に v2.0（コードネーム: Biotype）がリリースされました。Rustで書かれており、単一バイナリとして動作します。

【ESLint + Prettierの世界】
ESLint（リンター）
  + eslint-config-prettier（競合解消）
  + @typescript-eslint/parser
  + @typescript-eslint/eslint-plugin
  + eslint-plugin-import
  + eslint-plugin-react-hooks
  + ...
Prettier（フォーマッター）
合計: 依存パッケージ 100個以上

【Biomeの世界】
Biome（リンター＋フォーマッター）
合計: 依存パッケージ 0個

速度：10,000ファイルで比べてみる

「速い」と言われても実感がわかないかもしれないので、10,000ファイルの処理速度を見てみましょう。

処理 ESLint / Prettier Biome 差
10,000ファイルのリント 約45秒 約0.8秒 約56倍
10,000ファイルのフォーマット 約12秒 約0.3秒 約40倍

CI/CDパイプラインでESLint + Prettierに毎回1分近くかかっていた処理が、Biomeなら 1秒ちょっとで終わる わけです。

このパフォーマンスの理由は明確で、Biomeが Rust で書かれているからです。JavaScriptで書かれたESLintやPrettierとは、実行効率が根本的に違います。

セットアップ：30秒で始められる

# インストール（1パッケージだけ）
npm install --save-dev --save-exact @biomejs/biome

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

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

{
  "$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
  "formatter": {
    "enabled": true,
    "indentStyle": "tab",
    "lineWidth": 80
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  }
}

設定ファイルは biome.json の1つだけ です。.eslintrc.json、.prettierrc、.eslintignore、.prettierignore ── すべて不要です。

# フォーマット
npx @biomejs/biome format --write ./src

# リント
npx @biomejs/biome lint ./src

# フォーマット＋リントを同時実行
npx @biomejs/biome check --write ./src

biome check --write の1コマンドで、フォーマットとリントの自動修正がまとめて実行されます。

ESLint + Prettierからの移行コマンド

既存プロジェクトからの移行も、公式ツールでサポートされています。

# ESLintの設定をBiomeに変換
npx @biomejs/biome migrate eslint

# Prettierの設定をBiomeに変換
npx @biomejs/biome migrate prettier

このコマンドは、既存の .eslintrc.* や .prettierrc を読み取り、対応するBiomeのルールに変換して biome.json に書き出します。

Biome 2.0の注目機能

2025年6月にリリースされた Biome 2.0 で、大きな機能が追加されました。

型情報を利用したリント（Type-Aware Linting）

Biome v2の最大の目玉は 型情報を利用したリントルール です。TypeScriptコンパイラに依存せず、Biome独自の型推論エンジンで型情報を取得します。

たとえば、noFloatingPromises ルール。Promiseの await 忘れを検出します。

// ❌ Biome 2.0 が警告する
async function fetchData() {
  fetch('/api/data')  // awaitを忘れている！
}

// ✅ 正しい書き方
async function fetchData() {
  await fetch('/api/data')
}

ESLintで型情報を使うルール（@typescript-eslint の strict 設定など）を使うには、TypeScriptの Language Service を起動する必要があり、リント速度が大幅に低下していました。Biomeなら型情報ルールを使っても高速なままです。

CSSとGraphQLのサポート

Biome 2.0では CSS と GraphQL のフォーマット・リントが正式にサポートされました。StylelintやGraphQL用のESLintプラグインも不要になります。

プラグインシステム

GritQL というクエリ言語を使って、カスタムリントルールを書けるようになりました。自分のチーム固有のコーディングルールを、プラグインとして定義できます。

マルチファイル解析（実験的）

v2では他のファイルの情報を参照できる マルチファイル解析 の基盤が導入されました。将来的には「未使用のexportを検出する」といったファイル横断のリントが可能になる見込みで、現在もRFCが進行中です。

ESLint + Prettierが勝るケース

公平に書きます。Biomeでは まだカバーできないケース があります。

フレームワーク固有のプラグイン

eslint-plugin-react-hooks（Reactのフックルール）、eslint-plugin-next（Next.js固有のルール）など、特定フレームワークに特化したプラグインは、Biomeにはまだ完全な互換がありません。

ただし、Biomeは独自に useExhaustiveDependencies（React Hooksの依存配列チェック）などのルールを実装しており、カバレッジは徐々に拡大しています。

カスタムルールの資産

チームで独自のESLintルールを大量に書いている場合、それらをBiomeに移植するコストが発生します。Biome 2.0のGritQLプラグインで書き直すことは可能ですが、学習コストを考慮する必要があります。

エコシステムの成熟度

ESLintは2013年から10年以上の歴史があり、あらゆるケースに対応するプラグインとStack Overflowの回答が蓄積されています。Biomeはまだ若く、ニッチな問題の解決策が見つかりにくいことがあります。

VSCode連携

BiomeはVSCode拡張機能を提供しており、保存時の自動フォーマット・リントに対応しています。

// .vscode/settings.json
{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  }
}

ESLint拡張 + Prettier拡張 + それぞれの設定が、Biome拡張1つ に統合されます。「フォーマッターが2つ動いて競合する」という問題も発生しません。

導入判断ガイド

あなたのプロジェクト 推奨 理由
新規プロジェクト Biome セットアップ30秒。設定ファイル1つ
CI/CDが遅い Biome検討 リント・フォーマットが数十倍速くなる
フレームワーク固有プラグインが多い ESLint + Prettier継続 Biomeのカバレッジを確認してから判断
モノレポ（大量ファイル） Biome 大規模コードベースで速度差が顕著
カスタムESLintルールが大量 ESLint + Prettier継続 移植コストが高い
Prettierのフォーマットで困っていない 急いで移行する必要なし Biomeはオプション。強制ではない

まとめ

項目 ESLint + Prettier Biome
ツール数 2つ（+ 競合解消プラグイン） 1つ
設定ファイル 4〜5個 1個（biome.json）
依存パッケージ 100個以上 0個（単一バイナリ）
10,000ファイルのリント 約45秒 約0.8秒
10,000ファイルのフォーマット 約12秒 約0.3秒
CSS / GraphQL対応 別途ツールが必要 標準搭載（v2.0〜）
型情報リント TypeScript Language Service依存（遅い） 独自エンジン（速い）
プラグイン 非常に豊富 GritQLで拡張可能（発展途上）

Biomeは「ESLint + Prettierを置き換えるもの」というより、「リンターとフォーマッターの体験を根本的に変えるもの」 です。

設定に時間を使うのではなく、コードを書くことに時間を使いたい。Biomeはその願いを叶えてくれるツールです。まずは個人プロジェクトやサイドプロジェクトで試してみてください。30秒でセットアップが終わるので、「合わなかったらやめる」のコストもほぼゼロです。

参考：

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?