simple-git-hooksとlint-stagedを使ってソースコードを健全に管理する
コードを保守する上で大切なことのひとつはフォーマッティングです。プロジェクトで定められたコード規約にしたがって書かれているのか、そんなものはなく各自で好きなように書いているのかではやはりコードの質に影響します。読みやすいコードはプログラマの理解を捗らせ、モチベーションを維持してくれるでしょう。では、そんな健全なソースコードを維持し続けるにはどのような取り組みをするのが良いのでしょうか?
package.json
に以下のようなスクリプトを登録しておき、各自で git add
をする前に実行するというのはひとつの案です。
"lint:fix": "prettier --write src",
しかしながら私達人間は仕様上忘れる生き物ですから、たまには忘れて git commit
をしてしまうかもしれません。commit した段階で気付ければ git commit --amend
などでサクッと直せますが、もし仮にも git push
なんてしようものなら取り返しが付きません。
そんな悩みを解決するのが simple-git-hooks
と lint-staged
の組み合わせです。
Git Hooks と simple-git-hooks
Git には Git Hooks という機能が存在します。詳細は Git Pro を読んでいただきたいのですが、雑に言うと git xxxx
の前後に処理を挟む機能です。つまり git commit
の直後に任意のフォーマッティングが自動で走るわけですね。これは最強。
Git Hooks は所詮シェルスクリプトですのでえっちらおっちら熟成させても良いわけですが、わざわざフォーマッタひとつ動かすためだけに .git
下をいじるなんてのは面倒くさいです(気をつけないといけないこともあるし)。なので、そこを楽に運用するために simple-git-hooks
を使います。名前の通りですね。これを使う場合は package.json
内に Git Hooks として登録したいコマンドを設定しておきます。
// package.json
{
// ...
"simple-git-hooks": {
"pre-commit": "npx prettier --write src"
},
// ...
}
あとは npx simple-git-hooks
を実行すれば .git/hooks/pre-commit
が更新され、git commit
を実行するとコードが整形されて commit されます。とっても素晴らしい。
lint-staged
もちろんこれで健全なソースコードを保持し続けることができるのですが、プロジェクトの規模が多くなると全体フォーマッティングに時間がかかるようになります。これまでのコードは当然整形済みですので、新たにステージングされたファイルのみ整形を適応することがもっとも効率良さそうです。そんな願いを叶えてくれるのが lint-staged
です。README.md の先頭に Run linters against staged git files and don't let 💩 slip into your code base!
とある通り、ステージングされたファイルに対してのみフォーマッティングをかけてくれます。もちろんフォーマッターは設定可能です、最強ですね。
prettier で整形する場合はこんな感じです。
// package.json
{
// ...
"lint-staged": {
"*": "prettier --ignore-unknown --write",
}
}
まとめ
これまでの情報を整理します。lint-staged
を使うとステージングされたファイルのみフォーマッティングすることが可能になります。そして、simple-git-hooks
を使うと git commit
の直前に自動で任意のコマンドを実行できます。つまり simple-git-hooks
を使って git commit
の直前に自動で lint-staged
を実行すれば git add
されたファイルのみ整形されるという流れを作ることができます。人類天才か???
ということでそんな設定を施した package.json
がこちらです。
{
// ...
"scripts": {
"prepare": "simple-git-hooks",
// ...
},
// ...
"lint-staged": {
"*": "prettier --ignore-unknown --write"
},
"simple-git-hooks": {
"pre-commit": "npx lint-staged"
},
// ...
}
一番最初に npx simple-git-hooks
を実行しないと Git Hooks として登録されません。なので、npm run prepare
とわかりやすいスクリプトを定義しておきました。もしこれ以外に初期設定が必要な場合は prepare
に書き足せばよいだけですからね。
では、健全なソースコード管理をお楽しみください。
余談
これを実装したら GitHub Action とかの CI でコードスタイルをチェックする部分を無くすことができるのかな?ここらへんはプロジェクトの好みになりますが……。