Prettier:husky、lint-stagedと連携してコミット前にフォーマットを実行する方法

スポンサーリンク

husky、lint-stagedと連携してコミット前にフォーマットを実行する方法

huskylint-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(-)