はじめに
この記事では、git commitするたびにLintを走らせ、確認する方法を紹介します。
- [vueスタイルガイド導入編(vue/recommendの活用)] (https://qiita.com/yfujii1127/items/e80f8a61c4eac7126c13)
- ファイルセーブで自動化編(エディタ自動校正機能)
- コミット度にlintを走らせる編(lint-stagedとhuskey)←本記事
- Circle CIでESLint導入編
自動校正だけでは、取り除けないものなどをgit pushする前に検知してしまいましょう。lint-stagedとhuskeyを利用して、その設定方法をこの記事では説明して行きます。プロジェクトは前回使用したものを使って行きます。
gitの操作方法等については、あまりここでは詳細について話さないのでご了承ください。
lint-stagedとhuskeyとは
コミット時にファイルを linting できるツールです。lintはコミット前には知らせる方が、より意味をなし、リポジトリに追加する前に、エラーを発見したり、コードスタイルを統一することはチーム開発にとっても重要なこととなります。
lint-stagedとは
gitのステージングにあるファイルに対して、スクリプト(特定のコマンド)を実行してくれるツールです。
huskeyとは
gitのpre-commit hookとpackage.jsonをうまく組み合わせてくれるツールです。これを利用して、設定を package.json などにに書けばチーム内で設定を簡単に共有できます。
これらを組み合わせることで、huskyでpre-commitフックにlint-stagedを設定し、lint-stagedから各種リントツールを実行という流れになります。
参考:
確認
現状、package.jsonはこのようになっています。
設定
では、インストールしましょう。
ターミナルで以下のコマンドを追加します。
npm install --save-dev lint-staged husky
これでlint-stagedとhuskyを同時にインストールします
次に、設定をpackage.jsonに記述します。
"devDependencies": {
...
},
+ "husky": {
+ "hooks": {
+ "pre-commit": "lint-staged"
+ }
+ },
+ "lint-staged": {
+ "*.js": [
+ "eslint --fix",
+ "git add"
+ ],
+ "*.vue": [
+ "eslint --ext .vue --fix",
+ "git add"
+ ]
+ }
まず上のhuskyの設定をすることで、pre-commitをフックして、lint-stagedが発火します。
その次に、lint-stagedを走らせるのですが、実際に何を確認させるのかというのを書いています。ここでは、.vue拡張子がついたファイルと.jsのjsファイルを監視するようにしました。
検証
検証準備
各自コミットはしていると思いますが、ここで一度改めてコミットしておきましょう。
私のファイルはこのようになっています。
適宜コミットは切っていたので、今回の変更のみが表示されていますが、まだコミットを切っていない人はもっとたくさん変更ファイルがあるかもしれません。
git addして編集したファイルをステージングにあげましょう
git add .
次にgit commit -m"コミットメッセージ"でコミットします。コミットメッセージに関しては、各自好きなもので大丈夫です。
git commit -m"lint-stagedとhuskyの設定"
ひとまず私はこのようにしました。
これで、現在diffが出ているファイルはないと思います。
これで検証のための前準備は完了です。
検証実験
では、試しに以下のように、console.log(1)をpages/index.vueの中に記述してみましょう。
早速、エディターで赤い波線が出ていますね。こちらに関しては、自動校正も効かないので、ちょうど良い例です。では、この状態で、保存してから先ほどと同じように、git addしてからgit commitを行ってみましょう。
すると。。。
コミットが見事に通らず、メッセージも出ています。
現在の設定では、console.logを認めないルールになっているので、想定通りの結果になりました！
めでたしめでたし！
jsファイルなどを作って色々試してみても面白いですね！
最後に
これで、commitするたびにlintが走る環境になりました 
チーム開発する上で、この設定があると、確実にlintが一度は通ったコードになります。
自動校正はエディタでの設定でしたので、「設定をしていない」や、「違うエディタで自動校正機能がない」方と一緒に開発をする際はとても役に立ちますね。
次はCircle CIの設定を行い、プルリクを出す時にESLintのテストが走っているように設定しておきましょう。