PrettierとESLintをVSCodeで使う（Vue）

#はじめに
PrettierとESLintをVSCodeで使う方法だが、色々と情報が交錯しすぎなようで、結構調べるのに時間がかかったよ。。。。

というわけで、とりあえず**「自分はこの方法で多分できたぜ！」**という記録を残す。

#環境と前提
・Vue CLIで作成したプロジェクト
・VSCodeに[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)と[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)のVSCodeプラグインがインストール済み


プラグインのインストールには、下記のようにExtensionsを開いて、該当のプラグインを検索してinstall
![スクリーンショット 2020-11-27 18.26.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/53f275ed-ba26-98f5-ad1f-55a8329061f9.png)

#そもそもの疑問
##VSCodeにプラグイン入れるだけで終わりじゃないの？？
→終わりじゃない！
![スクリーンショット 2020-11-27 18.36.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/1a47f92c-1d1f-bb33-6177-19d213416d32.png)
![スクリーンショット 2020-11-27 18.37.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/ac04ed06-ced5-7e16-6f82-1c8243762a15.png)

こいつらをインストールして終わりかと思いきや、そうじゃない。。。

##.eslintrcファイルは作る必要あるの？
調べていると毎回登場する「eslintrcファイル」というやつ。。

Vue CLIで作ったプロジェクトなら、最初から`.eslintrc.js`という隠しファイルが存在しているので、それを使ってOK
サイトによっては`.eslintrc`はjson形式だったりするが、どちらでもOK

**もし`.eslintrc`がデフォルトで存在しない場合、後記する方法でプロジェクト直下に作成する**


