😽

ESLint + Prettier から Biome への移行（Powered by Rust）

に公開
JavaScript
TypeScript
ESLint
Prettier
Biome
tech

はじめに

フロントエンド開発において、コードの品質管理は ESLint と Prettier の組み合わせが長らく標準的なソリューションでした。しかし、近年注目を集めているのが Biome です。Rust で書かれたこのツールチェーンは、リンターとフォーマッターを統合し、従来のツールを大幅に上回る性能を実現しています。

本記事では、実際に ESLint + Prettier から Biome への移行を行った経験をもとに、移行の動機、Rustによる性能向上、実際のセットアップ方法について解説します。

Biome とは

Biome は JavaScript、TypeScript、JSX、JSON、CSS、GraphQL をサポートする高性能なリンター・フォーマッターです。2025年現在、354のルールを提供し、ESLint や typescript-eslint などの既存ツールからのルールを網羅しています。

主な特徴

  • 統合されたツールチェーン: リンターとフォーマッターが単一のツールに統合
  • Rust による高速化: 従来のツールと比較して圧倒的な速度向上
  • 豊富なルールセット: 353のルールを ESLint、TypeScript ESLint などから継承
  • 詳細な診断情報: コンテキストに応じた詳細なエラーメッセージ

移行の動機

1. 設定の複雑さの解消

ESLint + Prettier の構成では、package.json の devDependencies に沢山のパッケージ追加が必要でした。

また、複数の設定ファイル（.eslintrc.js、.prettierrc）を管理し、さらに ESLint と Prettier の競合を避けるための追加設定が必要でした。

2. パフォーマンスの問題

大規模なプロジェクトでは、ESLint + Prettier の実行時間が開発体験に大きな影響を与えていました。特に CI/CD パイプラインでの実行時間は深刻な問題でした。

3. 保守コストの削減

複数のツールとその依存関係を管理するコストが高く、アップデートの際の互換性問題も発生していました。

Rustによる驚異的な性能向上

Biome の最大の魅力は、その圧倒的な処理速度です。

パフォーマンス比較

最新のベンチマークデータによると：

  • フォーマッター: Prettier より25倍高速
  • リンター: ESLint より15倍高速

これらの数値は MacBook Pro (13-inch, M1, 2020) での測定結果です。

参考: https://github.com/biomejs/biome/tree/main/benchmark#results

セットアップ方法

1. インストール

# npm を使用
npm install --save-dev --save-exact @biomejs/biome

# yarn を使用
yarn add --dev --exact @biomejs/biome

# pnpm を使用
pnpm add --save-dev --save-exact @biomejs/biome

参考: https://github.com/biomejs/biome?tab=readme-ov-file#installation

2. 初期設定

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

これにより biome.json が生成されます：

biome.json
{
	"$schema": "https://biomejs.dev/schemas/2.2.3/schema.json",
	"vcs": {
		"enabled": false,
		"clientKind": "git",
		"useIgnoreFile": false
	},
	"files": {
		"ignoreUnknown": false
	},
	"formatter": {
		"enabled": true,
		"indentStyle": "tab"
	},
	"linter": {
		"enabled": true,
		"rules": {
			"recommended": true
		}
	},
	"javascript": {
		"formatter": {
			"quoteStyle": "double"
		}
	},
	"assist": {
		"enabled": true,
		"actions": {
			"source": {
				"organizeImports": "on"
			}
		}
	}
}

3. 既存プロジェクトからの移行（オプショナル（移行の場合のみ））

ESLint 設定の移行

既存の ESLint ルールを Biome に移行するには：

# ESLint 設定を Biome 形式に変換
npx @biomejs/biome migrate eslint --write

これで、biome.json に既存のルールが適用されます。

package.json スクリプトの更新

package.json
{
  "scripts": {
    "lint": "biome check .",
    "lint:fix": "biome check --write .",
  }
}

4. Git hooks の設定

Husky と lint-staged を使用：

lint-staged.config.js
module.exports = {
  '*.{js,jsx,ts,tsx,json,md,yml,yaml}': [
    'biome check --no-errors-on-unmatched',
  ],
  '*.{css,scss,html}': ['biome check --no-errors-on-unmatched'],
};

--no-errors-on-unmatched は「Biomeが処理するファイルを見つけられなくても、正常終了（終了コード0）し、エラーを表示しない」動作となります。Biome はマッチするファイルがない時にエラーで終了するため、このフラグが無いと「ステージされたファイルが指定したglobパターンにマッチしない」場合エラーとなってしまいます。

5. CI/CD パイプラインへの適用

# GitHub Actions の例
- name: Run Biome
  run: |
    npx @biomejs/biome ci . --reporter=github

参考: https://github.com/biomejs/biome?tab=readme-ov-file#usage

6. エディター統合

VS Code 設定

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

7. 除外ファイル設定

自動生成されたコードなどを Biome のチェック対象から除外する設定を行います。
尚、.gitignore の内容は自動で除外されるようです。

biome.json
  ...
  "files": {
    "includes": [
      "**",                  // Include all files by default
      "!**/*/generated/**",  // Exclude the generated files
    ]
  },
}

まとめ

ESLint + Prettier から Biome への移行は、特にパフォーマンスと開発体験の改善において大きなメリットをもたらします。

一方で、エコシステムの成熟度、移行コスト、コミュニティサポート等を考慮すると、ESLint + Prettier もまだまだ有効な選択肢となります。

Discussion