導入
よくプロジェクトで、結構開発中にLinterを実行せずにGitにプッシュされ、実はソースコードのインデントやルールがめちゃくちゃに...という経験のある方に必見です。
今回は、Next.jsのプロジェクトでtsxおよびtsファイルを対象に、Gitコミット時にLinterを自動実行し、ルールに合致しない場合にコミットを防ぐ設定方法を紹介します。
使用するツールは、huskyとlint-staged、およびESLintの3点です。
手順
前提
- Node.jsとnpmがインストールされていること
- Gitがインストールされており、プロジェクトがGitで初期化されていること
1. huskyとlint-stagedのインストール
ターミナルを開き、以下のコマンドを実行してhuskyとlint-stagedをインストールします。
これらはコードの品質を保つためにGitフックを使ってコミット時に自動でコードチェックやフォーマットを行うためのツールです。
huskyについて
Gitフックを簡単に管理・設定できるツールです。
Gitフックには以下の種類があります。
- pre-commit: コミット前に実行
- pre-push: プッシュ前に実行
- commit-msg: コミットメッセージの検証
lint-stagedについて
Gitのステージングエリアに追加されたファイルに対してのみLintやフォーマットを実行するツールです。
全体のファイルではなく、変更されたファイルのみに対して処理を行うため、効率的です。
これらのインストールは以下のコマンドで実行します。
npm install --save-dev husky lint-staged
2. huskyの初期設定
以下のコマンドで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
3. package.jsonにlint-stagedの設定を追加
package.jsonファイルに以下のlint-stagedの設定を追加します。
tsxおよびtsファイルに対してeslintを実行する設定です。
{
"lint-staged": {
"*.{ts,tsx}": [
"eslint --fix"
]
}
}
4. ESLintのインストールと設定
ESLintがインストールされていない場合は、以下のコマンドでインストールします。
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react
次に、以下のコマンドでESLintの初期設定を行います。
npx eslint --init
ESLintの設定を行い、.eslintrc.jsonファイルを生成しておきます。
5. 動作確認
わざとLinterルールに合致しないソースコードを作成し、通常通り、Gitコミットを発行してみましょう。
Linterルールに違反している場合、エラーメッセージが表示され、コミットがブロックされます。
最後に
この手順に従えば、Next.jsプロジェクトでtsxおよびtsファイルに対して、コミット時にLinterが自動的に実行され、ルールに合致しない場合にコミットをブロックすることができます。
これにより、コード品質を維持しやすくなります。
ぜひ試してみてください。