stylelintをpre-commitで実行する

背景

stylelint --fixを実行したりエディタの拡張で各々がフォーマットをかける運用（Recommend）にすると実行されなかったコードが別の修正の時にフォーマットされてノイズになってしまう。レビュー時に無駄な差分も出てしまうと見落としなどでバグも発生しかねない。
これらの理由からコミット時に強制フォーマットをかける。

必要なパッケージ

npm i -D stylelint husky lint-staged

• stylelint
• husky
• lint-staged

stylelintの定義などは割愛。

package.jsonに追加する記述

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "**/*.{css,scss}": [
      "stylelint --fix"
    ]
  }
}

最後に

huskyとlint-stagedを利用しているので、eslintやprettierなどとの連携も容易にできる。

他の例

{
  "lint-staged": {
    "**/*.js": [
      "eslint --fix",
      "eslint"
    ],
    "**/*.html": [
      "prettier --parser html --write"
    ],
  }
}