PrettierとESLintをVSCodeで使う（Vue）

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

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

#環境と前提
・Vue CLIで作成したプロジェクト
・VSCodeにPrettierとESLintのVSCodeプラグインがインストール済み

プラグインのインストールには、下記のようにExtensionsを開いて、該当のプラグインを検索してinstall

#そもそもの疑問
##VSCodeにプラグイン入れるだけで終わりじゃないの？？
→終わりじゃない！

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

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

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

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

※.から始まるファイルは「隠しファイル」で普通にフォルダを見ても確認できない。
Macなら「command + shift + .」
Windowsならこちらを参考に

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

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

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

#設定ファイルを作成
.eslintrcファイルをターミナルから作成します。
質問形式で色々と聞かれるのですが、詳しい内容はこちらを参考に。。。

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

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?

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?

 Which framework does your project use? … 
  React
❯ Vue.js
  None of these

使用するJSフレームワークを選択。Vueを選びます。

##Does your project use TypeScript?

Does your project use TypeScript? › No / Yes

TypeScriptを使うかどうかの質問です。
どちらかを選びます。

##Where does your code run?

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?

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

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

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

Would you like to install them now with npm? · No / Yes
Installing eslint-plugin-vue@latest

Yesを選んで、eslint-plugin-vueの最新版をインストールする

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

.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を編集
下記の内容を追加する。

.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を作成します。

.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"
  }

こんな感じで設定を書く。
たくさんの種類があるので、
・公式ドキュメント
・Prettier の設定一覧
を眺めてみてください。

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

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

構成

 myproject
   ├── .eslintrc.js
   ├── .prettierrc

#VSCodeの設定
preferences＞Settings＞Workspaceを選択し、下記画像のボタンを押してsettings.jsonを開く

こちらの設定を追加して保存
この設定の意味については、下記を参考に
vscode-eslint v2

settings.json

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

#最後に

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

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

##解決した方法①
①VSCodeで.eslintrc.jsを開く
②電球アイコンをクリックして承認ダイアログを開く

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

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」タブをクリックして認証する

これでPrettierが効くようになりました！！

##解決した方法②

npm install eslint-plugin-vue@latest

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

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

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

.eslintrc.js

env: {
        browser: true,
        es6: true,
        jquery: true,
    },