【husky】モノレポにhuskyを導入する【ESLint】【Prettier】

モノレポにhuskyを導入する方法

huskyをインストール

.gitがあるディレクトリでhuskyをインストールします。

ターミナル

$ npx husky install
Need to install the following packages:
  husky
Ok to proceed? (y) y
husky - Git hooks installed

.husky/pre-commitを作成

上記と同じディレクトリで.husky/pre-commitを作成します。

ターミナル

$ npx husky add .husky/pre-commit "cd frontend && yarn lint-staged"
husky - created .husky/pre-commit

すると以下のようになります。

pre-commit

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

cd next-tailwind && yarn lint-staged

lint-stagedなどをインストール

以降プロジェクトのディレクトリで作業を行います。
lint-staged, ESLint, Prettierをインストールします。

ターミナル

$ yarn add -D husky lint-staged eslint-config-prettier
$ yarn add -D --exact prettier

lint-stagedの設定

lint-stagedの設定をします。
package.jsonに以下を追記します。

package.json

{
  ...

  "lint-staged": {
    "*.{js,ts,tsx, jsx}": [
      "eslint --quiet --fix"
    ],
    "*.{json,md,html,js,jsx,ts,tsx}": [
      "prettier --write"
    ]
  },

  ...
}

ESLint, Prettierの設定

.eslintrc.jsonや.prettierrc.jsonなどを作成しESLint及びPrettierの設定を行います。

動作確認

git commitして確認します。

ターミナル

$ git add .

$ git commit -m "test"
✔ Preparing lint-staged...
✔ Running tasks for staged files...
✔ Applying modifications from tasks...
✔ Cleaning up temporary files...
[main 8068baf] test
 312 files changed, 17269 insertions(+), 3 deletions(-)