導入

よくプロジェクトで、結構開発中にLinterを実行せずにGitにプッシュされ、実はソースコードのインデントやルールがめちゃくちゃに...という経験のある方に必見です。

今回は、Next.jsのプロジェクトでtsxおよびtsファイルを対象に、Gitコミット時にLinterを自動実行し、ルールに合致しない場合にコミットを防ぐ設定方法を紹介します。
使用するツールは、huskyとlint-staged、およびESLintの3点です。

手順

ターミナルを開き、以下のコマンドを実行してhuskyとlint-stagedをインストールします。
これらはコードの品質を保つためにGitフックを使ってコミット時に自動でコードチェックやフォーマットを行うためのツールです。

huskyについて

Gitフックを簡単に管理・設定できるツールです。
Gitフックには以下の種類があります。

lint-stagedについて

Gitのステージングエリアに追加されたファイルに対してのみLintやフォーマットを実行するツールです。
全体のファイルではなく、変更されたファイルのみに対して処理を行うため、効率的です。

これらのインストールは以下のコマンドで実行します。

npm install --save-dev husky lint-staged

以下のコマンドでhuskyのGitフックをセットアップします。

npx husky install

次に、Gitのコミット前にlint-stagedを実行するように設定します。

npx husky add .husky/pre-commit "npx lint-staged"

.husky/pre-commitファイルに以下の内容が追加されます。

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

npx lint-staged

package.jsonファイルに以下のlint-stagedの設定を追加します。
tsxおよびtsファイルに対してeslintを実行する設定です。

package.json

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

ESLintがインストールされていない場合は、以下のコマンドでインストールします。

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react

次に、以下のコマンドでESLintの初期設定を行います。

npx eslint --init

ESLintの設定を行い、.eslintrc.jsonファイルを生成しておきます。

わざとLinterルールに合致しないソースコードを作成し、通常通り、Gitコミットを発行してみましょう。
Linterルールに違反している場合、エラーメッセージが表示され、コミットがブロックされます。

この手順に従えば、Next.jsプロジェクトでtsxおよびtsファイルに対して、コミット時にLinterが自動的に実行され、ルールに合致しない場合にコミットをブロックすることができます。
これにより、コード品質を維持しやすくなります。
ぜひ試してみてください。