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

2 min読了の目安(約2200字TECH技術記事

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

  • commit時にESLintを走らせてerrorがあればcommitさせない
  • push時にJestを走らせてerrorがあればpushさせない

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が走った様子↓

スクリーンショット 2021-01-28 0.34.09.png

git pushを入力してJestが走った様子↓
スクリーンショット 2021-01-28 0.34.31.png

もしhuskyが走らなかったら...

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

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

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

$ yarn remove huksy

参考

【日本一わかりやすいTypeScript入門】ESLintとPrettierでコードの品質を高めよう
Next.js 10にTypeScriptとESLint, PrettierとJestを導入する