Prettier統合スキル

概要

ESLintとPrettierの統合とフォーマット自動化の専門知識。責務分離、競合解決、エディタ統合、保存時自動実行を設計します。

ワークフロー

Phase 1: 初期セットアップ

目的: Prettierをプロジェクトに導入し、基本設定を確立

アクション:

1. references/basics.md で基本概念を確認
2. agents/setup-prettier.md のTask仕様に従ってセットアップを実行
3. assets/prettierrc-base.json を参照して設定ファイルを作成

成果物: .prettierrc.json, .prettierignore, package.jsonスクリプト追加

Phase 2: 競合解決

目的: ESLintとPrettierのルール競合を解決

アクション:

1. references/conflict-resolution.md で競合パターンを確認
2. agents/resolve-conflicts.md のTask仕様に従って競合を解決
3. eslint-config-prettierで自動無効化を実施

成果物: 競合のないESLint設定

Phase 3: エディタ統合

目的: 保存時自動フォーマットを実現

アクション:

1. references/editor-integration.md でエディタ別パターンを確認
2. agents/integrate-editor.md のTask仕様に従って統合を実施
3. assets/vscode-settings.json を参照して設定

成果物: エディタ設定ファイル、保存時自動フォーマット動作確認

Phase 4: 検証と記録

目的: セットアップ完了を検証し、フィードバックを記録

アクション:

1. scripts/format-check.mjs でフォーマット検証を実行
2. scripts/log_usage.mjs で実行記録を保存

Task仕様（ナビゲーション）

詳細仕様: 各Taskの詳細は agents/ ディレクトリの対応ファイルを参照

ベストプラクティス

すべきこと

• ESLintとPrettierを統合する時は責務分離を明確にする
• フォーマットルールの競合を解決する時はeslint-config-prettierを使用
• エディタでの保存時自動フォーマットを設定する時はエディタ固有のパターンに従う
• デフォルト設定を優先し、カスタマイズは最小限にとどめる
• チーム全体で同じ設定を共有する

避けるべきこと

• ESLintのstyling rulesとPrettierルールを重複設定しない
• 手動フォーマットと自動フォーマットを混在させない
• CI/CDパイプラインなしで本番環境にPrettierを導入しない
• アンチパターンや注意点を確認せずに進めない

リソース参照

references/（詳細知識）

scripts/（決定論的処理）

assets/（テンプレート）

主要概念

責務分離の原則

ESLint 役割:

• コード品質の検証
• バグの検出
• ベストプラクティスの強制

Prettier 役割:

• コードフォーマットの統一
• スタイルの自動修正
• チーム全体のコード一貫性

統合戦略

1. eslint-config-prettier使用: Prettierと競合するESLintルールを自動無効化
2. 実行順序の制御: Prettier → ESLint --fix の順で実行
3. エディタ統合: 保存時に自動フォーマットを実行
4. CI/CD統合: PRレビュー時にフォーマットチェックを実施

クイックスタート

1. Prettierインストール

pnpm add -D prettier eslint-config-prettier

2. Prettier設定作成

.prettierrc.json:

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5"
}

3. ESLint設定更新

.eslintrc.json:

{
  "extends": ["eslint:recommended", "prettier"]
}

4. package.jsonスクリプト追加

{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

5. VS Code設定

.vscode/settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

トラブルシューティング

ESLintとPrettierの競合

症状: ESLintエラーを修正するとPrettier警告が出る

解決:

1. eslint-config-prettier をインストール
2. .eslintrc.json の extends 最後に "prettier" を追加
3. 競合チェック: npx eslint-config-prettier .eslintrc.json

保存時フォーマットが動作しない

症状: ファイル保存時に自動フォーマットされない

解決:

1. Prettier拡張機能がインストールされているか確認
2. .vscode/settings.json で editor.defaultFormatter を設定
3. .prettierrc がプロジェクトルートにあるか確認

lint-stagedでエラー

症状: pre-commit hookが失敗する

解決:

{
  "lint-staged": {
    "*.{ts,tsx,js,jsx}": ["prettier --write", "eslint --fix"]
  }
}

変更履歴