huskyを使ってgit commit前にstylelintを動かす

huskyを使えば簡単にpre-commitにstylelintが組み込めます。
チーム開発では非常に便利なので是非取り入れてみてください！

目次

1. huskyとは
2. インストール
3. husky準備
4. package.jsonに追加
5. 動作確認

バージョン

npm: 6.14.8
husky: 5.2.0
lint-staged: 10.5.4

huskyとは

git hookを簡単に使えるようにするツールです。
git hookを使うとgit commitやpushをする前にlintやテストを走らせることが出来ます。

インストール

stylelintはインストール済みとします。 stylelintの説明はこちらをご覧ください。
まずhusky、lint-stagedをインストールします。

lint-stagedとは、gitのステージングに上がったファイルにのみlintやテストをかけることが出来るツールです。

$ npm install husky lint-staged

lint-stagedはステージングされた(git addされた)ファイルのみを対象にすることが出来ます。

husky準備

続いてhuskyを使えるようにします。

$ npx husky init

ルートディレクトリに.huskyが自動で作成されます。

その中のpre-commitファイルを以下のように変更します。

./.husky/pre-commit

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

npm run lint-staged  // ここを変更

package.jsonに追加

続いてpackage.jsonを確認してみるとscripts何か追加されています。

package.json

{
    "scripts": {
      // 省略
      "prepare": "husky install",  // 自動で追加される
  }
}

stylelintのコマンドとlint-stagedコマンドをscriptsに追加します。
lint-stagedの設定もついでにやりましょう。
lintの対象ディレクトリと、行いたいlintコマンドを設定します。

package.json

{
    "scripts": {
      // 省略
      "prepare": "husky install",
      "stylelint": "stylelint resources/sass/**",
      "lint-staged": "lint-staged"
  },
  "lint-staged": {
      "resources/sass/**": [
          "npm run stylelint"
      ]
  },
}

これで完成です。

動作確認

試しにこのようなファイルをコミットしてみましょう。

p {
    color: #ffffffffff  // fが多いのでエラーになる
}

エラーを感知してくれました！