VS CodeでNuxt.jsのアプリにESlint Prettierをローカルでインストールし自動整形を利用する

# はじめに
Nuxt.jsを利用した開発が現在フロントエンドにおいて人気があるようです。
Nuxtアプリ等のJavaScriptプログラムはESlint Prettierを利用して開発を効率化させるのが一般的です。

私たちエンジニアがよく利用するエディタとしてはVS Codeがありますが、この拡張機能の中にESlint Prettier用のものが用意されており、コード保存時に自動で整形するといった機能を可能にしています。

しかし、```npx create-nuxt-app ```でnuxtアプリを作成、オプションでESlint Prettierをローカルにインストールし、VSCodeの拡張機能を有効にしただけでは**エラーが出てうまく動かない**ので、その対処法とともに解説します。

# 環境
2020年1月24日時点

Node.js 12.15.0
npm 6.13.4
nuxt 2.11.0
ESlint 6.8.0
Prettier 1.19.1

# 拡張機能の追加
VS CodeにESlint Prettierの拡張機能を追加、有効にして下さい。

# Nuxt.jsのアプリを作成
Node.jsが未インストールの場合は先にそちらをインストールしましょう。
Nodeにはバージョン管理パッケージがあるので、それ経由でインストールしておくと今後のバージョン管理が可能になります。
macの場合はnodebrew、windowsではnodistが有名です。

それらの導入には以下サイトを参考にして下さい。

[【mac】 NodebrewでNodeをインストールする](https://qiita.com/mame_daifuku/items/373daf5f49ee585ea498)
[【windows】 Nodist を使って、Node.js のバージョン管理を行う方法【 Nodist 導入編 】](https://qiita.com/Futo_Horio/items/0825aa96088c5ff0906b)

インストールが完了したら```npx create-nuxt-app ```でプロジェクト作成します。
その際、いくつか質問されますが、

```
? Choose linting tools 
 (*) ESLint
 (*) Prettier
 ( ) Lint staged files 
```
を選択して、このプロジェクトにローカルにインストールします。

# 自動整形の設定

インストール後、自動整形をオンにすべく**ワークスペースに設定を追加**します。

Ctrl (Command) + Shift + P でコマンドを開き、settingsと打ち込みWorkspaceのSettingsを表示します。
<img width="472" alt="setti.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/493479/bc33a4f7-dcab-ca3c-5caa-d7335d09cb85.png">

settingsの検索バーにjsonと打ち込み、Edit in settings.jsonリンクからjsonを開きます。
下記のように設定します

```settings.json
{
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}
```

**これで準備万端と思いきや、このまま.js .vueファイルを編集しようとすると、ESlintがエラーになります。**
<img width="100" alt="コメント 2019-11-09 174139.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/493479/b8592245-9182-1b47-c168-d4dd4fc78137.png">

上の画像のようにVSCodeの右下のESlint拡張機能がエラーを示します。ここをクリックするとエラー出力がOUTPUTから確認でき、

```
Failed to load plugin 'import' declared in 'test\.eslintrc.js » @nuxtjs/eslint-config': Cannot find module 'eslint-plugin-import'
```

となってしまいます。

# 重要: ESlintのworkingDirectoriesを設定する


ワークスペースのsettings.jsonにeslintが動くべきプロジェクトのディレクトリのパスを設定してあげます。

```settings.json
{
    "eslint.workingDirectories": ["./test"] // これを追加
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

```

これで拡張機能がしっかり動きます。
./test のところはプロジェクトのディレクトリ名を入力してください。

試しに適当にjsファイルを作成し、```const```とでも入れてあげると、

<img width="200" alt="const.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/493479/96e97d09-58f2-6808-6e85-5c3e1f608c9e.png">

と赤い波線で指摘され、problemsタブが

```
Parsing error: Unexpected token

> 1 | const
    |^ eslint [1,6]
```

としっかり動きます。
またいろいろ書いて保存すると自動で整形してくれるようになります。

# おわりに
ESlintをローカルにインストールした場合はWorlingDirectoriesを設定する必要があるということが肝要でした。
Eslintの拡張機能のOverviewにも設定事項が載っています。
[VSCode ESlint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

これを知らなかった自分はエラー解決に手間取ったので同じような状況にある方に参考になればと思います。

# 参考
[VS CodeにESLintを設定する](https://qiita.com/Mount/items/5f8196b891444575b7db)