April Friday,15th 2022: PM

husky & lint-stagedを発火してlint系をコミット前にチェックする

husky - npm

GitHub - husky

参考概念: huskyでgit commitやgit pushの前にコマンドを実行して開発自動化を行う

Dog

huskyはコミットするときにコマンドを自動実行できるライブラリーみたいです。 ステージされたファイルのみlinterを適用するlint-stagedを発火させます。

動機

npmだったりyarnだったりpackage.jsonの書き方が人によって違ったので自分のメモとしてちゃんと残して置きたかったので執筆しました。

npm set-script prepare "husky install"
npm run prepare

set-scriptはpackage.jsonのscriptにhusky installを追加し、run prepareの方でルートに.huskyフォルダを作ります。

次にpre-commit.shelファイルを作成していきます。

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

こんな感じでGitHubのUsage通りに進めると.huskyフォルダと配下に以下のファイルが生成されます。

pre-commit.shell

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

npm run lint-staged

最初はnpm run testになっていますがここではstagedを発火させるため書き換えます。

npm install lint-staged

package.jsonの一番下に(script以外ならどこでもよい)lint-stagedで発火させる各lintを記述します。

package.json

  "scripts": {
    "lint-staged": "lint-staged",
    "prepare": "husky install"
  },
"lint-staged": {
    "*.{js,ts,jsx,tsx}": "eslint --fix",
    "*.{css,scss}": "stylelint --fix"
}

今回はprettierはセーブ時に実行しているため省きました。 というか試したんですがprettierは全てのファイルに実行されるのでlint-stagedでコミット時に実行できるのはlint系だけみたいです。

テストとしてlintの構文に違反する記述をしてコミットするとしっかりとエラーを返してくれます。 VSCのGUIからもエラーを吐いてくれています。

.stylelintrc.json

{
  "plugins": ["stylelint-scss"],
  "extends": ["stylelint-config-standard-scss", "stylelint-config-recommended-scss", "stylelint-config-prettier"],

    "rules": {
    "color-named": null,
    "selector-class-pattern": null,
    "no-descending-specificity": null
  }
}

stylelintの設定はこんな感じ、ルールを設定するために時間を多少使うことになるので小さいプロジェクトでは完全に好みだと思います。 stylelintエラーの右側のエラーにnullを当ててあげれば無視することができます。

stylelint-scss

stylelint-config-prettier

stylelint-config-recommended-scss

stylelint-config-standard-scss

stylelintに必要な上記の説明を上から順に 、 stylelint本体。 prettierとの併用をする場合にeslint同様必要。 recommendedよりstandardの方がルールが厳格らしい。 ちなみに両方適用させておくみたいなこともできるみたいです。

ルールの厳格さは以下のブログを参考にした。

Stylelint を導入したときのあれこれ

StyleとESやっとけばほぼ大丈夫かなと思います。