More than 3 years have passed since last update.

【husky】commit時にESLintを、push時にJestを自動で走らせる

Last updated at 2021-02-12Posted at 2021-01-28

作成したNext.jsのプロジェクトにhuskyを用いて以下の機能を追加します。

huskyとは
コミットやプッシュの前にテストなどを実行して、失敗したら止めることができる Git hooks を簡単に設定することがツール。

導入手順

※この記事ではhuskyの導入について説明していきます。

参考までに僕が実際に作成したリポジトリでございます。
↓
https://github.com/yuyaamano23/husky_nextJS

以下の記事を参考にNext.jsのプロジェクトにESLint,Jestを導入させていただきました。🙏🙏🙏
2020年師走における Next.js をベースとしたフロントエンドの環境構築

※以下yarnを使用したhuskyの導入についての説明をしていきます。

①lint-stagedの導入

$ npx mrm lint-staged

②NPM スクリプトに追加

package.json

{
  "scripts": {
    "lint-staged": "lint-staged"
  }
}

③husky の追加

$ yarn add -D  husky@next

④Git hooks の有効化

$ yarn husky install

⑤package.jsonに追加

package.json

・・・・・・
 "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "pre-push": "yarn test"
    }
  }
・・・・・・・

以上です。

git commit -m "<message>"を入力してESLintが走った様子↓

git pushを入力してJestが走った様子↓

.git/hooksが正常に作成されていない可能性があります。
以下コマンドで確認しましょう。

$ ls -la .git/hooks/ls -la .git/hooks/

.sampleしかなかったら再度huskyをインストールしましょう。

$ yarn remove huksy

エラーについてこの記事で救われました。
huskyのpre-commitで設定したlintチェックがVSCodeのGUIからのコミットだと動かない件
僕はhuskyのバージョンを下げてインストールしました。