🚀

【10分で導入】コミット時に自動で ESLint + Prettier を実行する

Taiki

2025/05/15に公開

概要

せっかく Prettier 導入したのに、全ファイル直すのは怖い（変更差分が大量に出る）。
でも毎回手動で対象ファイルを指定するのも面倒だったので、コミット時に「対象ファイルだけを自動でフォーマット」させる方法をまとめました。
同じような悩みを持っている人の参考になれば嬉しいです！

ゴール

コミット時、対象ファイルに自動で ESLint ＋ Prettier を走らせる。
差分があれば自動修正し、そのままコミット。

セットアップ

まずは必要なパッケージをインストールします。

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

インストールされるもの：

prettier
eslint-config-prettier（Prettierルール優先にする。ESLintとPrettierの衝突を防ぐため）
eslint-plugin-prettier（PrettierエラーもESLintで検出できるようにする）

このコマンドは、ESLint本体（eslint）がすでにインストールされていることを前提としています。
もしまだ ESLint を導入していない場合は、先に以下のコマンドでインストールしてください。

npm install --save-dev eslint

Prettierの設定を作る

.prettierrc ファイルを作成して、整形ルールを定義します。

touch .prettierrc

設定例👇

{
  "singleQuote": false,
  "semi": true,
  "tabWidth": 2,
  "printWidth": 120,
  "trailingComma": "all",
  "bracketSpacing": true
}

ESLint に Prettier を組み込む

ESLintの設定ファイルに、Prettierを連携させる設定を追加します。

// eslint.config.js
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
import prettier from 'eslint-plugin-prettier' // 追加

export default tseslint.config(
  { ignores: ['dist'] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
      'prettier': prettier, // 追加
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
      'prettier/prettier': 'error', // 追加
    },
  },
)

コミット前に Prettier を自動実行する仕組みを作る

husky & lint-staged をインストール

npm install --save-dev husky lint-staged
npx husky install
npm pkg set scripts.prepare="husky install"

pre-commitフックを設定

touch .husky/pre-commit

中身👇

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

lint-staged の設定を package.json に追加

// package.json
"lint-staged": {
  "src/**/*.{js,jsx,ts,tsx}": [
    "eslint --fix", // コード内容修正
    "prettier --write" // コードフォーマット
  ]
}

これで設定は完了！

動作確認してみる

適当に src/ 配下の .tsx ファイルで、
わざと Prettier/ESLint違反するようなコードを書いてみます。
例：
インデントをずらす
セミコロンを忘れる
シングルクォーテーションにするなど

この状態でコミットすると、、
自動でフォーマットされてコミットされる！

GitHubでの差分もこんな感じ！

コミット時の流れ

pre-commit フックが発動
lint-staged が対象ファイルをチェック
eslint --fix と prettier --write が走る
ファイルが自動整形される
コミット完了！

まとめ

意外と簡単に導入できたしコードフォーマット忘れがゼロになるのでおすすめですね！

株式会社イノベーション Tech Blog

業界最大級の法人向けIT製品比較サービス「ITトレンド」の運営会社、イノベーション開発チームの公式Tech Blogです！各記事の内容は個人の意見であり、企業を代表するものではございません。