huskyを使えば簡単にpre-commitにstylelintが組み込めます。
チーム開発では非常に便利なので是非取り入れてみてください！
目次
バージョン
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が多いのでエラーになる}エラーを感知してくれました！