【初心者向け】Visual Studio Code へ ESLint と Prettier を導入する

npm を知らない人が、Visual Studio Code (VS Code) に ESLint と Prettier を導入した話です。

## 導入環境
- Windows 10 64bit
- Visual Studio Code (VS Code)
- Windows コマンドプロンプト (cmd.exe) をある程度使えることを前提とします

## 概要

### ESLint と Prettier

- ESLint は、JavaScript のための静的解析検証ツールでコーディング段階でソースコードの不整合などをチェックすることができるソフトウェアです。
- Prettier は、JavaScript、TypeScript、CSS、HTML などのコードフォーマッタでソースコードの自動整形をすることができるソフトウェアです。

※ ESLint もコード整形機能を持っていますが、Prettier のコード整形機能の方が優れているため、ここでは「ESLint は解析検証ツール」「Prettier は自動整形ツール」と棲み分けをします。

### npm

- ESLint と prettier の本体は、`npm`というパッケージマネージャーからインストールすることができます。npm は、Node Package Manager のことです。
- npm は、元々は Node.js というサーバサイド処理を行う JavaScript プログラムの中で利用されるフレームワークなどのインストールを簡単に実行するためのソフトウェアです。つまり、Node.js をインストールすれば npm も一緒にインストールされます。
- Node.js はバージョン間の互換性がありません。今後他バージョンのインストールが必要になった場合に困りますので、事前に Node.js のバージョンを容易に切り替えられる`nvm-windows`を導入します。nvmは、Node Version Manager のことです。
- npm を用いたインストールは、現在切り替えている Node.js 環境全てに影響するグローバルインストールと、プロジェクト単位で環境を構築できるローカルインストールを選択できます。本記事では、ローカルインストールを前提に話をすすめていきます。

### VS Code プラグイン

- VS Code では ESLint プラグインと Prettier プラグインをインストールすることができます。
- ESLint プラグインは、ESLint 本体と VS Code を繋げてタイムリーなコード入力サポートやエラー検出を実現します。

### VS Code の Prettier プラグイン についての留意事項

