husky、lint-stagedと連携してコミット前にフォーマットを実行する方法
husky、lint-stagedと連携してコミット前にフォーマットを実行するには以下のようにします。
$ npm install --save-dev husky lint-staged # husky, lint-stagedのインストール
$ npm list | grep -e husky -e lint-staged # バージョンの確認
├── husky@7.0.4
├── lint-staged@12.3.2
$ npx husky install # Git hooksを有効にする
husky - Git hooks installed
$ ls -a .husky/_/ # .huskyディレクトリが作成される
. .. .gitignore husky.sh
$ npm set-script prepare "husky install" # 今後npm install後にGit hooksを有効にするように設定を追加する
$ cat package.json # package.jsonに下記行が追加される
(省略)
"prepare": "husky install"
(省略)
$ npx husky add .husky/pre-commit "npx lint-staged" # npx lint-stageを実行するhookを作成する
husky - created .husky/pre-commit
$ cat .husky/pre-commit # pre-commitファイルが作成される
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged
$ vi package.json # package.jsonを編集してprettierを実行する設定を追加する
{
(省略)
"lint-staged": {
"**/*": "prettier --write --ignore-unknown"
}
(省略)
}
$ git add src/App.tsx # 適当なファイルを編集してadd
$ git commit -m "test commit" # commitするとコミット前にaddしたファイルに対してフォーマットが自動で実行される
✔ Preparing lint-staged...
✔ Running tasks for staged files...
✔ Applying modifications from tasks...
✔ Cleaning up temporary files...
[main 2124a22] Keep calm and commit
1 file changed, 1 insertion(+), 1 deletion(-)