Use Biome for Linting and Formatting

コンテキスト

JavaScriptプロジェクトにおいて、コード品質の維持と一貫性のあるコードスタイルの確保は重要な課題である。従来、これらの要件を満たすために複数のツール（ESLint、Prettier、その他のプラグイン）を組み合わせて使用してきたが、以下の問題が発生していた。

ESLintとPrettierの設定が競合し、調整に時間がかかる
複数ツールの実行により、CI/CDパイプラインの実行時間が長い
各ツールの設定ファイルが分散し、メンテナンスが煩雑
パフォーマンスの問題により、大規模プロジェクトでの開発体験が低下
依存関係が多く、node_modulesのサイズが肥大化

高速で統一的なツールによる開発体験の向上が求められている。

決定事項

LinterとFormatterの統合ツールとしてBiomeを採用する。ESLintとPrettierの役割を単一のツールで代替し、設定の簡素化とパフォーマンスの向上を実現する。

選択肢

選択肢1: Biome（採用案）

利点:
- Rustで実装されており、ESLint + Prettierと比較して非常に高速
- LinterとFormatterが統合されており、設定の競合がない
- 設定ファイルが単一（biome.json）でシンプル
- メモリ使用量が少ない
- インクリメンタルな処理により、変更されたファイルのみを高速に処理
- TypeScriptとJavaScriptを標準でサポート
- VSCode拡張機能による優れたエディタ統合
欠点:
- ESLintプラグインのエコシステムが使用できない
- 一部のESLintルールが未実装
- 比較的新しいツールのため、コミュニティが小さい
- カスタムルールの作成が困難

選択肢2: ESLint + Prettier（従来型）

利点:
- 成熟したエコシステムと豊富なプラグイン
- カスタムルールの作成が容易
- 広範なコミュニティサポート
- 詳細な設定カスタマイズが可能
欠点:
- 実行速度が遅い（特に大規模プロジェクト）
- ESLintとPrettierの設定競合の解決が必要
- 複数の設定ファイルの管理が煩雑
- 依存関係が多い

選択肢3: Deno Lint + Deno Fmt

利点:
- 高速な実行速度
- Denoランタイムとの統合
- シンプルな設定
欠点:
- Node.jsプロジェクトとの互換性に課題
- カスタマイズオプションが限定的
- エコシステムが小さい

選択肢4: Rome（Biomeの前身）

利点:
- Biomeと同様のコンセプト
- 統合ツールアプローチ
欠点:
- 開発が停止し、Biomeにフォークされた
- メンテナンスされていない
- 新機能の追加がない

結果

この決定による影響を記述する。

ポジティブな影響:
- 開発環境の設定時間が短縮される
- CI/CDパイプラインの実行時間が改善される（Rustベースの高速処理により）
- 設定ファイルの管理がシンプルになる
- 開発者体験が向上（高速なフィードバック）
- プロジェクトの依存関係が削減される
ネガティブな影響:
- 既存のESLintカスタムルールの移行が必要
- チーム全体での学習コストが発生
- 一部の高度なリントルールが使用できない
リスク:
- Biomeのプロジェクトが継続的にメンテナンスされるかの不確実性
- 特定のESLintプラグインに依存している場合の移行困難性
- エコシステムの成熟度による制約

実装ガイドライン

基本設定

{
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "style": {
        "useConst": "error"
      }
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 80
  },
  "organizeImports": {
    "enabled": true
  },
  "files": {
    "ignore": ["dist/", "node_modules/"]
  }
}

移行手順

Biomeのインストール
既存のESLint/Prettier設定からBiome設定への変換
CI/CDパイプラインの更新
エディタ設定の更新（VSCode拡張機能など）
段階的な適用とチームへの教育

VSCode設定

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