husky v6 + lint-stagedを導入する

2021-06-27

概要

huskyとは、Git hooksが簡単にできるパッケージになります。
Git hooksとは、Gitでコマンドを実行する直前もしくは実行後に特定のスクリプトを実行するための仕組みです。

実はv4と最新v6では導入方法が異なっています。

今回は、最新のhusky v6の導入方法を解説します。
セットで取り上げられるlint-stagedパッケージも同時に導入していきます。

使用バージョン

"husky": "^6.0.0"
"lint-staged": "^11.0.0"

インストール

まず必要なパッケージをインストールします。

# npm
npm install -D husky lint-staged
# yarn
yarn add -D husky lint-staged

lint-stagedの設定

lint-stagedはステージングされたファイルに対して、特定のスクリプトを実行できます。
package.jsonに以下のように設定します。

package.json
"lint-staged": {
    "*.js": [
      "eslint --fix",
      "prettier --write"
    ],
}

複数拡張子を設定するには以下のようにします。

package.json
"lint-staged": {
    "*.{js,ts}": [
      "eslint --fix",
      "prettier --write"
    ],
}

Git hooksを有効化する

次にGit hooksを有効化するためにhuskyディレクトリを作成します。

npx husky install

インストールした後にGit hooksを有効化するためにprepareスクリプトを設定します。

package.json
"scripts": {
    "prepare": "husky install"
},

Git hooksを作成

npx husky add .husky/pre-commit "npm lint-staged"

実行後、.husky/pre-commitが作成されます。コミット前に実行するファイルになります。

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

npm lint-staged

後は実際にlint-stagedに設定した拡張子ファイルを変更してコミットしてみます。
pre-commitに設定しているスクリプトex) npm lint-stagedが実行されます。

lint-staged prevented an empty git commit

多分eslintをfixするように設定すると以下の警告に出会うかもしれません。

lint-staged prevented an empty git commit

原因ははっきりしていませんが、以下のようにすると回避できます。

package.json
"lint-staged": {
    "*.js": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ],
}

以下のissueにも回避方法が載っています。
https://github.com/okonet/lint-staged/issues/588

結論

v4とv6では設定方法が違いますので、最新バージョンのセットアップは本記事を参考にするなりしていただけると幸いです。

参考

GitHub husky
Avoid empty commits?

運営について

Natural Tearoomはシステム開発会社フロントエンドエンジニアがんちゃんが運営するメディアです。
フロントエンド技術を中心に発信しています。

· プライバシーポリシー

SNS

© 2021 天然珈琲店