NestJS導入 husky編

おはようございます！スペースマーケットの小見と申します。
Nestjsを導入しようと調査及びプロトタイプの作成に取り組んでおります。
Nestjsの記事があまりにも少なかったので、自分が詰まったところと
綺麗じゃないかも知れませんがその解決法を定期的に配信できればと思います。

ということで今回は、huskyによるコミット時のlintやtestの実行について書かせていただきます。
また、lint-stagedと組み合わせたコミット対象にのみを対象とする方法をお送りします。

※この記事は基本的にyarnで書かせておりますのでその点ご注意ください。

※今回利用するのはバージョン6を使います。以前のバージョンとファイルの設定など大幅に異なりますのでその点ご注意ください。

huskyとは

パッケージの一つでプロジェクトに設定を行っておくとコミット時に動作しておきたい設定を呼び出してくれてフォーマットやテストを自動的に行う事が出来ます。

準備

基本は公式ドキュメントを追っかけます。

以下コマンドでインストール及びファイルの設置を行います。
.husky/pre-commitというファイルが主に使うファイルです。

npx husky-init && yarn 

設定

huskyで行うlintなどのコマンドを設定します。

前述のコマンドで作成された.husky/pre-commitを確認すると以下のようになっております。

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

npm test

最初の２行は無視して、npm testがコミット時に実行されるコマンドです。
このコマンドでエラーが発生すればコミットを中断してくれる用になります。
ですので、ここを以下のように設定すると自動的にフォーマッターが走って整形をしてくれるようになります。（フォーマッターの設定はnest標準とします。）

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

yarn run lint

コミット対象だけをpre-commit

さて、ここまででコミット前にフォーマットを実施することが出来ましたが、このままの設定では、プロジェクト全体にフォーマットが走ってしまいプロジェクトが大きくなるにつれてコミットが遅くなる懸念があります。
そこで、lint-stagedと言うパッケージを利用して、コミット対象のみにフォーマットを充てる方法を追加します。

以下コマンドでインストールを行ってください。

yarn add -D lint-staged

これによってyarn lint-stagedコマンドが実行可能になるので、
pre-commitに設定を行います。

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

yarn lint-staged

これによってコミット時に呼び出されるコマンドがlint-stagedになりました。
では、次にlint-stagedで実行する内容の設定を行って行きます。
package.jsonファイルに実行内容を追記します。

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

"*.{js,jsx,ts,tsx,json}"部分が実行対象の拡張子で、入れ子になっている
"eslint --fix"が実行コマンドとなります。
lint-stagedでは恐らく"eslint --fix"コマンドの後ろに、
コミット対象のファイルを指定してくれる機能が備わっており、
app.module.tsファイルをコミットする時は、
eslint --fix app.module.tsの様なコマンドが走っていると思われます。
注意しなければ行けないポイントとして、ここで"yarn lint"と設定してしまうと、package.jsonに設定されているプロジェクト全体へのフォーマットが走ってしまうので素のeslintを記述するようにしてください。
また、git addを記述している記事もありますが、これは不要でlint-stagedで対象となっているファイルは自動的にgit addされる様です。

まとめ

ひよっこな自分にとっては、huskyの６系記事があまりにも無く
何をしてよいか分からず手探りで半日〜１日程度消化してしまいました。
またlint-stagedの解決が手こずり、ずっとyarn run lintを行っていたため、
コミット対象個別のフォーマットを充てる事が出来ませんでした。
同じ壁にぶつかってる方の手助けになれば幸いです。

最後に宣伝させて下さい。
スペースマーケットでは、エンジニアを募集中です。
スペースシェアが当たり前になる世界観を目指して日々開発を進めています。プロダクトにご興味があれば是非、下記リンクよりご応募お待ちしております。

お仕事や作業に集中できるスペースをワークルームと言うカテゴリで検索出来るようになりました。
出先で少し作業したい場合などに便利なので機会あれば見てみて下さい。

【個室/電源/Wi-Fi】人気のワークルーム | スペースマーケットWORK