ESLintとPrettierをVSCodeで使用する

チーム開発をすると、各自のコーディングのスタイル(インデントやスペース、改行位置など)がバラバラになるのではないでしょうか(チーム開発したことないので、あくまで想定ですが。。)
本記事では、コードを自動成形する(Prettier)とついでにコード規約のチェック(ESLint)の導入をしたいと思います。

開発環境とディレクトリ構成は下記になります。

##### 開発環境
- Edition: Windows 11 Home, Version: 22H2, OSビルド: 22621.1702
- WSL2
- Docker Desktop for Windows: 4.20.1 (110738)
- Docker Engine: 24.0.2
- Docker Compose: v2.18.1
- React : 18.2.0
- Typescript: 4.9.5
- ESLint: 8.44.0
- Prettier: 3.0.0

##### ディレクトリ構成
frontend
├app
│├.eslintrc.json
│├.prettierrc.json
│├node_modules
│├package.json
│├package-lock.json
│├src
│├public
│└tsconfig.json
└Dockerfile

##### 前提
- VSCodeが導入されている
- npm(package.json)がインストールされている

##### プロジェクトの作成
ターミナル上で下記のコマンドを実行し、任意の場所にプロジェクトを作成します。
コマンドのapp部分は、適宜名前を変更して下さい。
プロジェクトが作成出来たら、ディレクトリに移動しておきます。
```console
npx create-react-app app --template typescript
cd frontend/app
```
##### ESLint moduleのインストールと設定ファイルの作成
ESLint パッケージをインストールします。
ターミナル上で下記のコマンドを実行
```console
npm install -D eslint
```
ルートディレクトリ(app)内に`node_modules`ディレクトリが作成され、パッケージがインストールされています。
続けて、ESLint の設定ファイルを作成します。
下記、ESLintのサイトを確認し、Quick start項目に記載されているコマンドをターミナルで実施します。

https://eslint.org/docs/latest/user-guide/getting-started

```console
npm init @eslint/config
```
コマンド実施後、対話形式で色々聞かれるので選択していきます。
開発環境にあった選択をして下さい。

```console
//Prettierでコードスタイルを整えるので、"To check syntax and find problems"を選択。
? 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

//"JavaScript modules (import/export)"を選択。
? What type of modules does your project use? … 
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

//"React"を選択
? Which framework does your project use? … 
❯ React
  Vue.js
  None of these

//TypeScriptを使用するので、"Yes"を選択。
? Does your project use TypeScript? › No / Yes

//アプリはブラウザで動くので、"Browser"を選択。
? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node

//設定ファイルには、‘JSON’を選択。
? What format do you want your config file to be in? … 
  JavaScript
  YAML
❯ JSON

//必要なものをインストールしてくれるので、"Yes"を選択。
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint@latest
? Would you like to install them now? › No / Yes

//パッケージマネージャに"npm"を使用
? Which package manager do you want to use? … 
  npm
❯ yarn
  pnpm
```
ルートディレクトリ(app)内に.eslintrc.jsonが出来ていれば、設定完了です。

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

```console
npm install -D prettier
```

ルートディレクトリの`node_modules`ディレクトリ内にパッケージがインストールされます。
続けて、ルートディレクトリ(app)内に.prettier.jsonファイルを作成します。
```console:.prettier.json
{
  "printWidth": 150,// 自動折返し文字数
  "trailingComma": "es5",// 複数行の場合、可能な限り末尾のコンマを出力
  "tabWidth": 2,// タブサイズ
  "semi": true,// ステートメントの最後にセミコロンを付与
  "endOfLine": "auto",// 改行の文字コードを指定
  "singleQuote": true // 二重引用符の代わりに単一引用符を使用
}
```
##### VSCodeにESLintプラグインを導入
VSCodeの拡張機能から次のプラグインをインストールします。
ESLint : dbaeumer.vscode-eslint

##### VSCodeにPrettierプラグインを導入
VSCodeの拡張機能から次のプラグインをインストールします。
Prettier - Code formatter : esbenp.prettier-vscode

##### VSCodeの設定
プラグインを導入出来たら、一度VSCodeを再起動します。
- VSCodeの設定画面からeditor.defaultFormatterと検索し、DefaultFormatter項目でesbenp.prettier-vscodeを選択します。
この設定後にソースコードのコンテキストメニューからドキュメントのフォーマットを選択するとコードフォーマッティングが実行されます。

- ファイル保存時に自動的にコードフォーマッティングを実行する場合は、VSCodeの設定画面からeditor.formatOnSaveと検索し、FormatOnSave項目にチェックを付けます。

##### 完了
VSCodeでコードがかかれているファイルを保存すると成形されると思います。