**※.から始まるファイルは「隠しファイル」で普通にフォルダを見ても確認できない。**
Macなら「command + shift + .」
Windowsなら[こちら](https://www.reneelab.jp/displays-hidden-files.html)を参考に

#依存関係をインストールする
私は`npm`を使う

ターミナルでVue CLIで作成したプロジェクトの階層へ

```console
npm i -D eslint eslint-config-prettier eslint-plugin-prettier prettier
```

#設定ファイルを作成
`.eslintrc`ファイルをターミナルから作成します。
質問形式で色々と聞かれるのですが、詳しい内容は[こちら](https://www.konosumi.net/entry/2019/09/01/165449)を参考に。。。

##How would you like to use ESLint?
ESLintの実行には設定ファイルが必要です。 これは「--init」で作成できます。

```console
npx eslint --init
? How would you like to use ESLint? … 
  To check syntax only
❯ To check syntax and find problems
  To check syntax, find problems, and enforce code style
```

ここでは真ん中の「To check syntax and find problems」を選択。
シンタックスのチェックと、問題のあるコード解析を適応します。

##What type of modules does your project use? 

```console
What type of modules does your project use? … 
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these
```
モジュールのimport/exportスタイルを問われているらしいです。
よくわかりませんが、JavaScript modules (import/export)を選択

##Which framework does your project use? 

```console
 Which framework does your project use? … 
  React
❯ Vue.js
  None of these
```
使用するJSフレームワークを選択。Vueを選びます。

##Does your project use TypeScript? 

```console
Does your project use TypeScript? › No / Yes
```
TypeScriptを使うかどうかの質問です。
どちらかを選びます。

##Where does your code run?

```console
Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
  Node
```

どこでソースコードを実行するのかについての質問。
Browserを選択

##What format do you want your config file to be in?

```console
What format do you want your config file to be in? … 
❯ JavaScript
  YAML
  JSON
```

設定ファイルの生成フォーマットを選択。
好みでJavaScriptを選択

##Would you like to install them now with npm?

```console
Would you like to install them now with npm? · No / Yes
Installing eslint-plugin-vue@latest
```
Yesを選んで、eslint-plugin-vueの最新版をインストールする

##確認
プロジェクトルート直下に隠しファイル`.eslintrc.js`が確認できるかと

```javascript:.eslintrc.js
module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential"
    ],
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
};
```



#`.eslintrc.js`を編集
下記の内容を追加する。

```javascript:.eslintrc.js
module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential",
        "plugin:prettier/recommended", // 追加
    ],
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "prettier", // 追加
    ],
    "rules": {
        "prettier/prettier": "error", // 追加
    }
};
```

#`.prettierrc`を作成
プロジェクトルート直下に隠しファイル`.prettierrc`を作成します。

```json:.prettierrc
{
    "printWidth": 80,
    "tabWidth": 4,
    "useTabs": false,
    "semi": true,
    "singleQuote": false,
    "quoteProps": "as-needed",
    "jsxSingleQuote": false,
    "trailingComma": "es5",
    "bracketSpacing": true,
    "jsxBracketSameLine": false,
    "arrowParens": "always",
    "rangeStart": 0,
    "filepath": "none",
    "requirePragma": false,
    "insertPragma": false,
    "proseWrap": "preserve",
    "htmlWhitespaceSensitivity": "css",
    "vueIndentScriptAndStyle": false,
    "endOfLine": "auto"
  }
```

こんな感じで設定を書く。
たくさんの種類があるので、
・[公式ドキュメント](https://prettier.io/docs/en/options.html)
・[Prettier の設定一覧](https://www.mitomex.blog/prettier-options/)
を眺めてみてください。

（正直半分ぐらいは何の設定かわかりません・・:sweat_smile:）



これで設定ファイルはこんな感じで設置されたかと

```console:構成
 myproject
   ├── .eslintrc.js
   ├── .prettierrc
```

#VSCodeの設定
`preferences＞Settings＞Workspace`を選択し、下記画像のボタンを押して`settings.json`を開く
![スクリーンショット 2020-11-30 13.46.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/3e4fd788-67e1-e1bf-e4cb-705384ea03bb.png)

こちらの設定を追加して保存
この設定の意味については、下記を参考に
[vscode-eslint v2](https://qiita.com/mysticatea/items/3f306470e8262e50bb70)

```json:settings.json
{
  "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      },
}
```

#最後に
![スクリーンショット 2020-11-30 14.35.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/e5b7ccad-953a-6738-99b6-121b54ab39d3.png)

`View＞Problems`で問題の発生した部分を確認して、該当の箇所へジャンプできます。
何気に便利！

##もしEslintとPrettierが効かない場合
私が経験で「プロジェクトAではPrettier動作するのに、プロジェクトBでは動作しない！！！」という事態があった。
全く同じ方法でやったのにも関わらず。。。:sob:

##解決した方法①
①VSCodeで`.eslintrc.js`を開く
②電球アイコンをクリックして承認ダイアログを開く
![nknown.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/7ce5d477-033d-8282-bb4f-83aeccf78329.png)

下記のようなメッセージがあるか確認

```
ESLint is disabled since its execution has not been approved or denied yet. Use the light bulb menu to open the approval dialog.esli
```

承認ダイアログを開き、ESLintを認証する

もしくはVSCode右下の「ESLint」タブをクリックして認証する
![スクリーンショット 2021-01-21 15.43.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/fe99219c-1d6a-43ec-aa44-5369e6553d38.png)
これでPrettierが効くようになりました！！:thumbsup:

##解決した方法②

```console
npm install eslint-plugin-vue@latest
```

vueファイルのための`eslint-plugin-vue`がinstallされていない可能性があります。

例えば、設定ファイルを入れた`.vscode`フォルダを複数人で使いまわした場合、`.eslintrc`ファイルをターミナルから作成していないかと。。
そのため、vueファイルではeslintが効かなかったと考えられます。


##ESLintに「"$" is not defined no-undef」と怒られる場合
`.eslintrc.js`にjqueryを追加してみましょう

```javascript:.eslintrc.js
env: {
        browser: true,
        es6: true,
        jquery: true,
    },
```