Next.js 12 系における ESLint、Prettier のセットアップメモ

VSCode を使用した Next.js 12 系の ESLint、Prettier のセットアップ方法について記述する。

## ESLint

### VSCode 上での ESLint のセットアップ

- VSCode 用拡張機能をインストールする

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

### ESLint の整形ルールファイル作成

- Next.js 11 系からは、プロジェクト作成時に ESLint の設定ファイル `.eslintrc`と ESLint 用のパッケージ`eslint`、`eslint-config-next`がデフォルトで用意されているため、追加で準備する必要はない。

  - ちなみに、中身は以下のようになっており、`next/core-web-vitals`デフォルトパッケージに Next.js の基本 ESLint 構成と、より厳密な Core WebVitals ルールセットが含まれている。

    ```json
    {
      "extends": "next/core-web-vitals"
    }
    ```

- Prettier の節で、ESLint と Prettier のコード整形がバッティングしないよう、`.eslintrc`ファイルを編集するので、忘れないように修正する
  - （参考）修正内容は`"extends": ["next", "next/core-web-vitals", "prettier"]`とすること。

### ESLint をコマンドで実行する

- Next.js のソースはすべて `src`ディレクトリ内に格納し、ESLint でチェックするディレクトリも `src`とするため、`package.json` の `lint`コマンドに対して、`--dir src`を追加する
- さらに、ESLint によるコード整形するコマンド`lint:fix`も追加する

```jsonc
  "scripts": {
    "lint": "next lint --dir src",
    // src --ext .js,jsx,.ts,.ts: src ディレクトリ内の js, jsx, ts, tsx ファイルを対象
    // --fix: コード整形
    "lint:fix": "eslint src --ext .js,jsx,.ts,.tsx --fix"
  }
```

- ESLint をコマンドで実行するには以下のコマンドを実行

  - `npm run lint`（ESLint による確認を実行）
  - `npm run lint:fix`（ESLint による修正を実行）

### 参考サイト（ESLint）

- [Basic Features: ESLint](https://nextjs.org/docs/basic-features/eslint)
- [Next.js (TypeScript) に ESLint と Prettier を導入し、コードを綺麗に保とう](https://fwywd.com/tech/next-eslint-prettier)

## Pretteir

### VSCode 上での Prettier のセットアップ

- VSCode 用拡張機能をインストールする

  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)をインストール

### Prettier の整形ルールファイル作成

- `.prettierrc`という Prettier におけるコード整形用ファイルを作成し、ルールを記述する。ここでは Airbnb の規約を参考に、Next.js で一般的に使用される以下のルールとした。
  - ★ 適宜、利用しやすいようルールを修正してください

```json
{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "bracketSameLine": true,
  "jsxSingleQuote": true,
  "embeddedLanguageFormatting": "auto"
}
```

### Prettier のパッケージをインストール

- 以下 2 つのパッケージをインストールする
  - prettier: Prettier を実行するパッケージ
  - eslint-config-prettier: ESLint と Prettier のコード整形がバッティングしないようにするパッケージ

```bash
npm install -D prettier eslint-config-prettier
```

- パッケージインストール後、`.eslintrc`に以下の記述を追加することで、ESLint と Prettier のコード整形がバッティングしなくなる

```jsonc
{
  // 追記："prettier"
  "extends": ["next", "next/core-web-vitals", "prettier"]
}
```

### Prettier をコマンドで実行する

- Prettier を実行するためのコマンドを以下のように追記する

```jsonc
"scripts": {
  // --write: フォーマット整形
  // --ignore-path .gitignore: .gitignore に含まれているファイルはコード整形の対象外
  // 対象ファイルの拡張子を指定
  "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json,css}'"
  },
```

- Prettier をコマンドで起動するには、以下を `package.json`に追記する
  - 起動方法は `npm run format`

### 参考サイト（Prettier）

- [Basic Features: ESLint > Usage With Other Tools > ESLint - Next.js by Vercel](https://nextjs.org/docs/basic-features/eslint#prettier)
- [Next.js (TypeScript) に ESLint と Prettier を導入し、コードを綺麗に保とう](https://fwywd.com/tech/next-eslint-prettier)

## VSCode ワークスペース設定

- VSCode での自動フォーマット、ハイライトを有効にするための設定を行う。 ワークスペースレベルでの設定を行いそれを Git に含めることで、作業者全員で共通の設定を反映する。
  - ワークスペースレベルでの設定を行うため、他のプロジェクトには影響を与えない。
  - 以下のワークスペースの VSCode 設定に以下を追加する。

```json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.formatOnSave": true
  },
  "[json]": {
    "editor.formatOnSave": true
  },
  "[css]": {
    "editor.formatOnSave": true
  },
  "[html]": {
    "editor.formatOnSave": true
  },
  "[markdown]": {
    "editor.formatOnSave": true
  },
  "[yaml]": {
    "editor.formatOnSave": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}
```

- これにより、VSCode 上で以下の機能が有効になる。
  - Shift+Alt+F（Windows の場合）による Prettier による自動フォーマット
  - ESLint による規約違反部分のハイライト
  - 保存時の ESLint による規約違反部分自動修正と Prettier による自動フォーマット