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

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

ESLint

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

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

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

Next.js 11 系からは、プロジェクト作成時に ESLint の設定ファイル .eslintrcと ESLint 用のパッケージeslint、eslint-config-nextがデフォルトで用意されているため、追加で準備する必要はない。
- ちなみに、中身は以下のようになっており、next/core-web-vitalsデフォルトパッケージに Next.js の基本 ESLint 構成と、より厳密な Core WebVitals ルールセットが含まれている。
```
{
  "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も追加する

  "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）

Pretteir

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

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

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

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

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

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

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

npm install -D prettier eslint-config-prettier

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

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

Prettier をコマンドで実行する

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

"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）

VSCode ワークスペース設定

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

{
  "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 による自動フォーマット