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

Biomeの簡単な紹介

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

• Prettier
→ コードの「見た目」を整える（使い方はこちら）

• ESLint
→ コードの「ルール違反やバグ」を検出する（使い方はこちら）

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

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

いわば「Prettier + ESLint = Biome」というものになります。

Biomeは、Next.jsのデフォルトツールとして採用されるほど人気です。

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の使い方

流れは次のようになります。

Biome本体
▼
Biome設定ファイル
▼
VS Codeのエクステンション
▼
Biomeを整形ツールとして設定

まずBiome本体のパッケージをインストールします

npm install --save-dev @biomejs/biome

次はBiomeの設定ファイルです。

下記コマンドで設定ファイルを自動生成できます。

npx @biomejs/biome init

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

// biome.json

{
	"$schema": "https://biomejs.dev/schemas/2.4.12/schema.json",
	"vcs": {
		"enabled": true,
		"clientKind": "git",
		"useIgnoreFile": true
	},
	"files": {
		"includes": ["**", "!!**/dist"]
	},
	"formatter": {
		"enabled": true,
		"indentStyle": "space",
		"indentWidth": 4
	},
	"linter": {
		"enabled": true,
		"rules": {
			"recommended": true
		}
	},
	"javascript": {
		"formatter": {
			"quoteStyle": "double"
		}
	},
	"assist": {
		"enabled": true,
		"actions": {
			"source": {
				"organizeImports": "on"
			}
		}
	}
}

色々と書いてありますが、ポイントだけを紹介します。

• "linter" → ESLintに相当する設定
• "formatter" → Prettierに相当する設定
• "organizeImports" → importの順番を自動で整理し、未使用のものは削除する機能

以上、Biome本体と設定ファイルでBiomeは利用可能です。

ターミナルからBiomeを実行します。

しかしそれだと、毎回コマンドを書く手間がかかるため、VS Codeのエクステンションを利用して、リアルタイムでBiomeを実行するのが一般的です。

なので次は、VS Codeにエクステンションを追加しましょう。

下記URLからVS Codeにインストールしてください。

Biomeリンク

最後に、Biomeをコード整形ツールとしてVS Code上に設定します。

ルートに.vscode/settings.jsonを作り、次のように書きましょう。

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

これによって、BiomeとVS Codeのエクステンションが結びつき、リアルタイムでBiomeが実行されます。

このようにツールで開発環境を整えたなら、次はAIで開発速度そのものを上げましょう。

「エラーが出たとき」、「書き方に迷ったとき」、「コードレビューして欲しいとき」。

React開発でそのまま使えるAIプロンプトを10個まとめた無料ガイドを配布しています。

Biomeと組み合わせると、コードを書く速度も品質も上がります。

⚫︎ monotein.com/present

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