案件でBiomeを導入することになったので調べてまとめてみました。
Biomeの概要
Biomeとはリンターとフォーマッターを１つにまとめることを目的とした開発支援ツールです。
本来 JavaScriptやTypeScriptの開発では Eslint や Prettier など、複数のツールをインストールしてそれぞれの設定が必要でした。
ツールごとに設定ファイルが必要だったりツールごとにバージョンアップが必要だったりと管理が煩雑でしたが、biomeだけで全てできるように開発されました。
Biomeの良いところ
Biomeの何が良いのか、大きく3つに分けてまとめました！
ESLint・Prettierと比較して超高速
Biomeは高速処理が得意なRustで実装されているため従来のツールと比較してパフォーマンスが非常に高いです。
具体例を出すと、
過去に参加していた案件で約500件のチェックを Eslintで2.5秒、Prettierで4.3秒ほどかかっていましたが、
Biomeに移行してリンターとフォーマッターを同時実行したら0.6秒で終わりました。
まとめて実行しているのに早くなるなんで驚きです。
公式ドキュメントの以下ページがそれくらい早いか視覚的にわかりやすいです。
https://biomejs.dev/
設定ファイルやパッケージが１つで済む
Eslint と Prettier を使用している場合、
プロジェクトでこれらを動かすために eslint と prettier のほかに eslint-config-prettier、@typescript-eslint/parser、@typescript-eslint/eslint-plugin など多くのパッケージをインストールする必要があります。
さらに .eslintrc.json と .prettierrc.json というそれぞれの設定ファイルが必要です。
Biome は @biomejs/biome のみインストールして、設定ファイルは biome.json だけで良くなります。
バージョンアップ対応や管理が1つだけで済むのは運用コストが下がってありがたいです。
EslintとPrettierからの移行が簡単
EslintとPrettierはデファクトスタンダードで多くのプロジェクトで使われています。
Biomeへの乗り換え専用の移行コマンドがあるため簡単に済みます。
// eslintからbiomeに移行
npx @biomejs/biome migrate eslint --write
// prettierからbiomeに移行
npx @biomejs/biome migrate prettier --writeルールを変更せずに移行したい場合は上記のコマンドで良いですが、BiomeがESLintからインスパイアされて動作に変更を加えたルールを適応したい場合は --include-inspired オプションをつけます。
BiomeとESLintのルール対応表のうちinspired とついているものがインスパイアされたルールです。
https://biomejs.dev/ja/linter/rules-sources/
Biomeの使い方
Biomeを導入すると biome.json という設定ファイルが作成されるので、
ここにフォーマットやリンターに関するコーディングルールを記述してコマンドで実行します。
LinterとFormatter
以下のコマンドで設定に沿ってコードにリンターとフォーマッターを適応してくれます。
$ npx biome lint
$ npx biome format--write のオプションをつけると自動でコードを書き換えてくれます。
Check
これはBiome独自のコマンドで、FormatterとLinterとimportのソートをまとめて実行してくれます。
$ npx biome checkこのコマンドも--write をつけることでコードを書き換えてくれます。
実際に使ってみた感想
プロジェクトでEslintとPrettierを使用していたのを管理と実行速度の観点からBiomeに移行することになりました。
結果、管理のしやすさも実行速度の改善も向上して良いことしかありません。
biome checkコマンドはリンターとフォーマッターをまとめて実行するのに加えてimportのソートもしてくれるので、エンジニアによってimportの並び順が変わるなんてこともなくなり、不要なコンフリクトが減りました。
新規プロジェクトのコード品質ならbiome一択だし、既存プロジェクトで複数ライブラリを入れていてもbiomeに乗り換えるのは検討してみても良いと思いました。
コメント