今回はコミットやプッシュ時に自動でコマンドを叩いてくれるlint-staged/huskyについて紹介します。

開発環境

MacBook Pro (13-inch, M1, 2020) macOS Monterey 12.1
Yarn 1.22.18
lint-staged 12.4.1
husky 7.0.4

lint-stagedおよびhuskyとは

huskyとは

lint-stagedを説明する上でhuskyは外せないもののため、先にこちらについて説明します。
huskyはjsonplaceholderやJSON Serverの作者で知られるtypicode氏が作成したライブラリになります。

You can use it to lint your commit messages, run tests, lint code, etc... when you commit or push.

公式でこんな記載がある通り、Gitでコミットやプッシュと同時にlintやテストの実行を行ってくれる便利ツールです。これらの実行で使用するファイルはGit hooks（Gitフック）というGit標準機能が活用されており、すべてのフックがhusky上で使用可能となっています。ただGitフックの種類は数が多く本筋が逸れるため今回は説明しません。詳細は以下のサイトをご確認ください。

後述する例でも出しますが、基本的には「pre-commit（コミット前）」/「pre-push（プッシュ前）」だけ覚えておけば問題ありません。

lint-stagedとは

Gitにステージされている指定した形式のファイルに対してESLintといったlintを走らせてくれるツールです。lintと名がついていますがPrettierといったフォーマッターを走らせることも可能です。

実際に試してみる

実際に作成したリポジトリはこちらです。create-next-appで作成したNext.jsアプリを使用しました。

lint-stagedおよびhuskyのインストール

※以下の方法では、事前にESLintやPrettierといったコード管理ライブラリがプロジェクトフォルダにインストール＆設定されている必要があります。

lint-stagedを一から設定するのは大変なので、こちらのコマンドでインストール＆設定します。このコマンドを使うとhuskyも同時に設定されます。

npx mrm@2 lint-staged

すると以下の変更がかかりました。

package.json

{
  "scripts": {
    "lint": "next lint",
+   "prepare": "husky install"
  },
  ...
  "devDependencies": {
    ...
+   "husky": ">=6",
+   "lint-staged": ">=10",
    "typescript": "4.6.3"
  },
+  "lint-staged": {
+    "*.js": "eslint --cache --fix"
+  }
}

.huskyフォルダも追加されています。

コミット時にESLintを走らせる

.huskyフォルダにいるpre-commitファイルを確認しましょう。
最終行に書かれているコマンドがコミット時に発火するコマンドとなります。
husky.shと書いているところはhuskyを動作するためのものなので編集してはいけません。

pre-commit

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

ではnpx lint-stagedはどこに定義されているのでしょうか？

先程変更がかかったpackage.jsonの内容をもう一度確認してみると気になる記載が。。。はい、ここです。

jsファイルの変更をコミットすると、eslint --cache --fixのコマンドが発火されます。

package.json

{
   ...
+  "lint-staged": {
+    "*.js": "eslint --cache --fix"
+  }
}

ただしこのままではTypeScriptで作成したファイルでは適用されません。ですので本箇所を次のように変更します。

package.json

{
   ...
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": "eslint --cache --fix"
+  }
}

lint-stagedではglobパターンを使って、ファイル形式や条件にそってコマンドを発火することができます。globについての詳細は以下の記事をご確認ください。

また、lint-stagedのREADMEでもたくさんの記載例が掲載されているので参考にしてみてください。

では実際にtsxファイルを編集してコミットしESLintが動くことを確認してみましょう。

pages/index.tsx

import type { NextPage } from "next";
import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";

+ const hogehoge = "";

今回はすぐ消えてスクショできなかったのですが、コミット時にeslint --cache --fixが走りました。
以下のメッセージが出てくると、lint-stagedの動作は成功しコミットされます。

✔ Preparing lint-staged...
✔ Running tasks for staged files...
✔ Applying modifications from tasks...
✔ Cleaning up temporary files...

なお、lint-stagedで失敗した場合はコミットはされません。

プッシュ時にユニットテストを走らせる

※今回の例はtsxファイルのユニットテストを使うため、JestやTesting Libraryの設定が入っていること前提で話を進めます。

package.jsonに以下のユニットテストを走らせるためのscriptsを追加しておきます。

package.json

{
  "scripts": {
    ...
    "lint": "next lint",
+   "test": "jest",
    "prepare": "husky install"
  },
  ...
}

今回のユニットテストコードはこちらを用意しました。

__tests__/index.test.tsx

import { render, screen } from "@testing-library/react";
import Home from "@/pages/index";

describe("Home", () => {
  it("renders a heading", () => {
    render(<Home />);

    const heading = screen.getByRole("heading", {
      name: /welcome to next\.js!/i,
    });

    expect(heading).toBeInTheDocument();
  });
});

では準備ができたところでhuskyにpre-pushフックを追加しましょう。

npx husky add .husky/pre-push "yarn test"

そしてプッシュするとユニットテストが発動するようになりました。

フックの追加の仕方については以下のサイトをご確認ください。huskyはバージョン7になってから大幅な変更が入ったため、ネットに転がっている頃の記事だと古い情報が紹介されている可能性が高いです。
ですので、公式サイトを確認することをオススメします。
https://typicode.github.io/husky/#/?id=create-a-hook

終わりに

lint-staged/huskyは公式で様々な設定レシピが記載されているので、ぜひ設定してより良い開発環境にしていきましょう！！

最後にhusky公式で紹介されているOSSライブラリの設定例をいくつか貼り付けておきます。先行者の設定例を見るのも大切です。

typescript-eslint

Angular

lint-staged/huskyを使ってコミット時やプッシュ時にコマンドを自動で発火するようにしよう！

開発環境

lint-stagedおよびhuskyとは

huskyとは

lint-stagedとは

実際に試してみる

lint-stagedおよびhuskyのインストール

コミット時にESLintを走らせる

プッシュ時にユニットテストを走らせる

終わりに