はじめに

linterやformatterを導入したのに、コマンドを打たないと実行してくれない悲しみを解決したいために、初めてlint-stagedとhuskyを導入した話です。

これらは簡単に導入できるし今後必須導入をしていきたいと思ったので、記事にしてみようと思いました！（初めての投稿）

間違ったことや、「lint-staged huskyの他にもこんなのを使うと良いよ！」などありましたら、コメントしていただけると嬉しいです！（優しくしてください🙇‍♂️）

記事の対象者

フロント周りの環境構築する人なら誰でも！

構築した環境情報

Node 10.16.3
npm 6.14.5

そもそもlint-stagedとhuskyってなんなの？

すごーく簡単に言うと

gitコマンドを検知して（husky）
ステージングにあるファイルに対して、lintを行う（lint-staged）

と言うことですね！

lint-staged

https://github.com/okonet/lint-staged
node ≥ 10.13.0 にする必要があります！

通常linterとかは以下のように設定します。

// コマンドの実行
$ eslint --fix ファイル名

//またはpackage.jsonに設定しておく
"scripts" {
	"eslint": "eslint --fix PATH/*.js"
}

コマンドだといちいち打つのが面倒だし、
npm scriptに設定しておくと関係ないファイルまでコードチェックしてしまいます。（融通が…）

しかし！lint-stagedを使うことで解決できます！
lint-stagedは「ステージングにあるgitファイル（git add ファイル名）に対して、linterを実行」してくれます。

これでlinterやformatterをかけたいファイルが限定できると言うが良いですね。

husky

https://github.com/typicode/husky
node ≥ 10, git ≥ 2.13.0 にする必要があります！

huskyは「git commit」と「git push」を検知してくれます。
その他「rebaseは検知しないで欲しい」とか色々な設定ができますが、こちらは上記githubのREADMEをご確認してください。

以下の形式で書くことが可能です。

.huskyrc
.huskyrc.json
.husky.yaml
.husky.yml
.husky.js
husky.config.js

導入

lint-stagedとhuskyについてわかったところで導入してみます。

以下を実行してください。

npm install --save-dev husky lint-staged

はい、導入するのはこれだけです！

早速設定していきましょう！
※ 今回は直接package.jsonに記載しました。

{
	"scripts": {
		// npm scriptを記載してある場所
	},
	"husky": {
		"hooks": {
			"pre-commit": "lint-staged"
		}
	},
	"lint-staged": {
		"*.scss": "stylelint --fix",
		".js": "eslint --fix"
	}
}

上の内容を見ていきましょう！

lint-staged

"lint-staged": {
		"*.scss": "stylelint --fix",
		".js": "eslint --fix"
	}

lint-stagedはステージングファイルに対してlintを実行するパッケージでしたね。
今回はステージングにあるファイルに対して、stylelintとeslintを実行して、自動修正までお願いしています！

husky

"husky": {
		"hooks": {
			"pre-commit": "lint-staged"
		}
	}

huskyはgitコマンドを検知してくれるパッケージでしたね。
今回は「commitを検知して、commit前にlint-stagedを実行」としています。

実行結果

実行した結果どうなったか見てみましょう！

パターン１：問題なくcommitが成功した時

husky > pre-commit (node v10.16.3)
✔ Preparing...
✔ Running tasks...
✔ Applying modifications...
✔ Cleaning up... 

 1 file changed, 7 insertions(+)

無事commitできました！
ちゃんとhuskyが走ってくれていますね！

パターン２：lintで引っ掛かったが自動修正されて無事commitできた時

$ git commit
husky > pre-commit (node v10.16.3)
✔ Preparing...
✔ Running tasks...
✔ Applying modifications...
✔ Cleaning up... 

 1 file changed, 7 insertions(+), 7 deletions(-)

こちらも同様にhuskyが走っています。結果はパターン１と一緒です。
今回の場合、コードに自動修正可能な箇所があったのでstylelintで自動修正をしています！
その後自動修正が完了して、commitが完了しています。

パターン３：lintで引っ掛かり、さらに自動修正ができない時

$ git commit
husky > pre-commit (node v10.16.3)
✔ Preparing...
⚠ Running tasks...
  ❯ Running tasks for *.scss
    ✖ stylelint --fix [FAILED]
↓ Skipped because of errors from tasks. [SKIPPED]
✔ Reverting to original state because of errors...
✔ Cleaning up... 

✖ stylelint --fix:

/dir/file.scss (エラーが出ているファイル名が表示される)
 109:15  ✖  Missed semicolon   CssSyntaxError

husky > pre-commit hook failed (add --no-verify to bypass)

こちらの場合、上同様husky, lint-staged共に走っていますが、
linterでは修正できない内容だったため、commitができていません。（stylelnitがだめ〜って言ってますね）
こうなったら手動で修正するしかありません。

まとめ

linter, formatterの恩恵は大きいです。
コード品質が上がる他にも、レビューではコードの書き方だけに集中できるメリットもあります。

しかしコマンドの実行が面倒になってlinterが使われていないのではもったいないです！
この機会にlint-staged, huskyを導入してみてはいかがでしょうか？！

最後まで読んでいただきありがとうございました！

参考資料