Vue/NuxtでESLintを活用(vueスタイルガイド導入編)

# はじめに

この記事では、ESLintを使って、Vueファイルの監視を設定して行きます。

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


ESLintを入れたのであれば、jsファイルだけでなく、せっかくなのでVueファイルも監視してしまいましょう。その設定方法をこの記事では説明して行きます。プロジェクトは前回使用したものを使って行きます。

# Vueスタイルガイドとは

[Vueスタイルガイド](https://jp.vuejs.org/v2/style-guide/index.html)とは、公式で推奨されているVueの書き方ガイドです。ある程度慣れてきたら、ガイドに沿った書き方をすることで、保守性が増したり、可読性が上がったりします。


<img width="1126" alt="スクリーンショット 2019-03-09 13.29.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/19c7e44a-891b-31ed-8ba0-a90c41423761.png">


優先度がA~Dまであり、わかりやすく説明されているのでぜひ一度読んでみてください。

# 確認
まずは確認です。例えば、現状、`pages/index.vue`を以下のようにスタイルガイドに反した`自己終了形式でない書き方`をしてもlintで注意されることはありません。

<img width="623" alt="スクリーンショット_2019-03-09_13_34_10.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/b500fdb4-5473-8f77-7658-a7a4e758f445.png">


<img width="710" alt="スクリーンショット 2019-03-09 14.23.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/8534a7e1-9e53-fa80-0fe0-d1583cd5cd23.png">



こういったスタイルガイドに反した書き方があれば監視して注意を出してくれるように設定をして行きましょう。


# 設定

まずは、vueファイルが監視対象となるように設定します。
`vue-loader`と`eslint-plugin-vue`が必要になります。前回からの続きでしたら既に初期設定で入っているので問題ありません。既存プロジェクトへの導入であれば、以下を参考にインストールしてください。

* [リント Vue-loader](https://vue-loader-v14.vuejs.org/ja/workflow/linting.html)
* [Vue.jsスタイルガイドとeslint-plugin-vue検証ルールのマッピング](https://qiita.com/ota-meshi/items/85bf17494c8ea0be05d7)

<img width="637" alt="vue-pluginとvue-loader.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/2789a7d0-674b-dfcf-9a0d-96d6992f7178.png">

次に、`.eslintrc.js`を編集します。２箇所追加しましょう。

```diff

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    '@nuxtjs',
    'standard',
+   "plugin:vue/recommended"
  ],
+ plugins: [
+   'vue'
+ ],
  // add your custom rules here
  rules: {}
}
```

## "plugin:vue/recommended"とは
まず、`extends`に`"plugin:vue/recommended"`を追加することで、Vue.js公式で推奨されているスタイルガイドの優先度Cまでをカバーしてくれます。(https://jp.vuejs.org/v2/style-guide/index.html)

| extends | 優先度カバー範囲 |
|--- |---|
|"plugin:vue/essential"|優先度Aまで|
|"plugin:vue/strongly-recommended"|優先度Bまで|
|"plugin:vue/recommended"|優先度Cまで|


参考：[Vue.jsスタイルガイドとeslint-plugin-vue検証ルールのマッピング](https://qiita.com/ota-meshi/items/85bf17494c8ea0be05d7)

ここはお好みでいいと思いますが、せっかくですので私はいつもCまで適応させるために、`"plugin:vue/recommended"`を利用しています。

## "plugins"とは
以下を入れることで、`.vue`ファイルの監視を行っています。

```diff
+ plugins: [
+   'vue'
+ ],
```
この設定がないと、`.vue`のファイルはlintを走らせても検知してくれません。

# 検証
では、きちんと`.vue`ファイルも検知してくれてるか確認してみましょう。
ターミナルで`npm run lint`を叩いてみましょう。

すると、新しく以下のようなメッセージが出ていると思います。

<img width="1023" alt="Lintを走らせてエラーを検知.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/fe423d8f-0fed-fcba-10f8-72c541defef7.png">


# 最後に
これで、Lintを使って`.vue`ファイルの検知ができました！ :v:
また、Vueのスタイルガイドに沿った開発も行っていけます。

次は、エディタをカスタマイズして、もっと簡単にLint検出と自動校正を行えるようにしましょう！
https://qiita.com/yfujii1127/items/65b04f6e3d17c3eb85da