【Prettier, ESLint, Stylelint】コミットする前にフォーマットしたい【husky】
しばらく作業に没頭してからふとコミットすると、フォーマットを忘れてしまっていることがあります。これ自動化したいなと思っていたので調査しました。
huskyとlint-stagedというライブラリを使います。なお、この記事ではprettier, eslint, stylelingの設定は扱いません。
huskyのセットアップ
今回はpnpmを使っていますが、公式にnpmやyarnの場合ものっています。
pnpm dlx husky-init && pnpm install
するとルートディレクトリに.huskyディレクトリが作成され、huskyがpackage.jsonが追加されインストールされます。デフォルトでは.husky/pre-commitというファイルにnpm testのみ書かれた簡単なサンプルが作られます。コミット直前に自動で実行したいコマンドはここに書いていくようです。
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npm test
たとえば「コミット直前にprettierを走らせる」ならnpm testの部分をprettier --write .など動かしたいコマンドに書き換えます。わたしはlintのスクリプトを書いているのでpnpm run lintとしました。
lint-stagedのセットアップ
huskyのおかげで「あ、忘れてた…」がなくなったのですが、ちょっとした変更しかないのにコミットするたびに全てをlintするのは避けたいですよね。そのためにlint-stagedを使用します。公式のInstallation and Setupにそって進めます。
pnpm install -D lint-staged
そしてコミット直前に実行するためにhuskyに登録します。さきほどの.husky/pre-commitファイルを書き換え、
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
- npm test
+ pnpm exec lint-staged
これでlint-stagedがフックされます。
prettier, eslintなどはすでにセットアップされているものとして、lint-stagedの設定ファイルをつくります。
module.exports = {
'*': 'pnpm run lint',
}
拡張子別にコマンドを指定することができますが、今回はおなじコマンドにします。
参考
Discussion