Biome を使ってみたため、その所感を書く

Author:

2024-10-30

はじめに

こんにちは。Belong でフロントエンドエンジニアをしている ryo です。
私は普段のプロジェクトでは Prettier + Linter 構成を利用しています。
そんな折、小さいプロジェクトにまだ formatter + linter が無い状態だったので、気になっていた Biome を導入してみました。
その所感をまとめたいと思います。

Biome とは

現状は ESLint + Prettier 構成に替わるツール、という立ち位置かと思います。
フロントエンドのツールチェイン統一を目指していた Rome をフォークして作られたプロジェクトとのことです。(詳しくは公式のアナウンスをご覧ください)

Biome だけで formatter , linter の恩恵を受ける事ができて、さらに ESLint + Prettier と比較して実行速度がかなり早く、セットアップも簡単なため、最近人気を集めている様子です（僕もそれを魅力的に感じた一人です)

環境

@biomejs/biome: 1.9.4

セットアップ

基本的に公式のドキュメントに従って導入しました。

npm install --save-dev --save-exact @biomejs/biomeを実行
npx @biomejs/biome initを実行

2.のステップによって、以下のようなbiome.json が生成されます。
設定の詳細についてはこちらを参照してください。

{
  "$schema": "./node_modules/@biomejs/biome/configuration_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,
      "correctness": {
        "noUnusedImports": {
          "level": "error",
          "fix": "safe"
        }
      }
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "double"
    }
  }
}

上記の biome.json で手を加えたのは $schemaの所とnoUnusedImportsの所だけです。
もちろんプロジェクトによりますが、基本的には上記の内容で変更して、その上でカスタムしていく感じでいいかな、と思います。

実行時に少し気をつける事

biome はざっくり以下のコマンドらで実行できます。

format
lint
check

この時、lint を実行して、それを pass したとしても check コマンドを実行すると以下のようなエラーが出ることがあります。

✖ Import statements could be sorted:
...

これは https://biomejs.dev/analyzer/import-sorting/ のルールでエラーが出ています。
どういう事かと言うと、実は Biome は Formatter , Linter の他に Analyzer というツールも提供していて、
check コマンドを実行するとそれを含めた 3 つが実行されるためです。なので基本的には check コマンドで運用するのがいいかと思います。

所感

個人的には評判の通り、とてもいいと感じました。以下にそれぞれまとめていきます。基本的には Prettier + ESLint の構成との比較になります。

セットアップの容易さ

とにかく簡単に導入できて、すぐに使えるのが嬉しいなと思いました。

実行速度が速い

Prettier + ESLint 構成と比較して、かなり早いと感じました。個人的に一番気になっていたポイントだったので、これはかなり嬉しいです。

依存関係からの解放

ESLint を使っていると、いろいろなプラグインを入れる必要があったり、結果設定ファイルも複雑になったりするのですが、Biome はそれがないため、package.json , 設定ファイルをシンプルに出来そうです。
これもメンテナンスを考えるとかなり嬉しいポイントでした。

広い言語サポート

最近のリリースで GraphQL、CSS のサポートが追加され、より従来の構成から移行しやすくなった印象です。
また、CSS のサポートは Stylelint を巻き取った内容だったりするので、より依存も減らせ、実行速度の早さの恩恵も受けれて嬉しいなと感じました。

一方で、以下の点だけ気になりました。

Lint ルール (プラグインサポート) が足りない

先ほど挙げた 依存関係からの解放を、逆に言うと、今まで ESLint のプラグインを利用する事で実現していたルールが Biome には足りないです。
実際、現状 Next.js は Linter のサポートは ESLint のみですし、既存の Next.js プロジェクトですぐに Biome へ完全移行するのは不安な所があるなと感じました。
( Next.js のレポジトリでもまだまだ議論中、という感じでした：https://github.com/vercel/next.js/discussions/59347)

また、プラグインのサポートだけではなく、ルール自体も ESLint と比較して不足しているものもある様子なので、その辺りも慎重に移行する必要がありそうです。

終わりに

今回は気になっていた Biome を導入してみて、その所感を書いてみました。
個人的には、セットアップが簡単、早い、依存関係が少ない、という点で Biome はとても魅力的だと感じました。
また、設定ファイルから Formatter 等の一部の機能だけ有効にして利用する事も出来るので、段階的に導入していくのもありだな、と思います。

弊社 Belong は一緒に働くフロントエンドエンジニアを募集しています。興味がある方はエンジニアリングチーム紹介ページをご覧いただけると幸いです。

参考資料

https://biomejs.dev/ https://zenn.dev/sosukesuzuki/articles/756e04848885bd