はじめに
この記事では、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のテストが走っているように設定しておきましょう。