こんにちは。KENTEM第二開発部でフロントエンドを担当しているM・Sです。

普段の開発において、フォーマッターとリンターは開発者の強い味方ですよね。

従来のWeb開発においてはPrettierとESLintを組み合わせるのが主流でしたが、最近はBiomeというツールが登場しています。

今回はBiomeの特徴や、実際の製品開発プロジェクトで半年使ってみてわかったことをご紹介いたします！

ちなみにフォーマットとリントの定義はこちら↓

フォーマット: コードの見た目を統一・整形する

リント: コードの問題点や規約違反を検出する

特徴
セットアップ
- ESLintとPrettierからの移行
ファイルごとにルールを設定する
半年使ってみた感想
- チームメンバーにも聞いてみた
まとめ
おわりに

特徴

フォーマットもリントもこれ１つで

ずばり、一番のメリットはこれです。

従来はPrettierとESLintでカバーしていた領域をBiomeは単体でカバーできます。

これだけで、環境構築の煩わしさがだいぶ低減します。

高速

Biome曰く、PrettierやESLintなどより何倍も速いです。

フォーマッティング性能

Biome は Prettier より約25倍高速
Biome は parallel-prettier より約20倍高速
Biome は xargs -P1 より約20倍高速
Biome は dprint より1.5〜2倍高速
Biome（シングルスレッド）は Prettier より約7倍高速

マルチスレッドでのベンチマーク結果は、環境によって大きく異なることがあります。たとえば、M1 Max（10コア）では Biome が Prettier の100倍の速度を記録したケースもあります。

リンティング性能

Biome はプラグインなしの ESLint より約15倍高速
Biome（シングルスレッド）は ESLint より約4倍高速

Biome のリンターは非常に高速ですが、さらなる改善の余地があります。

特に、セマンティックモデルの構築、制御フローグラフの生成、クエリのマッチング処理などに多くの時間を要しています（Issue: #3565, #3569）。

引用元：https://github.com/biomejs/biome/tree/main/benchmark#formatting

言われてみれば速い気もしますが、正直普段の開発では大差ないです。

Prettier, ESLintから引き継いだ哲学

そもそもBiomeはPrettierをRustで書き換えたプロジェクトに $20kの報奨金を支払うコンペの勝者なのです。→記事

そのため、フォーマットにおいてはPrettierと近い哲学を持っています。

また、リントにおいても

多くのBiomeリンタのルールはESLintやESLintのプラグインのルールからインスパイアされて作られています。

と公式が明言しています。

セットアップ

エディタはvscodeです

１. インストール

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

２. 設定ファイルの作成

npx @biomejs/biome init

→biome.jsonが生成される

３. 拡張機能のインストール

４. .vscode/settings.jsonの修正（任意）

ここでは保存時のアクションを指定しています。

{
  "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.organizeImports.biome": "explicit",
      "quickfix.biome": "explicit"
  },
}

"editor.formatOnSave": true：保存時にフォーマットを行う
source.organizeImports.biome：保存時にimportの並び替えを行う（実験的機能）
quickfix.biome：保存時に修正する

setting.jsonがない場合

１. vsdcodeの設定を開く（画面左下の歯車か、Ctrlと , を同時押し）

２. ワークスペースを選択

３. 画面右上の設定（JSON)を開くボタンをクリック

ESLintとPrettierからの移行

コマンドのみで移行できます。

biome migrate eslint --write
biome migrate prettier --write

ファイルごとにルールを設定する

「overrides」を使ってファイルごとに設定を変えることができます。

"overrides": [
    {
      "include": ["features/**/*.tsx"],
      "ignore": ["features/**/*.stories.tsx"],
      "linter": {
        "rules": {
          "style": {
            "useNodejsImportProtocol": "off"
          }
        }
      }
    },

この例では、features直下のtsxファイルにおいて、useNodejsImportProtocolルールをオフにしています。

また、ignoreに*.stories.tsxを記述することで、ストーリーファイルではuseNodejsImportProtocolが有効なままになります。

半年使ってみた感想

基本的に問題なく動く。Prettier + ESLint と使用感は大差ない
言われてみれば若干速いかもしれないが、普段の開発で感じ取れるレベルではない
import順の整理でコードが壊れることがあった
- 拡張機能やvscodeの再起動で治った
- プレリリース版は出てるが、安定版はまだとのこと（詳しくはIssueへ）
基本的にやりたいことはできるが、Lintルールは完璧に揃ってるとは言えない
- Discussion
- 開発中なのか、Biome の理念として実装しないのか不明
- そのため、Biome + ESLintで開発する方もいるそう

チームメンバーにも聞いてみた

いいツールだと思う
Prettier + ESLintよりも環境構築や設定が楽でいい
速い。CLIでの実行だと速さを感じやすい。
時々壊れなければ最高

→ みなさん概ね満足しているようでした。

まとめ

以上、環境構築が楽でスピードに自信のあるBiomeのご紹介でした。

強みは魅力的ですが、個人的にはまだまだ成熟していないツールだと感じています。

しかし、最近ではVercelがプラチナスポンサーになったり、ver2.0のbetaが公開されたりと、急成長中であることは間違いありません。

今後もBiomeの進化を注視しながら使っていこうと思います！

おわりに

KENTEMでは、様々な拠点でエンジニアを大募集しています！建設×ITにご興味頂いた方は、是非下記のリンクからご応募ください。 recruit.kentem.jp career.kentem.jp

KENTEM TechBlog

建設業のDXを実現するKENTEMの技術ブログです。

次世代フォーマッターBiome、実務で半年使ったリアルな感想とその魅力とは？

特徴