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

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）

• Basic Features: ESLint
• Next.js (TypeScript) に ESLint と Prettier を導入し、コードを綺麗に保とう

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）

• Basic Features: ESLint > Usage With Other Tools > ESLint - Next.js by Vercel
• Next.js (TypeScript) に ESLint と 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 による自動フォーマット