パフォーマンスや設定しやすさの観点で、従来広く使われていた ESLint や Prettier から Biome や oxc に移行したいと思うようになった。普通の JavaScript/TypeScript や JSX/TSX ならすでに実用レベルだと思うのだが、Astro を使っていると、単純にはいかずで落としどころを探る必要があった。

まず、Biome にするか oxc にするか。この記事を書いている時点では oxc では Astro は未サポートなので、Biome 一択。Biome も Experimental で、いくつか工夫は必要なので、安定したものを使いたいのであれば ESLint と Prettier にしたほうがよい。個人的には、ESLint は遅いし設定が難しいと感じていて、多少問題があっても Biome を試すのもありかなと思い、Biome を試すことにした。仕事だったらまだ使わないと思う。

まずは Biome を普通に導入する。加えて、html.experimentalFullSupportEnabled を有効にする。これを有効にしないと JSX-like な部分で参照している JS/TS 側の変数がすべて lint/correctness/noUnusedVariables になってしまい、実用的ではない。

{
  "html": {
    "experimentalFullSupportEnabled": true
  }
}

これだけで動いてくれればよかったのだが、残念ながらまだそうはなっていない。いくつかの問題に対処する必要があった。

まず、false positive が発生するので、これを防ぐために一部の項目を無効にする。lint/complexity/noUselessFragments と lint/correctness/useJsxKeyInIterable を off にしておく。

• 💅 useJsxKeyInIterable should not apply to Astro files · Issue #9507 · biomejs/biome

{
  "overrides": [
    {
      "includes": ["**/*.astro"],
      "linter": {
        "rules": {
          "complexity": {
            "noUselessFragments": "off"
          },
          "correctness": {
            "useJsxKeyInIterable": "off"
          }
        }
      }
    }
  ]
}

加えて、biome check --write や biome lint --write で自動修正を有効にしつつ lint を実行すると、余計な空行が追加されてフォーマットがおかしくなる。

• 📝 experimentalFullSupportEnabled in Astro causes a newline when formatting · Issue #10096 · biomejs/biome

これはどうしようもなさそうだったので、Prettier は残して .astro ファイルのフォーマットだけは Prettier を使うようにした。Prettier の設定はそこまで難しくないので、ESLint がなくなるので一定のメリットはあると判断した。

npm install --save-dev prettier prettier-plugin-astro

{
  "overrides": [
    {
      "includes": ["**/*.astro"],
      "formatter": {
        "enabled": false
      }
    }
  ]
}

plugins:
  - prettier-plugin-astro

**
!**/
!**/*.astro

当然だが、biome check を実行していたところで prettier も実行する。

# check のみ
biome check . && prettier --check .
# check + fix
biome check --write . && prettier --write .

これで一旦は解決。今後 Biome や oxc が進化してこのあたりの対処が不要になることに期待したい。