完璧なリンターを待たないことにした: ESLint V9マイグレーションとBiomeハイブリッド導入記

ESLint V8のサポート終了に対応してV9へマイグレーションし、性能問題をBiomeのハイブリッド導入で解決したレモンベース フロントエンドチャプターの経験を共有します。

導入背景

• 2024年9月にESLint V8サポート終了が告知され、セキュリティパッチとバグ修正を受けるにはV9へのマイグレーションが必須の状況
• V9から.eslintrc.jsベースの設定がdeprecatedとなり、Flat Configがデフォルトに
• 約400個のルール、二元化された設定ファイル構成、さまざまなプラグインの互換性確認が必要だった

マイグレーション過程

• ESLint公式のマイグレーションツールは@eslint/compatでラップしてくれる程度で、期待には及ばなかった
• AIツールで下書きを生成したが、欠落したルールや互換性の問題が多数発生
• 結局、スプレッドシートでV8/V9のルールを1行ずつ突き合わせながら全数調査

マイグレーション後の性能問題

• V9へ上げたところ、むしろ154秒 → 184秒で30秒さらに遅くなった
• import/no-cycleルールがV8比で10倍遅くなり、全体の45.8%を占有
• prettier/prettierルールも10.2%で、二重パースのオーバーヘッドがボトルネックに

Biomeハイブリッド導入

• 完全な置き換えではなく、「併用しながら利点に集中する」アプローチへ転換
• Prettier → Biome Formatterへ置き換え、フォーマット処理を14秒 → 2秒に短縮
• ESLintはプロジェクトのカスタムルールだけを担当

最終結果

• ESLint V8: 154秒 → ESLint V9: 184秒
• ESLint Only → Biome + ESLintハイブリッド: 約20秒

学んだこと

• AIにマイグレーションを任せるときは、まず計画を立てさせて人がレビューし、成功基準（例: V8の結果と一致）を明確に定義する必要がある
• 完璧なツールを待つよりも、今使えるツールをうまく組み合わせる方がより速い道になることもある

注意点

• 2つのツールを併用するとeslint.config.mjsとbiome.jsonの両方を管理する必要があり、ルール衝突の可能性がある
• どのルールをどのツールで担当するかを明確に決めておき、新規メンバーのオンボーディング時に役割分担の説明が必要

[selene]

まだリントの性能問題に悩んでいる方にとって、良いインサイトを与えてくれる記事だと思います。

私たちも昨年、oxc(oxlint) と ESLint をハイブリッドで使うように改善し、200秒以上かかっていたリントを15秒以内まで短縮した経験があります。

私も最初は AI で力任せにマイグレーションを進めたのですが、抜け落ちたり変質したルールがたびたび発生したので、一つひとつ見直そうかと悩んでいました。
oxc でサポートされているルールを抽出するスクリプトを AI で作成し、oxc でサポートされていないルールだけを ESLint で有効化するように改善しておいたところ、今では新たにサポートされるルールを定期的に更新するのも楽になりました...

初期には上の過程は半自動化でしたが、今では Skill として定義してあり、Claude Code で実行すればよいので負担も少なくなって良かったです

[chamchi]

eslint と prettier の代わりに oxlint と oxfmt を使ってみる考えはありませんか？
config を 1対1 で対応しつつ、速度は少なくとも数十倍速くなります