やりたいこと
- git commitする前にファイルをeslintとかして整形したい
huskyとlint-stagedについて
- huskyはGit hooksが簡単にできるソフトウェア
- これだけを使えばおそらくやりたいことが実現できるが、これだけでは、すべてのファイルに対してeslintしちゃう(重い)
- lint-stagedというソフトウェアも組み合わせる
- これでgitでstageされているファイルのみが対象になる(はず)
注意点
- huskyはv6以降で大きく記載が変わっているようです。
- 今回はv6以降でいきます
- また、node 12以上が要求されましたので、今回nodeあげました
環境
$ node -v v14.18.0 $ npm -v 6.14.15
参考
以下のサイト参考にさせていただきました。ありがとうございます。
husky, lint-stagedをインストールする
$ npm install -D husky lint-staged
package.jsonにlint-stagedで実施する処理を記載する(今回はeslintとprettierしたい)
"lint-staged": { "*.{ts,vue}": [ "eslint --fix", "prettier --write" ] },
これでts,vueに対してeslint,prettierしてくれる
また、今回はlint-staged
というコマンドを使ってlint-staged
を起動するようにするので、以下も追加
"scripts": { "lint-staged": "lint-staged", },
huskyつかっての設定ファイルの作成
- husky v6以降はhusky installコマンドを使って設定ファイルを作成する
$ npx husky install
上記コマンドを.gitディレクトリが存在するディレクトリで実行する。
ただし、.gitディレクトリにpackage.jsonがない場合(今回がそうだった)、インストール用のディレクトリを別途指定してやる必要がある
$ npx husky install src/.husky
このような感じで。(これでsrc/.huskyディレクトリに設定ファイルが作成される)
これでhuskyの初期設定は完了
pre-commit時に実行したいコマンドの設定
$ npx husky add .husky/pre-commit "npm run lint-staged"
これで準備完了
実際にコミットする
git commit
コマンドを実施したときに、コミットメッセージを書く前にpre-commitが動く