- VS Code の Prettier プラグインは prettier 本体がバンドルされており、プラグイン単体でもコード整形機能を持っています。ただし、npm で prettier がローカルインストールされている場合は、そちらを優先して使用するようになっています。
- つまり、npm の prettier はインストール必須ではありません。
- 詳しくはこちら → [Visual Studio Code への Prettier 導入について](https://qiita.com/genbu-jp/items/40fb902cd120a59bdd4d)

## 導入の流れ
1. nvm-windows のインストール
2. node.js のインストール
3. npm の設定ファイル (package.json) の作成
4. ESLint のインストールと設定ファイルの作成
5. Prettier のインストールと設定ファイルの作成
6. VS Code に ESLint プラグイン導入
7. VS Code に Prettier プラグイン導入

### 1. nvm-windowsのインストール
Node.js のバージョンを容易に切り替えられる`nvm-windows`を導入します。
こちらの GitHub ([coreybutler/nvm-windows](https://github.com/coreybutler/nvm-windows/releases)) より`nvm-setup.zip`をダウンロードし、インストーラーに従いインストールします。

### 2. node.js のインストール
インストール可能な Node.js のバージョンを表示します。

```
nvm list available
```

表示された一覧の LTS (Long Term Support) の一番上のバージョンをインストールすると良いでしょう。
(本稿ではバージョン14.15.4を選択)

```
nvm install 14.15.4
```

次のコマンドでインストールしたバージョンに切り替えます。

```
nvm use 14.15.4
```

### 3. npm の設定ファイル (package.json) の作成
今回は npm module のローカルインストールを行うため、先ずプロジェクトのルートフォルダへ移動した上で npm の設定ファイルを作成します。
(本稿では`C:\VSCodeProject`をルートフォルダとします)

```
cd C:\VSCodeProject
npm init
```

ルートフォルダに`package.json`というファイルが出来ていれば成功です。

```diff
  [プロジェクトルートフォルダ]
+   ┝ package.json
```

### 4. ESLint module のインストールと設定ファイルの作成
ESLint パッケージをインストールします。

```
npm install -D eslint
```

ルートフォルダの`node_modules`フォルダ内にパッケージがインストールされます。

```diff
  [プロジェクトルートフォルダ]
    ┝ package.json
+   ┝ node_modules
```

続けて、ESLint の設定ファイルを作成します。

```
node node_modules\eslint\bin\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

? What type of modules does your project use? ... 
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

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

? Does your project use TypeScript? » No / Yes (本記事ではYesを選択)

? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node

? What format do you want your config file to be in? ... 
> JavaScript
  YAML
  JSON

The config that you've selected requires the following dependencies:

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
? Would you like to install them now with npm? » No / Yes (本記事ではYesを選択)
```

ルートフォルダに`.eslintrc.js`というファイルが出来ていれば成功です。

```diff
  [プロジェクトルートフォルダ]
    ┝ package.json
    ┝ node_modules
+   ┝ .eslintrc.js
```

### 5. Prettier module のインストールと設定ファイルの作成
Prettier パッケージをインストールします。

```
npm install -D prettier
```

ルートフォルダの`node_modules`フォルダ内にパッケージがインストールされます。
続けて、Prettier の設定ファイルを作成します。

```javascript:.prettierrc.js
// prettier.config.js or .prettierrc.js
module.exports = {
  printWidth: 150, // 自動折返し文字数
  trailingComma: 'es5', // 複数行の場合、可能な限り末尾のコンマを出力
  tabWidth: 2, // タブサイズ
  semi: true, // ステートメントの最後にセミコロンを付与
  singleQuote: true, // 二重引用符の代わりに単一引用符を使用
  endOfLine: 'auto', // 改行の文字コードを指定
};
```

```diff
  [プロジェクトルートフォルダ]
    ┝ package.json
    ┝ node_modules
    ┝ .eslintrc.js
+   ┝ .prettierrc.js
```

### 6. VS Code に ESLint プラグインを導入
VS Code の拡張機能から次のプラグインをインストールします。

| 名称 | plugin id |
|:--|:--|
| ESLint | [dbaeumer.vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) |

### 7. VS Code に Prettier プラグインを導入
VS Code の拡張機能から次のプラグインをインストールします。

| 名称 | plugin id |
|:--|:--|
| Prettier - Code formatter | [esbenp.prettier-vscode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) |

VS Code の設定画面から`editor.defaultFormatter`と検索し、Default Formatter 項目で`esbenp.prettier-vscode`を選択します。
この設定後にソースコードのコンテキストメニューから`ドキュメントのフォーマット`を選択するとコードフォーマッティングが実行されます。
![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394435/5c4817b9-8ca8-135a-8e87-3e099bd3db23.png)

ファイル保存時に自動的にコードフォーマッティングを実行する場合は、VS Code の設定画面から`editor.formatOnSave`と検索し、Format On Save 項目にチェックを付けます。
![2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394435/6f66b1d9-15e4-d133-f2ab-bd18fb7e6f27.png)

### 8. 完了
以上で、コーディング時に ESLint でのエラー検出、Prettier でのコードフォーマッティングができるようになりました。

## 参考にしたサイト
- [VS Code で ESLint × Prettier のベストかも知れないプラクティス](https://qiita.com/iShinkai/items/6f65b042618b76525659)
- [ESLint / Prettier について学んだことまとめ](https://qiita.com/katu_/items/db16c9da044850910b29)
- [Prettier 入門 ～ESLintとの違いを理解して併用する～](https://qiita.com/soarflat/items/06377f3b96964964a65d)
- [Prettier Configuration File](https://prettier.io/docs/en/configuration.html)
- [Step by Stepで始めるESLint](https://qiita.com/howdy39/items/6e2c75861bc5a14b2acf)
- [npmとは　yarnとは](https://qiita.com/Hai-dozo/items/90b852ac29b79a7ea02b)
- [nvm-windowsでNode.jsバージョン管理](https://qiita.com/akuden/items/a88630de9624039c4135)
- [nvm-windowsをインストールする](https://utsu-programmer.com/programming/js/nvm-windows-install/)