コンテンツへスキップ

ESLintからBiomeに乗り換えた話

複数のコード設定パネルがひとつの高速な開発ツールへ集約される、Biome導入を表したヒーロー画像

ずっと気になりながらも、移行の手間を考えてなんとなく後回しにしてきたBiome。今回このブログを新規に立ち上げるタイミングで、重い腰をあげてやっと使ってみました。ESLint + Prettierのコンビとはしばらくの付き合いだったけど、正直言うと移行してよかったと思っている。

Biomeってなに？

BiomeはJavaScript / TypeScriptのフォーマッターとリンターをまとめて担ってくれるツール。Rust製なので動作が爆速で、ESLint + Prettierの組み合わせをほぼ置き換えられる。

もともとはRomeというプロジェクトの後継として生まれたもので、最近はv2系になってさらに安定してきた感がある。設定ファイルも一本にまとまっていて、ESLintの複雑な設定に疲れた人には特にブッ刺さるかも。

なぜ今まで使ってこなかったか

既存プロジェクトにESLintが入っていると、移行がなかなか面倒くさい...。プラグインとの相性、既存の設定の読み替え、チームへの説明... みたいなことを考えると「まぁいっか」ってなりがちで...。

でも新規プロジェクトなら話は別。最初からBiomeで組めばそういう面倒が一切ない。このブログがまさにそのタイミングだったので、迷わず採用。

インストール

pnpmのモノレポ構成だったので、まずルートにdev dependencyとして追加する。

pnpm add -D -w @biomejs/biome

次に設定ファイルを生成する。

pnpm biome init

これでルートに biome.json が生成される。あとはここを編集していくだけ。

設定内容

このブログはTurborepoのモノレポ構成で、ツール設定用のパッケージ（tooling/biome）にBiomeの設定をまとめ、各アプリからextendsする形にした。共通設定を一か所にまとめられるのでとても管理しやすくていい感じ。

tooling/biome/biome.json の中身はこんな感じ。

{
  "$schema": "https://biomejs.dev/schemas/2.5.0/schema.json",
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineEnding": "lf",
    "lineWidth": 100
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "double",
      "trailingCommas": "all",
      "semicolons": "always"
    }
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "correctness": {
        "noUnusedImports": "error",
        "noUnusedVariables": "error"
      },
      "style": {
        "noNonNullAssertion": "warn"
      }
    }
  }
}

フォーマットはスペース2・LF・行幅100・ダブルクォート・末尾カンマあり・セミコロンあり。リンターはrecommendedをベースに、未使用importと未使用変数はerror、非nullアサーション（!）はwarn。超最小限な感じですね。

ルートの biome.json はこれをextendsするだけでいい。

{
  "$schema": "https://biomejs.dev/schemas/2.5.0/schema.json",
  "extends": ["./tooling/biome/biome.json"]
}

めっちゃシンプル。これがBiomeの良いところで、設定の見通しがとてもいいですよね。ESLintだと設定ファイルが複数に分散したり、extendsの順序で悩んだりすることもあったけど、Biomeはそういうことがない。

VS Codeとの連携

VS Code拡張の「Biome」を入れて、.vscode/settings.json に設定を追加するだけ。保存時の自動フォーマットがすぐ動く。

{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true
}

CIでのチェック

CIや手動実行用に、package.json のscriptsにも追加しておくと便利。

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

使ってみた感想

速いっぽい。こんなちょっとしたブログサイトだと効果は実感しにくいけど、体感は速いっぽい。

設定はシンプルで見通しがいい。すごくいい。ESLintのflatConfig移行やプラグインの相性問題に悩まされてきた人ほど、その快適さを実感できるんじゃないかなと。フォーマットもリントも設定ファイル一つで完結するのは、思った以上に精神衛生上よかった。

一点だけ注意するとすれば、ESLintのプラグインエコシステムとは比べられない部分がある。特殊なルールが必要なプロジェクトや、既存のESLint設定が複雑なプロジェクトはそのまま移行するのが難しいケースもあるっぽい。

でも多くのプロジェクトにとっては十分すぎる機能があるし、次の既存プロジェクトでの移行も、じっくり検討していきたい。健闘を加速する。

記事一覧へ戻る