linter-formatter-init

Linter Formatter Init

Biome 2.3+（デフォルト）、Vitest、Bunを使用して、JavaScript/TypeScript プロジェクトの lint、フォーマット、テストをセットアップします。

重要：常に最新の Biome 2.3+ を使用します。これより古いバージョンは使用しません。

契約

入力：

• 対象リポジトリ、および選択されたフォーマッター、テスト、フックのオプション

出力：

• 設定済みの品質管理ツールと変更内容の概要

作成／変更するもの：

• セットアップで選択された設定、スクリプト、依存関係のみ

外部への副作用：

• パッケージのインストールと、許可されたローカルでの検証

確認が必要な場合：

• 既存の設定を上書きする場合、または明示的に依頼されたセットアップの範囲外でツールをインストールする場合
• スキルを読み込んでも、追加の権限は付与されません。既存の明示的な承認が適用されるのは同じ対象と操作に限られます。報告のみの制限は維持してください。

委任先：

• なし

目的

このスキルで自動化するセットアップ：

• lint とフォーマット用の Biome（デフォルト、推奨）
• カバレッジ付きテスト用の Vitest（--vitest フラグを使用）
• ESLint + Prettier（レガシー、--eslint フラグを使用）
• コミット前フック用の Husky + lint-staged
• 保存時の自動フォーマット用 VS Code/Cursor 設定
• lint、フォーマット、テストを手動実行するための bun スクリプト

使用する場面

• 新しい JS/TS プロジェクトを始めるとき
• ツールが導入されていない既存プロジェクトに lint を追加するとき
• チーム全体でコード品質を標準化するとき
• 品質を徹底するためのコミット前フックをセットアップするとき

クイックスタート

# Default setup (Biome) - RECOMMENDED
python3 scripts/setup.py --root /path/to/project

# Add Vitest testing with 80% coverage threshold
python3 scripts/setup.py --root /path/to/project --vitest --coverage 80

# Use ESLint + Prettier instead (legacy)
python3 scripts/setup.py --root /path/to/project --eslint --typescript

--no-hooks、--monorepo、およびすべてのフラグの組み合わせについては、references/full-guide.md（§ Quick Start — Full Command Variants）を参照してください。

インストールされるもの

依存関係

Biome 2.3+（デフォルト）： @biomejs/biome@latest（常に最新、最低でも 2.3+）

Vitest（--vitest を指定）： vitest、@vitest/coverage-v8

ESLint + Prettier（レガシー、--eslint を指定）： eslint、prettier、eslint-config-prettier、eslint-plugin-prettier、および --typescript を指定した場合は @typescript-eslint/parser と @typescript-eslint/eslint-plugin

コミット前フック： husky、lint-staged

設定ファイル（Biome - デフォルト）

project/
├── biome.json              # Biome config (lint + format)
├── .vscode/settings.json   # Auto-format on save
├── .husky/pre-commit       # Pre-commit hook
└── package.json            # Updated with scripts + lint-staged

ESLint + Prettier（レガシー）では、同等の .eslintrc.json / .prettierrc の構成が生成されます。詳細は references/full-guide.md（§ Configuration Files (ESLint + Prettier - Legacy)）を参照してください。

追加される Bun スクリプト

Biome では lint、lint:fix、format、format:check、check、check:fix が追加されます。Vitest では test、test:watch、test:coverage、test:ui が追加されます。ESLint + Prettier（レガシー）では lint、lint:fix、format、format:check が追加されます。正確なスクリプトコマンドは references/full-guide.md（§ Bun Scripts Added）を参照してください。

Biome 設定（デフォルト）

Biome は高速なオールインワンの linter／フォーマッターです。デフォルト設定では、推奨 lint ルール、2 スペース／100 文字のフォーマット、シングルクォート、organizeImports が有効になります。biome.json の全設定は references/full-guide.md（§ Biome Configuration (Default)）を参照してください。

セットアップ後、lint ルール、フォーマット設定、ファイルの無視パターンを調整するには、biome.json をカスタマイズしてください。

Vitest 設定（--vitest を指定）

--vitest フラグを指定すると、vitest.config.ts（node/jsdom 環境、v8 カバレッジ、デフォルトのしきい値 80%）と、グローバルなテストセットアップ用の src/test/setup.ts が作成されます。両ファイルの全内容は references/full-guide.md（§ Vitest Configuration (with --vitest)）を参照してください。

カバレッジのしきい値は --coverage 90 でカスタマイズできます。

コミット前フック

有効な場合（デフォルト）、lint-staged はコミットのたびに実行されます。

Biome： *.{js,jsx,ts,tsx,json,css} → bunx biome check --write

ESLint + Prettier（レガシー）： *.{js,jsx,ts,tsx} → eslint --fix、prettier --write；*.{json,md,yml,yaml} → prettier --write

これにより、コミットされるすべてのコードが lint を通過してフォーマットされ、壊れたコードがリポジトリに入らないようにします。

VS Code / Cursor 連携

このスキルは、Biome（デフォルト）または Prettier/ESLint（レガシー）をデフォルトのフォーマッターとして使用し、保存時のフォーマットを有効にする .vscode/settings.json を作成します。両方の設定の全内容は references/full-guide.md（§ VS Code / Cursor Settings）を参照してください。

ESLint + Prettier ではなく Biome を選ぶ理由

• 高速：Rust で記述されており、ESLint + Prettier より 10〜100 倍高速です
• シンプル：2 つではなく 1 つのツールで、設定ファイルも 1 つです
• 競合なし：eslint-config-prettier などの回避策は不要です
• 優れたデフォルト設定：すぐに使える適切なルールが設定されています

モノレポのサポート

ルートから python3 scripts/setup.py --root /path/to/monorepo --monorepo を実行してください。すべてのパッケージに適用されるルートレベルの設定が追加されます。

トラブルシューティング

pre-commit フックが実行されない

bunx husky
chmod +x .husky/pre-commit

保存時のフォーマットが機能しない（Biome）

1. VS Code/Cursor に Biome 拡張機能をインストールします
2. Biome を既定のフォーマッターに設定します
3. 設定で「保存時にフォーマット」を有効にします

保存時のフォーマットが機能しない（ESLint + Prettier）

1. VS Code/Cursor に Prettier 拡張機能をインストールします
2. Prettier を既定のフォーマッターに設定します
3. 設定で「保存時にフォーマット」を有効にします

フレームワーク固有の設定（ESLint モードのみ）

--eslint を使用すると、このスキルは一般的なフレームワークを検出し、設定を調整します。

• Next.js：ESLint に next/core-web-vitals を追加します
• React：eslint-plugin-react と eslint-plugin-react-hooks を追加します
• NestJS：デコレーターと DI パターンのルールを追加します

手動セットアップ（代替方法）

スクリプトではなく手動でセットアップする場合：

# Biome
bun add -D @biomejs/biome husky lint-staged
bunx biome init && bunx husky

ESLint + Prettier の手動手順については、references/full-guide.md（§ 手動セットアップ（セットアップスクリプトの代替方法））を参照し、その後 assets/configs/ から設定をコピーしてください。