Vue/NuxtでESLintを活用(ひとまず導入編)

# はじめに
数回に分けてVue/NuxtプロジェクトへのESLint導入を紹介していきます。

> 1. ひとまず導入編   <font color="red">←本記事</font>
2. [vueスタイルガイド導入編(vue/recommendの活用)](https://qiita.com/yfujii1127/items/e80f8a61c4eac7126c13)
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)


本記事では、nuxtの導入から初期の設定を説明します。
今回はVS Codeと`npm`を使って進めていきます。`yarn`をお好みの方は適宜置き換えてください。また今回はサンプルプロジェクトですので、`develop`ブランチで進めていきます。各自でお好みのやり方でブランチやコミットを切って進めてください。

## 既存プロジェクトに入れる場合
本記事では紹介いたしません。ここらへんの記事を参照ください
- [Nuxt.jsのプロジェクトにESLint + JavaScript Standard Styleを導入する方法](https://qiita.com/munieru_jp/items/22ad3a5d0919e423b447)
- [nuxtプロジェクトにESLint導入](https://qiita.com/ta1nakamura/items/a7fa31f9cc7f34d20895)

# ESLintとは
そもそも`ESLint`とはなんぞや？

![image.png](https://qiita-image-store.s3.amazonaws.com/0/252687/e2969117-a18c-e4b6-7bc6-334c41b5a41c.png)



簡単に言うとJavaScriptのための静的検証ツールですね。コード実行前にバグを見つけたり、スタイルを統一(括弧やスペース、コンマの使い方など)したりするのにとても便利です。チーム開発など複数人でプロジェクトに携わる時には確実に設定しておいたほうがいいと思います。


# Nuxtの導入
では、早速導入していきましょう！
お好みのディレクトリに移動して、ターミナルで以下のコマンドを叩いてください。

```terminal

npx create-nuxt-app ci-eslint

```
`ci-eslint`と今回は書きましたが、ここはお好きな名前で大丈夫です。

すると、Nuxt.jsのインストールが開始されます。
各自お好みの設定を行っていただいて大丈夫ですが、`Choose features to install`が出てきたら、<font color="red">Linter/Formatter</font>をスペースで選んでからEnterで次に行ってください。ここで選んでおくことで、最初から必要な設定等はしてくれます。(なんて便利なんだー:heart_eyes:)
<img width="588" alt="【導入】lintの選択.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/57ef2f7b-19c6-7448-8376-7cc0d1ba8648.png">

それぞれ何を選ばされてるんだ？とご存知ない方はこちらを参照ください
[Nuxt.jsガイド~ create-nuxt-app を使用する ~](https://ja.nuxtjs.org/guide/installation/)

一通り、選び終わったら、先ほど選んだディレクトリにnuxtのプロジェクトがインストールされていると思います。私はデスクトップを選んだので、このようにフォルダが見えます。

<img width="734" alt="【導入】インストール完了.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/8e070487-9343-1b9f-6621-d22e7bf27279.png">

これでNuxt.jsの導入は完了です。



# 確認
まずは、初期のファイルの確認を行います。

`package.json`を見てみましょう！
<img width="602" alt="【確認】package-jsonが入っている-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/71098751-b592-432a-d230-206f0c223fef.png">

先ほど導入の際に、`Linter/Formatter`を選んでいたので、すでに必要なパッケージが準備されていますね！

では、次に`.eslintrc.js`を確認してみましょう。
ここでは、細かな設定やカスタマイズを行います。初期状態では以下のようになっていると思います。
<img width="638" alt="【確認】初期のeslintファイル.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/98199fef-e0f9-e10d-46b3-f1296bfd8e60.png">

設定周りでは今後も主にこの二つをみていきますので、覚えておいてください。

# 設定
それでは、各種設定を行っていきましょう。
今回は既存の`JavaScript Standard Style`*を利用します。

*他にも`Airbnb JavaScript Style Guide`などありますが、そこはお好みで大丈夫です。(参考：[JavaScriptのスタイルガイドまとめ(おすすめ4選)](https://qiita.com/takeharu/items/dee0972e5f39bfd4d7c8))

では、まずは、`.eslintrc.js`に以下を追加してください。

```diff

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

しかし、このままでは、まだ実際にLintが適用されているのかわかりません。

## エディタプラグインの導入
次に、Lintが適用されているかどうかエディタで確認しやすいようにプラグインを導入しましょう。VS Codeの場合は、こちらがいいですね。

<img width="1073" alt="【導入】ESLintプラグイン.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/d3af29cc-95ca-2a9b-68f7-a7417bd1e252.png">


インストールして、戻ってみましょう。(リロードが必要な場合があるかも)
すると、お！赤色が付いているファイルがある！
jsファイルが監視されているのが確認できましたね。

<img width="631" alt="【確認】怒られている.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/06b5ddda-b05a-f420-4743-d67097dea9d1.png">


ちなみにここでは、関数名の後に半角スペースがないから注意されています。

<img width="587" alt="【確認】ESLintの理由.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/b52ea07f-5216-bc56-f620-764d515c32c6.png">


試しに直してみましょう。

<img width="440" alt="【修正】半角スペースを入れる.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/ade3c110-2f49-60f9-01d6-eabca5a9d27d.png">

すると、赤色の注意がこの行では消えました。

## lintを走らせる
ファイルが多くなってくると、一つ一つ目視で確認していては、キリがないときがあります。その時はターミナルで`npm run lint`と叩いてみましょう。

<img width="993" alt="【コマンド】npm_run_lint.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/7c53a85f-bd97-de8e-a10b-38f979753605.png">

するとこのように、ターミナル上で注意を出してくれます。
他のところも対応してみましょう。

次回以降、プロジェクトは`'plugin:nuxt/recommended'`ではなく、`'plugin:vue/recommended'`を利用して続けていきますので、以下を削除してください。(この点に関しては、次回以降説明します。)


`.eslintrc.js`

```diff

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    '@nuxtjs',
    'standard',
-    'plugin:nuxt/recommended'
  ],
  // add your custom rules here
  rules: {}
}
``` 
すると、赤色が消えましたね！
<img width="653" alt="【確認】怒られてるの修正.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/8e370629-174a-443d-3882-c470eedb087e.png">


もう一度、ターミナルで`npm run lint`を行ってみましょう。
今回は、何も注意が出ないはずです。


# 最後に
これで、JSのスタイルガイドを意識しながらの開発ができますね！ :v:

次はJSファイルだけでなく、Vueファイルの監視とVueスタイルガイドに沿った書き方の監視もしてみましょう。[vueスタイルガイド導入編(vue/recommendの活用)](https://qiita.com/yfujii1127/items/e80f8a61c4eac7126c13)