ESLint / Prettier 設定ガイド

インストール

必要パッケージをインストールします。Next.jsプロジェクトには eslint-config-next が推奨です。

ESLint 設定（eslint.config.js）

ESLint v9（Flat Config形式）での設定です。Next.js 15以降はこの形式がデフォルトです。

Prettier 設定（.prettierrc）

チームで統一するスタイルを定義します。迷ったらこの設定をそのまま使えます。

VS Code 設定（保存時に自動フォーマット）

保存時に自動でLint修正とフォーマットが実行されるように設定します。

package.json スクリプト

CIやコミット前チェックで使うスクリプトを追加します。

コミット前の自動チェック（Husky + lint-staged）

コミット前にESLint・Prettierを自動実行し、問題のあるコードがリポジトリに入るのを防ぎます。

lint-staged 設定

コミット対象のファイルだけにlintとフォーマットを実行します。プロジェクト全体より高速です。

よくある問題と解決策

設定時にはまりやすいポイントをまとめました。