【husky + lint-staged】コミット前にコードをチェックしてコードエラーを発見してみた

仕事ってどれくらいの規模で進めていますか？

おそらく完全に一人でやっているという方はいないのではないかなと思います。

Web制作で考えても複数人で同じリポジトリ内のファイルを触ること多いですよね。

ただ人それぞれ自分の書き方というものが多い。

なので気がつけばコードの統一性がなくバラバラ。

なんてことがあると思います。

今回はそんなことが起こらないように最初からルールを決めて逸脱しているものは自動で修正、もしくはエラーを吐いてコミットできないようにしてしまおうというツールの導入です。

Husky & lint-staged

今回使用するツールは「Husky」と「lint-staged」というツールになります。

ざっくり説明すると、Huskyはコミットする前に指定の動作を行うことができるツール、lint-stagedはgitにstageされているファイルをチェックするツールです。

この2つを連携させて、「コミットする前にstageされているファイルをチェックしてルールを守ってない書き方はエラーにする」という動作を行います。

インストール

インストールはいつものようにnpmもしくはyarnで行います。

npm i -D husky lint-staged
 
// or
yarn add -D husky lint-staged

注意してほしいのが、v6から大きく使用方法が変わっているということ。

古いバージョンの説明をしていることが多いので注意してください。

huskyの設定

では、まずhuskyの設定をします。

初期化コマンドを入力し、必要なファイルを作成してください。

npx husky init
 
// or
 
yarn husky init

そうすると.huskyというディレクトリが生成されていると思います。

それからpackage.jsonに以下を追記します。

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},

lint-stagedの設定

こちらも、package.jsonに追記します。

"lint-staged": {
  "*.{js,ts}": [
    "eslint --fix"
  ],
  "**/*.scss": [
    "stylelint --write"
  ]
},

はい、内容を見て何を行うか分かるかと思います。

今回はeslintとstylelintをコミット前に挟んでコードの修正を行ってからコミットを行うという流れになってます。

ですので、事前に両方のlinterはインストールを済ませてください。

installした際に自動でhuskyの設定も完了させる

2つの連携

では最後にこれらを連携させます。

以下のコマンドを入力し、新たなファイルを作成してください。

yarn husky add .husky/pre-commit 'yarn lint-staged'

完了すると、.huskyディレクトリにpre-commitというファイルが生成され、その中に実行コマンドが書かれていると思います。

現在のバージョンでは.pre-commitを手動、もしくは以下コマンドで入力します。

echo "npx lint-staged" > .husky/pre-commit

最初からテストコマンドが入っていますが、これは不要であれば削除して問題ありません。

これで設定完了です。

実際に試してみましょう。

いつもより少しcommitの時間がかかると思います。

ターミナルにもlintが走っているのを確認できますね。

以上で2つの連携は完了です。

まとめ

いかがだったでしょうか。

今回の記事も開発に必須ではないと思いますが、チームで進めるのであれば導入したほうがコードをきれいに保てて良いのではないかと思いました。

古いバージョンとかなり設定方法が変わるようになっていて僕はそこで少しハマったので誰かの助けになれればと思います。

参考サイト

• Husky Document
• 【2024/01最新】husky + lint-staged でコミット前にlintを強制する方法