ES-LintをやめてBiomeにする

個人開発のNext.jsのプロジェクトにはES-Lintが入っている。Prettierは入れてない。
Prettierを追加しようと思ったけど、どうせならBiomeを試してみたいのでBiomeを入れてみる。
https://biomejs.dev/

Nodeのバージョン: v21.7.0
Nextのバージョン: 14.1.0

Buzo

Prettierより性能がよいらしい

Buzo

とりあえずeslintを消す

npm uninstall eslint eslint-config-nex

設定ファイルも消す

rm .eslintrc.json

Buzo

公式のドキュメントを見ながら、インストールを進める

インストールを行う

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

biome.jsoncを作成。--jsoncをつけるとbiome.jsonの代わりにbiome.jsoncが作成される。

npx @biomejs/biome init --jsonc

Buzo

試しにsrc配下に対してフォーマットを実行してみる。

npx @biomejs/biome format src --write

いい感じに動いた。

Buzo

BiomeのVSCode拡張を入れて、オートフォーマットが効くようにする。

VS Codeの設定も書く。

.vscode/settings.json

{
	"editor.formatOnSave": true,
	"editor.defaultFormatter": "biomejs.biome",
	"editor.codeActionsOnSave": {
		"quickfix.biome": "always",
		"source.organizeImports.biome": "always"
	}
}

Buzo

Format on saveと npx @biomejs/biome format --write ./src のフォーマットの結果が違う。。
後者はbiome.jsoncのルールに従ってないようなきがする。
調査する。

VS Codeのタブの設定がスペースになっていたのが原因のようだった。
biome.jsoncでformatterの設定を"indentStyle": "space"としたら直った