一つのリポジトリで、例えばfrontとback_endとディレクトリを作成してそれぞれでソースコードを管理している場合に、huskyを適用してコミット時に特定のコマンドを実行させる手順をまとめました。

今回は、コミットされるたびに、eslint, prettierのチェックをするようにします。

手順はこちらにあるものをほぼそのまま実行した感じになります。 Using Husky Git Hooks and Lint-Staged With Nested Folders

ディレクトリ構成は以下と仮定します。

├── /front
│   ├── ...
│   └── package.json
└── /back_end
    ├── ...
    └── package.json

front側にhuskyを設定していきます。

1. huskyインストール

$ cd front

# npm の場合
$ npm install -D husky lint-staged

# yarn の場合
$ yarn add -D husky lint-staged

2. package.jsonmのscriptsにprepareを追加

{
  "scripts": {
      // other scripts omitted 
      "prepare": "cd ../ && husky install ./front/.husky"
   }
}

front の部分が、ネストしているディレクトリのパスになります。

3. pre-commitの作成

$ cd front/.husky
$ touch pre-commit

コミット時にコマンドを実行されるようにするため、pre-commitを.huskyディレクトリ内に作成。 中身は以下。

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
cd ./front && npx lint-staged

front の部分が、ネストしているディレクトリのパスになります。

4.実行権限追加

$ chmod +x ./.husky/pre-commit

5. .lintstagedrcファイル作成

$ cd front
$ touch .lintstagedrc

中身は以下。

{
  "*.{js,ts,tsx,scss,css,md}": ["eslint", "prettier --write"]
}

これで、コミットされる度に、huskyを使ったeslint, prettierのチェックが走るようになります。