biome-js

BiomeJS スキル

Sablier プロジェクトのパターンに基づいた、BiomeJS の設定に関する簡単なガイダンスです。

基本概念

共有設定の拡張

npm パッケージのエクスポートを通じて共有設定を拡張します。利用するプロジェクトでは、必ず独自の files.includes を指定してください。

{
  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
  "extends": ["@sablier/devkit/biome"],
  "files": {
    "includes": ["**/*.{js,json,jsonc,ts}", "!node_modules/**/*"]
  }
}

UI プロジェクトでは、base と ui の両方の設定を拡張します。

{
  "extends": ["@sablier/devkit/biome/base", "@sablier/devkit/biome/ui"],
  "files": {
    "includes": ["**/*.{css,js,jsx,json,jsonc,ts,tsx}"]
  }
}

モノレポの継承

モノレポでは、ワークスペースの設定は "//" を使用してルートから継承します。

// packages/my-package/biome.jsonc
{
  "extends": ["//"],
  "overrides": [
    // package-specific overrides
  ]
}

ファイルのインクルードパターン

files.includes は必ず明示的に指定してください。一般的なパターンは次のとおりです。

プロジェクトの種類	パターン
ライブラリ	**/*.{js,json,jsonc,ts}
UI／フロントエンド	**/*.{css,js,jsx,json,jsonc,ts,tsx}
GraphQL を使用	**/*.{css,graphql,js,jsx,json,jsonc,ts,tsx}

除外対象：!node_modules/**/*、!**/generated、!dist

一般的なオーバーライド

テストファイル

テストファイルでは厳格なルールを緩和します。

{
  "overrides": [
    {
      "includes": ["**/tests/**/*.ts", "**/*.test.ts"],
      "linter": {
        "rules": {
          "style": {
            "noNonNullAssertion": "off"
          },
          "suspicious": {
            "noExplicitAny": "off"
          }
        }
      }
    }
  ]
}

生成ファイル／ABI ファイル

生成コードでは、ソートとコンパクトなフォーマットを無効にします。

{
  "overrides": [
    {
      "includes": ["**/abi/**/*.ts", "**/generated/**/*.ts"],
      "assist": {
        "actions": {
          "source": {
            "useSortedKeys": "off"
          }
        }
      },
      "javascript": {
        "formatter": {
          "expand": "never"
        }
      }
    }
  ]
}

インポートの制限

特定のモジュールに対して、バレルインポートを必須にします。

{
  "overrides": [
    {
      "includes": ["src/**/*.{ts,tsx}"],
      "linter": {
        "rules": {
          "correctness": {
            "noRestrictedImports": {
              "level": "error",
              "options": {
                "paths": {
                  "@/core": "Import from @/core (barrel) instead of subpaths"
                }
              }
            }
          }
        }
      }
    }
  ]
}

主なルールのリファレンス

ルール	デフォルト	理由
noFloatingPromises	error	未処理の Promise はバグの原因になります
noUnusedImports	off	開発中は許可し、コミット前にチェックします
noUnusedVariables	error	コードを整理された状態に保ちます
useImportType	warn (separatedType)	型のインポートを明示します
useSortedKeys	on	オブジェクトのキー順を統一します
useSortedClasses	warn (UI)	Tailwind クラスをソートします
useFilenamingConvention	kebab/camel/Pascal	柔軟な命名規則
noVoid	off	useEffect コールバックに便利です
useTemplate	off	文字列の連結を許可します

Git フックとの統合

Lint-Staged の設定

コミット前フックの標準的なパターンです。

// .lintstagedrc.js
module.exports = {
  "*.{json,jsonc,ts,tsx}": "bun biome check --write",
  "*.{md,yml,yaml}": "bun prettier --cache --write",
  "*.{ts,tsx}": "bun biome check --write --only=correctness/noUnusedImports",
};

noUnusedImports の個別パスでは、開発中ではなくコミット時にのみインポートの整理をチェックします。

UI 固有の設定

Tailwind CSS を使用するフロントエンドプロジェクト向けです。

{
  "css": {
    "parser": {
      "tailwindDirectives": true
    }
  },
  "assist": {
    "actions": {
      "source": {
        "useSortedAttributes": "on"
      }
    }
  },
  "linter": {
    "rules": {
      "nursery": {
        "useSortedClasses": {
          "fix": "safe",
          "level": "warn",
          "options": {
            "attributes": ["classList"],
            "functions": ["clsx", "cva", "cn", "tv", "tw"]
          }
        }
      }
    }
  }
}

Biome v2.4.0+ は *.module.css の CSS Modules 解析を自動的に有効にするため、プロジェクトで標準外の動作が必要な場合を除き、"cssModules": true を明示する必要は通常ありません。

Biome v2.4+ に関する注意事項

• biome check と biome ci は、対象を絞ったルール／アクションの実行に --only と --skip をサポートするようになりました。
• biome check --write は、修正を適用する際にフォーマットも適用するようになりました。
• 設定の検索で、隠しファイル .biome.json と .biome.jsonc もサポートされるようになりました。
• 設定の検索で、ユーザー設定ディレクトリ（例：Linux／macOS 相当の環境にある $HOME/.config/biome）もサポートされるようになりました。
• 新しいフォーマッターオプション formatter.trailingNewline を使うと、末尾の改行挿入を無効にできます。
• HTML フォーマッターの動作は v2.4.0 で大幅に変更されました。フォーマッターのサポートが有効な場合、HTML／Vue／Svelte／Astro では差分が大きくなることがあります。

トラブルシューティング

よくある問題

「No files matched」：files.includes のパターンがファイル構成に一致しているか確認してください。

ルールの競合：オーバーライドは順番に適用され、後のオーバーライドが優先されます。

スキーマエラー：IDE のサポートには、ローカルのスキーマ参照を使用してください。

"$schema": "./node_modules/@biomejs/biome/configuration_schema.json"

Biome と Prettier の比較

Biome は JS／TS／JSON／CSS のフォーマットを処理します。次の場合は Prettier を使用してください。

• Markdown（.md、.mdx）
• YAML（.yml、.yaml）

その他のリソース

例

./examples/ に動作する例があります。

• ./examples/base-config.jsonc - ライブラリの最小構成
• ./examples/ui-config.jsonc - Tailwind を使用するフロントエンドプロジェクト
• ./examples/lint-staged.js - コミット前フックの設定

ドキュメント全文

高度な機能、移行、またはルールの完全なリファレンスについては、Context7 MCP 経由で公式の Biome ドキュメントを参照してください。

Use context7 to fetch Biome documentation for [specific topic]

ここで説明されていない機能については、最後の手段として biomejs.dev の公式ドキュメントを参照してください。