😊

Eslint+PrettierからBiomeへの移行

2024/10/28に公開

ESLint

Prettier

Biome

tech

はじめに

フロントエンドのlinterとして特に何も考えずEslint+Prettierで長年やってきましたが、やりたいことをやろうとするといろいろとnpm installしなければならず、嫌だな～とおもいつつ今までやってきていたのですが、Biomeなるもので解決できるようで、やってみました。

Biomeとは

2023年にリリースされたばかりで、Prettierと互換性があり、しかもPrettierより高速なフォーマッタです。試してみるしかない。

Biomeは JavaScript、TypeScript、JSX、JSON、CSS そして GraphQL のための高速なformatter であり、Prettier と97%の互換性を持ち、CIと開発者の時間を節約します。

https://biomejs.dev/ja/

開発チームの思いやことの経緯などは以下のブログにまとまっています。
"New is always better." - 「新しいものは常に良い。」 わかる。

さあはじめよう

公式ドキュメントの手順に従って早速インストールしていきます。
BiomeのインストールにはNode.js v14.18以降が必要です。

インストール

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

npm installできないんだよーという方は公式ドキュメントをご参照ください。
こんなところも手厚いの嬉しい。

インストールが完了したら、続いてプロジェクト用のconfigファイルを生成します。

npx @biomejs/biome init

すると実行ディレクトリ直下にbiome.jsonが生成されます。

biome.json

{
	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
	"vcs": {
		"enabled": false,
		"clientKind": "git",
		"useIgnoreFile": false
	},
	"files": {
		"ignoreUnknown": false,
		"ignore": []
	},
	"formatter": {
		"enabled": true,
		"indentStyle": "tab"
	},
	"organizeImports": {
		"enabled": true
	},
	"linter": {
		"enabled": true,
		"rules": {
			"recommended": true
		}
	},
	"javascript": {
		"formatter": {
			"quoteStyle": "double"
		}
	}
}

ESLintとPrettierからの移行

BiomeがESLintとPrettierからマージするためのコマンドを用意してくれています。

npx @biomejs/biome migrate eslint --write
npx @biomejs/biome migrate prettier --write

実行後、biome.jsonが書き換わっていることが確認できると思います。

VSCode拡張機能のインストール

ついでにVSCode拡張機能も用意してくれているのでインストールします。
必要ない方はスキップしてください。

拡張機能タブ（表示 → 拡張機能）を開き、Biomeを検索する。
コマンドパレット（Ctrl/⌘+Pまたは移動 → ファイルに移動）で ext install biomejs.biome と入力し、Enterキーを押す。

settings.jsonもいろいろと書き換えておきます。

コマンドパレット（Ctrl/⌘+⇧+P）を開き、設定: ユーザー設定（JSON）を開くを選択

settings.json

{
  "[javascript]": {
    // .jsファイルのデフォルトフォーマッタをbiomeに変更
    "editor.defaultFormatter": "biomejs.biome" 
  },
  "[javascriptreact]": {
    // .jsxファイルのデフォルトフォーマッタをbiomeに変更
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    // .tsファイルのデフォルトフォーマッタをbiomeに変更
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    // .tsxファイルのデフォルトフォーマッタをbiomeに変更
    "editor.defaultFormatter": "biomejs.biome"
  },
  "editor.codeActionsOnSave": {
    // ファイル保存時にフォーマッタを実行
    "quickfix.biome": "explicit"
    // インポートの並び替えを実行(実験的機能)
    "source.organizeImports.biome": "explicit"
  },
}

いざ実行

Formatter

formatterとはコードの書き方のルールを確認し、統一することで、開発者間でのコードスタイルのばらつきをなくし、コードの可読性と保守性を向上させます。コードの動作自体には直接関係のないルールを適用します。
https://zenn.dev/shytaani/articles/863d3f83f40095#formatterとは

./src配下にあるファイルに対してformatterしてみます。

npx @biomejs/biome format ./src

あっという間にできました。
変更を反映する場合は--writeオプションを追加してください。

npx @biomejs/biome --write format ./src

Linter

linterとはコードの潜在的なバグや不適切なコーディングスタイルを検出し、修正方法を提案する静的コード解析ツールです。コード中の型や変数名などを解析し、ルールに従っていない部分を発見します。IDE でソースコードを書いているときに赤色の波線で指摘してくれるツールです。
https://zenn.dev/shytaani/articles/863d3f83f40095#linterとは

linterもしてみます。

npx @biomejs/biome lint ./src

フォーマッタと同様に、変更を反映する場合は--writeオプションを追加してください。

npx @biomejs/biome --write lint ./src

触ってみての感想

eslintのあれもこれもいれないといけないのがなくなったのがかなりいい。
実行速度が体感で既に速い。
ドキュメントが手厚い＋日本語対応しているのがいい。

今回はお試しで動かしてみましたが、随時Biomeに移行していこうと思います。

おわりに

不要になったeslintやprettierのプラグイン類をアンインストールしておくことを忘れずに。