eslint-prettier-husky-config

ESLint、Prettier、Husky の設定

概要

ESLint v9（フラット設定）、Prettier、Husky の Git フック、lint-staged、CI の lint チェックを使用して、Next.js／React プロジェクト向けの包括的なコード品質ツールを設定します。

インストールと設定の手順

1. 依存関係をインストールする

ESLint v9、Prettier、Git フックに必要なパッケージをインストールします。

npm install -D eslint@^9 @eslint/js eslint-config-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y prettier husky lint-staged

TypeScript プロジェクトの場合は、次を追加します。

npm install -D @typescript-eslint/parser @typescript-eslint/eslint-plugin typescript-eslint

2. ESLint フラット設定を作成する

プロジェクトのルートに、assets/eslint.config.mjs のテンプレートを使用して eslint.config.mjs を作成します。このフラット設定形式では、次のことができます。

• 最新の ESLint v9 設定を使用する
• React、React Hooks、JSX アクセシビリティのルールを含める
• 型を考慮した lint により TypeScript をサポートする
• Next.js のビルドディレクトリと設定ファイルを無視する

プロジェクトのニーズに応じて設定をカスタマイズします。

• ECMAScript のバージョンに合わせて languageOptions.parserOptions を調整する
• チームの方針に合わせて rules を変更する
• 必要に応じてプラグインを追加する

3. Prettier の設定を作成する

プロジェクトのルートに、assets/.prettierrc のテンプレートを使用して .prettierrc を作成します。この設定では、次のように指定します。

• インデントを 2 スペースにする
• 文字列にシングルクォートを使用する
• 末尾のカンマを削除する
• 行の最大幅を 100 文字にする
• Unix の改行コードを使用する

チームのスタイルガイドに合わせて書式設定ルールを調整します。

assets/.prettierignore を使用して .prettierignore を作成し、次のものを除外します。

• ビルドディレクトリ（.next、dist、out）
• 依存関係（node_modules、package-lock.json）
• 生成ファイル
• 公開アセット

4. Husky と lint-staged を設定する

Git フック用に Husky を初期化します。

npx husky init

これにより、pre-commit フックを含む .husky/ ディレクトリが作成されます。

pre-commit フックの内容を次のように置き換えます。

npx lint-staged

references/package-json-config.md の例を使用して、package.json に lint-staged の設定を追加します。

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

これにより、コミットごとに、ステージングされたファイルに対して ESLint と Prettier が実行されます。

5. package スクリプトを追加する

package.json に次のスクリプトを追加します（完全な例については references/package-json-config.md を参照してください）。

{
  "scripts": {
    "lint": "eslint . --max-warnings 0",
    "lint:fix": "eslint . --fix",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "prepare": "husky"
  }
}

これらのスクリプトを使用すると、次のことができます。

• npm run lint - lint エラーをチェックする（警告がある場合も失敗します）
• npm run lint:fix - lint の問題を自動修正する
• npm run format - Prettier ですべてのファイルをフォーマットする
• npm run format:check - ファイルを変更せずにフォーマットをチェックする
• prepare - 依存関係のインストール時に Husky を自動的に設定する

6. GitHub Actions の lint ワークフローを作成する

assets/github-workflows-lint.yml のテンプレートを使用して、.github/workflows/lint.yml を作成します。このワークフローでは、次の処理を行います。

• プルリクエストと main/master へのプッシュ時に実行する
• コードをチェックアウトし、Node.js をセットアップする
• 依存関係をインストールする
• lint とフォーマットの両方をチェックする
• 問題が見つかった場合に CI を失敗させる

ワークフローをカスタマイズします。

• 必要に応じて Node.js のバージョンを調整する
• リポジトリに合わせてブランチ名を変更する
• CI の実行を高速化するためにキャッシュを追加する

7. 設定を確認する

設定全体をテストします。

1. lint チェック：npm run lint を実行して ESLint の設定を確認する
2. フォーマットチェック：npm run format:check を実行して Prettier の設定を確認する
3. pre-commit フック：変更を加えてコミットし、Husky と lint-staged をテストする
4. CI ワークフロー：ブランチにプッシュしてプルリクエストを作成し、GitHub Actions を確認する

設定上の問題があれば修正します。

• ESLint のエラーを確認し、必要に応じてルールを調整する
• すべてのファイルをフォーマットする：npm run format
• 設定変更をコミットする

8. チーム向けドキュメント

チームメンバー向けに設定を文書化します（テンプレートについては references/team-documentation.md を参照してください）。

• 各ツールの目的を説明する
• 新しい開発者向けにセットアップ手順を記載する
• フックを一時的に回避する方法を文書化する（緊急時のみ）
• よくある問題のトラブルシューティング手順を記載する

設定のカスタマイズ

ESLint ルール

eslint.config.mjs でルールの重大度を調整します。

• "off" - ルールを無効にします
• "warn" - 警告（CI は失敗しません）
• "error" - エラー（CI は失敗します）

よくあるカスタマイズ：

• 特定のルールを無効にする：'react/prop-types': 'off'
• ルールのオプションを調整する：'max-len': ['error', { code: 120 }]
• プロジェクト固有のルールを追加する

Prettier のオプション

.prettierrc でフォーマットを変更します。

• printWidth - 行の長さの上限
• tabWidth - インデントレベルごとのスペース数
• semi - セミコロンの設定
• singleQuote - 引用符のスタイル
• trailingComma - 末尾のカンマのルール

Lint-Staged の設定

package.json でコミット前のチェックをカスタマイズします。

• ファイル形式のパターンを追加する
• 追加のコマンド（テスト、型チェック）を含める
• どのファイルがどのリンターを実行するか調整する

型チェックを含む例：

{
  "lint-staged": {
    "*.{ts,tsx}": [
      "eslint --fix",
      "prettier --write",
      "tsc-files --noEmit"
    ]
  }
}

トラブルシューティング

既存コードで ESLint エラーが発生する場合：npm run lint:fix を実行し、その後 npm run format を実行すると、ほとんどの問題を自動修正できます。

Husky のフックが実行されない場合：Husky の初期化後に npm install を実行したことを確認してください。.husky/pre-commit に実行権限があることを確認してください。

CI は失敗するが、ローカルでは成功する場合：ローカルと CI で Node.js のバージョンが一致していることを確認してください。すべての依存関係が package.json に含まれていることを確認してください。

ESLint と Prettier の間で競合する場合：競合する ESLint のフォーマットルールを無効にするため、extends 配列の最後に eslint-config-prettier があることを確認してください。

リソース

scripts/

このスキルに実行可能なスクリプトは必要ありません。

references/

• package-json-config.md - すべてのスクリプトと lint-staged の設定を含む、完全な package.json の例
• team-documentation.md - チームメンバー向けのセットアップ説明のテンプレート

assets/

• eslint.config.mjs - React、TypeScript、Next.js に対応した ESLint v9 のフラット設定テンプレート
• .prettierrc - 推奨設定を含む Prettier の設定
• .prettierignore - フォーマット対象から除外するファイルとディレクトリ
• github-workflows-lint.yml - 自動 lint チェック用の GitHub Actions ワークフロー