2024.04.25 2024.04.29

【保存時フォーマット対応】Next.jsにbiomeを入れてみた

unit-code@wp-admin

こんにちは、めんだこです。

今回は、Next.jsプロジェクトに、Rust製のformatter兼linterであるbiomeを導入しましたので、導入方法をまとめてみました。

私はエディタにCursorを使っていますが、おそらくVSCode上でも同じように動作すると思います（動かない場合、コメントにて教えてくださると助かります）。

プロジェクト単位での、エディタ保存時のフォーマット指定にも対応しておりますので、同じ課題を抱えている方の参考になれば幸いです。

biomeの導入と初期化
biome.jsonの設定
エディタの設定（VSCode）
動作環境
参考文献

biomeの導入と初期化

公式ガイドに従って、インストールと初期化を行います。

インストール

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

初期化（biome.jsonの作成）

npx @biomejs/biome init

biome.jsonの設定

生成された「biome.json」をお好みに編集します。
私の場合、以下に設定しました。

設定の詳細

指定可能なすべての設定値は、公式サイトにてご確認いただけます。

organizeImports

importステートメントのソートに関する設定

「“enabled”: true」：有効化

files

対象とするファイルの指定

「“include”: ファイル」：含めるファイルを、Unix Shell Patternで指定

vcs（バージョン管理システム）

バージョン管理システムの指定

「“enabled”: true」：有効化
「“clientKind”: “git”」：gitを指定
「“useIgnoreFile”: true」：.gitignoreで指定されているファイルをbiomeの対象ファイルからも除外

formatter

フォーマット指定

「“enabled”: true」：有効化
「“indentStyle”: “tab”」：インデントには「”tab”」か「”space”」を指定可能
「“indentWidth”: 2」：インデント幅を指定

linter

linter指定

「“enabled”: true」：有効化
「“rules.recommended”: true」：recommended rulesを適用

{
	"$schema": "https://biomejs.dev/schemas/1.7.0/schema.json",
	"organizeImports": {
		"enabled": true
	},
	"files": {
		"include": ["./*.js", "./*.mjs", "./*.ts", "./*.tsx", "./*.json"]
	},
	"vcs": {
		"enabled": true,
		"clientKind": "git",
		"useIgnoreFile": true
	},
	"formatter": {
		"enabled": true,
		"indentStyle": "tab",
		"indentWidth": 2
	},
	"linter": {
		"enabled": true,
		"rules": {
			"recommended": true
		}
	}
}

あとは、お好みですがnpm.scriptsも追加しておきましょう。
biomeコマンドの詳細についてはこちら。

"scripts": {
	"dev": "next dev",
	"build": "next build",
	"start": "next start",
	"format": "biome check --apply *" // 追加
},

これで、下記のコマンドにて、先ほど設定したformat、linterに通してくれます。

npm run format

エディタの設定（VSCode）

ここからは、エディタでの自動保存設定の方法を記載しています。

拡張機能のインストール

「biome」と検索して、一番上に出てくる拡張機能をインストールします。

公式にも、エディタ設定方法は記載されていますが、私の場合うまく動作しなかったので、以下の方法で設定しました。
公式の方法で問題のない方はそちらに従ってください。

.vscode内の設定ファイル

プロジェクト直下に「.vscode」ディレクトリを作成し、以下の2ファイルを追加します。

{
	"recommendations": ["biomejs.biome"]
}

{
	"editor.formatOnSave": true, // 保存時のフォーマット有効化
	"[javascript][typescript][javascriptreact][typescriptreact][json][jsonc]": {
		"editor.tabSize": 2, // インデントのサイズ指定（biome.jsonと合わせる）
		"editor.defaultFormatter": "biomejs.biome" // フォーマッターの指定
	}
}

基本的には、この2ファイルを作成すれば問題なく動作するようです。
不安な方は、念の為VSCodeを再起動してみましょう。

私の場合は、これでもうまく動作しなかったため以下の手順を追加しました。
必要な方はこちらもご覧ください。

（任意）拡張機能用のバイナリのインストール

公式のトラブルシューティングにもあるように、npm等のパッケージマネージャーによっては、拡張機能用のbiomeバイナリファイルがうまく認識できない事があるようです。
私の場合、Dockerを使用しているので、それも関係しているかもしれません。

これによって、エディタに保存したのにフォーマット化されないという問題が発生する事があります。

そのような場合は各プラットフォーム用のバイナリをすべてダウンロードしておく必要があります。
（チーム開発の際でも、すべてのバイナリをダウンロードしてあげるのが親切かと思います）

npm install --save-dev --force @biomejs/cli-darwin-arm64 @biomejs/cli-darwin-x64 @biomejs/cli-linux-arm64 @biomejs/cli-linux-x64 @biomejs/cli-win32-arm64 @biomejs/cli-win32-x64

「force」を使っているのは、自身のマシンと異なるプラットフォームのバイナリをダウンロードする際の警告を無視するためです。

あとは、biomeが自身のプラットフォームにあったバイナリを自動で探してくれます。

VSCodeの「出力」を確認して、このような表示が出ていればOKです。

ここまででVSCodeの保存時フォーマット化も完了です。

なお、このようにマシン毎のバイナリをダウンロードしたことで、以降のnode操作のたびにエラーが発生してしまう場合があるようです。

そのような場合は、devcontainer等ツールを使用して、開発環境ごとコンテナに入れてしまうことを検討に入れてみることも一つの手です。

devcontainerに入れる場合の手順は、別途コメントにて要望があれば執筆させていただきます。

動作環境

筆者の動作環境は以下になります。

Mac OS: 14.4.1
Cursor: 0.32
Docker Image: node:20-alpine
Next.js: 14.2.2
biome: 1.7.1

参考文献

こちらの記事の執筆にあたり、以下のサイトを参考にさせていただきました。

ありがとうございました！

【webサイト】

Next.js に Biome を導入する（著者: tataya, 出典: Zenn）
biome公式サイト
Shell-Pattern-Matching（出典: Free Software Foundation, Inc.）

今回は、ご覧いただきありがとうございました。

より良い記事を提供するため、この記事に対するご指摘等ございましたら随時コメントを募集しています。

#biome #cursor #format #lint #next.js #vscode