BiomeでESLint + Prettierを一本化したら、管理がかなり楽になった話

🙌 結論から

ESLint と Prettier を両方設定していたプロジェクトに Biome を導入したところ、設定ファイルが biome.json 1つにまとまり、リントと整形の実行速度がかなり速くなりました！

個人開発のプロジェクトで試し始めたのですが、チームのコードにも入れたくなる完成度でした(^_^)

設定のシンプルさと速さ、両方が手に入るのが本当にうれしいですね。✨

…最近はバックエンドエンジニアがメインなのに、JS系が楽しくてこっちばっかり触ってしまう…笑

💡 Biome とはなにか

Biome は、Rust で書かれた高速なリンター・フォーマッターです。

ESLint や Prettier の代替として使えて、1つのツールでリントと整形の両方をカバーできます。

公式サイトによると ESLint より最大 35 倍速いとのことで、マジで？？？と思いましたが、実際に動かしてみると確かにかなり速かったです(´･ω･`)

設定ファイルは biome.json 1つだけなので、.eslintrc.js・.prettierrc・.eslintignore などが乱立していたプロジェクトに入れると、管理するファイルがかなりすっきりします。

👀 導入してみた

インストールは npm 1コマンドで完結します。

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

biome init を実行すると biome.json が自動生成されます。最低限の設定はこんな感じです。

{
  "$schema": "https://biomejs.dev/schemas/1.9.0/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2
  }
}

package.json のスクリプトに追加しておくと使いやすくなります。

{
  "scripts": {
    "lint": "biome lint .",
    "format": "biome format --write .",
    "check": "biome check --write ."
  }
}

biome check はリントと整形を同時に実行してくれるので、これ1本でまかなえるのがかなり便利です！

✨ 使ってみた感想

一番びっくりしたのは実行速度ですかね。

以前 ESLint + Prettier でリントと整形を実行していたプロジェクトと比べると、体感で 3〜4 倍くらい速い感じがします(・∀・)

ESLint の設定を移行するときは、多少手間がかかる場面もありました。カスタムルールが多いプロジェクトでは、Biome に対応していないプラグインが出てくることもあります。

ただし個人開発や比較的シンプルな構成のプロジェクトなら、移行コストはかなり低いと思います。

VSCode の拡張機能も公式から出ており、保存時に自動で整形が走る設定にできるので、けっこう開発が快適になりました！

パパ系Webエンジニア〜愛用ガジェット一覧 🛍️

この記事を書いている作業環境のガジェットを楽天ROOMにまとめています ✨ 在宅エンジニアのデスク作りの参考にどうぞ 🙌

👍 まとめ

Biome は、ESLint + Prettier の設定を1つにまとめつつ、速度も大幅に改善できるツールです。

個人開発プロジェクトや新規プロジェクトへの導入なら、コストはかなり低いです。

ESLint の細かいルール設定が必要なプロジェクトへの移行は慎重に検討が必要ですが、シンプルな構成なら迷わず試してみる価値があります(^o^)/

「設定ファイルを管理する手間を減らしたい」「CIやコミット前のチェックを速くしたい」という方は、ぜひ一度試してみてください！✨