huskyを使ってgit commit前にstylelintを動かす
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ファイルを以下のように変更します。
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npm run lint-staged // ここを変更
package.jsonに追加
続いてpackage.jsonを確認してみるとscripts何か追加されています。
{
"scripts": {
// 省略
"prepare": "husky install", // 自動で追加される
}
}
stylelintのコマンドとlint-stagedコマンドをscriptsに追加します。
lint-stagedの設定もついでにやりましょう。
lintの対象ディレクトリと、行いたいlintコマンドを設定します。
{
"scripts": {
// 省略
"prepare": "husky install",
"stylelint": "stylelint resources/sass/**",
"lint-staged": "lint-staged"
},
"lint-staged": {
"resources/sass/**": [
"npm run stylelint"
]
},
}
これで完成です。
動作確認
試しにこのようなファイルをコミットしてみましょう。
p {
color: #ffffffffff // fが多いのでエラーになる
}
Author And Source
この問題について(huskyを使ってgit commit前にstylelintを動かす), 我々は、より多くの情報をここで見つけました https://qiita.com/ktmymt/items/3f93d6ce0205188c1c68著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .