Node16.20.2環境でhusky+lint-stagedを使ってlinterを自動化する(no use prettier)

背景

Gitへのコミット時に、linterのルールに則ってないコードを弾きたい。
業務でNode16.20.2指定の環境だったので、最新の導入記事が参考にならない。
また、巷の記事ではセットでprettierを使って自動整形をしているが、意図しない変更が加わるため無駄な変更を増やしたくない。
コードの整形はESlintでカバーできない範囲は手動で行いたいのでprettierは利用したくない。

使用モジュール(執筆当時の最新バージョン)

• husky@8.0.3(9.0.11が最新版)
• lint-staged@14.0.1(15.2.2が最新版)

ひとまずNode16に対応しているかで上記バージョンを選択

設定手順

1. モジュール類のインストール

$ npm i --save-dev lint-staged@14.0.1
$ npm i --save-dev husky@8.0.3

2. huskyのセットアップ

下記サイトが参考になった。ありがとうございます。

1. Git hooksの有効化

   $ npx husky install
   

2. npm installをトリガーとしてhusky installを実行するスクリプトを用意する
   これをすることにより自分以外のプロジェクトメンバーは、 npm installするだけで同時に husky insatllも実行されるようになるらしい

   $ npm pkg set scripts.prepare="husky install"
   

   実行するとpackage.jsonに下記のような記述が追加される

   {
     "scripts": {
       "prepare": "husky install" //追加されたとこ
     },
     "dependencies": {
       ...
     },
     "devDependencies": {
       ...
     }
   }
   

3. npm run prepareの実行
   husky installが実行されていないため下記を実行する

   $  npm run prepare
   

   これを実行すると.husky/ディレクトリが作成される
   ここからhuskyのスクリプトを作成する

4. Git Hooksをトリガーとして実行するコマンドを追加

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

   これを実行すると.husky/ディレクトリ配下にpre-commitファイルが作成され、その末尾にコマンドが追記されているのがわかる

3. lint-stagedのセットアップ

よく記事ではprettierを利用したコミット時の自動整形も行うことが多いが、今回は整形を手動で行うのでprettierは入れない。

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

   {
     "script": {
       "prepare": "husky install" //huskyセットアップで追加されたやつ
     },
     "dependencies": {
       ...
     },
     "devDependencies": {
       ...
     },
     "lint-staged": {
       "*.{tsx, ts}": "eslint --fix"
     }
   }
   

   これでコミット時、直前にESlintが走り、ルール違反がある場合は弾かれる。

参考