🐕

git commit時にLinterとFormatterを自動実行する

に公開
Git
ESLint
Prettier
husky
lint-staged
tech

これはなに

git commit時にLinterとFormatterを自動実行し、エラーが出る場合はコミットできないようにするための手順を記したもの。

環境

  • Node.js 20.11.1

  • npm 10.5.0

  • husky 9.0.11

  • lint-staged 15.2.2

前提条件

  • LinterとFormatterが導入されていること
    • 本稿では、eslint、stylelint、prettierが導入されていることを前提とする。

手順

手順は次のとおりである。

  1. huskyを導入する
  2. lint-stagedを導入する
  3. pre-commitのhookを追加する
  4. コミット時にLinterとFormatterが自動実行されることを確認する

1. huskyを導入する

huskyは、Gitのhookを管理するためのツールで、git commit時にLinterとFormatterを自動実行するために使用する。

まず、huskyをインストールする。

インストールコマンド
npm i -D husky

次に、husky initコマンドを実行する。実行するコマンドの詳細はhuskyの公式ドキュメントを参照すること。npmの場合は下記になる。

husky initコマンド
npx husky init

このとき、.gitディレクトリとpackage.jsonファイルが同じ階層に存在しない場合、下記のようなエラーが発生する。

エラーメッセージ
.git can't be found

.gitディレクトリとpackage.jsonファイルが同じ階層に存在しない場合というのは、たとえば、下記のようなディレクトリ構造の場合である。

.gitディレクトリとpackage.jsonファイルが同じ階層に存在しない場合
.
├── .git
├── .gitignore
├── README.md
└── nuxt-app
    ├── .prettierrc.json
    ├── .stylelintrc.json
    ├── commitlint.config.cjs
    ├── node_modules
    ├── package-lock.json
    └── package.json

このエラーへの対処法は、huskyの公式ドキュメントに書かれているとおりで、husky initコマンドによりpackage.jsonへ追加されたprepareスクリプトを変更する。たとえば、上記のようなディレクトリ構造の場合は、nuxt-appディレクトリ内にpackage.jsonがあり、その親ディレクトリに.gitディレクトリがある。よって、prepareスクリプトを下記のように変更する。

package.json
{
  "scripts": {
-   "prepare": "husky"
+   "prepare": "cd .. && husky nuxt-app/.husky"
  },
}

変更したら、npm i（あるいはnpm install）を実行する。

npm i

成功すると、.huskyディレクトリが生成される。

2. lint-stagedを導入する

次に、lint-stagedを導入する。lint-stagedは、Gitのステージングエリアにあるファイルに対してコマンドを実行するためのツールである。今回はhuskyと組み合わせて使用する。

まず、lint-stagedをインストールする。

インストールコマンド
npm i -D lint-staged

次に、package.jsonにlint-stagedの設定を追加する。

package.json
{
  "lint-staged": {
    "*.{css,vue}": "stylelint --fix",
    "*.{vue, ts, js}": "eslint --fix",
    "*.{js,jsx,ts,tsx,vue,css,html,md,json,cjs}": "prettier --write"
  }
}

これで、lint-stagedが実行できるようになる。

3. pre-commitのhookを追加する

huskyを利用して、git commit時lint-stagedを自動実行するためのGit hookを追加する。今回はpre-commitのhookを追加する。

.huskyディレクトリにpre-commitファイルを追加する。pre-commitファイルには、実行したいコマンドを記述する。

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

実行すると、.huskyディレクトリに下記のpre_commitファイルが生成される。

.husky/pre-commit
npx lint-staged

.gitディレクトリとpackage.jsonファイルが同じ階層にない場合は、下記のように、階層を移動するコマンドを追加する必要がある。

.husky/pre-commit
+ cd nuxt-app  # package.jsonのある階層に移動する

npx lint-staged

以上までの設定で、コミット時にLinterとFormatterが自動で実行され、通らない場合はコミットできなくなる。

4. コミット時にLinterとFormatterが自動実行されることを確認する

最後に、コミット時にLinterとFormatterが自動実行されることを確認する。

git add .
git commit -m "test"

コミットが成功すると、コミットメッセージが表示される。コミットが失敗すると、エラーメッセージが表示される。

まとめ

huskyとlint-stagedを導入することで、git commit時にLinterとFormatterを自動実行し、エラーが出る場合はコミットできないようにできる。

Discussion