Vue/NuxtでESLintを活用(コミット度にlintを走らせる編)

# はじめに
この記事では、`git commit`するたびにLintを走らせ、確認する方法を紹介します。

> 1. [ひとまず導入編](https://qiita.com/yfujii1127/items/16f48237c401219c460b)
2. [vueスタイルガイド導入編(vue/recommendの活用)] (https://qiita.com/yfujii1127/items/e80f8a61c4eac7126c13)
3. [ファイルセーブで自動化編(エディタ自動校正機能)](https://qiita.com/yfujii1127/items/65b04f6e3d17c3eb85da)
4. コミット度にlintを走らせる編(lint-stagedとhuskey)<font color="red">←本記事</red>
5. [Circle CIでESLint導入編](https://qiita.com/yfujii1127/items/70438b26d53dbeaf607a)

自動校正だけでは、取り除けないものなどを`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`から各種リントツールを実行という流れになります。

参考:
 
* [husky + lint-stagedで品質を保つ](https://hysryt.com/archives/1295)
* [コミット前に Lint を強制するなら lint-staged が便利](https://qiita.com/ybiquitous/items/553479cfcb2cee124ae0)



# 確認
現状、`package.json`はこのようになっています。

<img width="607" alt="スクリーンショット 2019-03-14 22.08.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/45ad15bd-b1ec-45ff-3b64-fd7e51f8ad06.png">


# 設定
では、インストールしましょう。

ターミナルで以下のコマンドを追加します。

```
npm install --save-dev lint-staged husky
```

これで`lint-staged`と`husky`を同時にインストールします

<img width="475" alt="スクリーンショット_2019-03-14_22_09_45.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/8f9de904-186a-8cd6-79aa-0aad765b9571.png">


次に、設定を`package.json`に記述します。


```diff
 "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ファイルを監視するようにしました。


# 検証
## 検証準備

各自コミットはしていると思いますが、ここで一度改めてコミットしておきましょう。
私のファイルはこのようになっています。

<img width="1096" alt="スクリーンショット 2019-03-14 22.40.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/9a79c7d9-b4f9-7df6-6c54-a129ba8889ea.png">

適宜コミットは切っていたので、今回の変更のみが表示されていますが、まだコミットを切っていない人はもっとたくさん変更ファイルがあるかもしれません。


`git add`して編集したファイルをステージングにあげましょう

```
git add .
```

次に`git commit -m"コミットメッセージ"`でコミットします。コミットメッセージに関しては、各自好きなもので大丈夫です。

```
git commit -m"lint-stagedとhuskyの設定"
```

ひとまず私はこのようにしました。
これで、現在diffが出ているファイルはないと思います。

<img width="902" alt="スクリーンショット_2019-03-14_22_39_11.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/229c78bf-bca7-27df-689d-430ea680fd84.png">

これで検証のための前準備は完了です。

## 検証実験
では、試しに以下のように、`console.log(1)`を`pages/index.vue`の中に記述してみましょう。

<img width="720" alt="スクリーンショット 2019-03-14 22.49.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/d26524e4-c547-5fe3-9aea-e7ba80b84fde.png">

早速、エディターで<font color="red">赤い波線</font>が出ていますね。こちらに関しては、自動校正も効かないので、ちょうど良い例です。では、この状態で、保存してから先ほどと同じように、`git add`してから`git commit`を行ってみましょう。

すると。。。


<img width="954" alt="スクリーンショット_2019-03-14_22_50_17.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/b24d0129-1555-11dc-1659-11a15b8d20a5.png">

コミットが見事に通らず、メッセージも出ています。
現在の設定では、`console.log`を認めないルールになっているので、想定通りの結果になりました！

めでたしめでたし！

jsファイルなどを作って色々試してみても面白いですね！



# 最後に
これで、commitするたびにlintが走る環境になりました :v:
チーム開発する上で、この設定があると、確実にlintが一度は通ったコードになります。
自動校正はエディタでの設定でしたので、「設定をしていない」や、「違うエディタで自動校正機能がない」方と一緒に開発をする際はとても役に立ちますね。

次はCircle CIの設定を行い、プルリクを出す時にESLintのテストが走っているように設定しておきましょう。