Next.js + Prettier + ESLint 環境構築

やりたいこと

ファイル保存時に、自動でフォーマットがかかるようにする。
Prettierのフォーマットにはない、タグのセルフクローズ、importのソートをESLintのルールで追加する。

VS Code 拡張機能追加

ESLint、Prettierの拡張機能を追加する。

Prettier ESLint の競合を避ける

必要パッケージをインストール

npm install -D prettier eslint-config-prettier

.eslintrc.json

{
- "extends": "next/core-web-vitals"
+ "extends": ["next/core-web-vitals", "prettier"]
}

package.jsonを編集

package.json

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
-  "lint": "next lint"
+  "lint": "next lint --dir src",
+  "lint:fix": "npm run lint --fix"
},

ESLintルールの追加

タグのセルフクローズ、importのソートのルールを追加する。

.eslintrc.json

{
  "extends": ["next/core-web-vitals", "prettier", "eslint:recommended"],
+  "rules": {
+    "react/self-closing-comp": [
+      "error",
+      {
+        "component": true,
+        "html": true
+      }
+    ],
+    "import/order": [
+      "error",
+      {
+        "alphabetize": {
+          "order": "asc"
+        }
+      }
+    ]
+  }
}

VS Code の設定

ファイル保存時に、PrettierとESLintのフォーマットを実行する。

settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

VS Code を再起動

上記設定で、有効にならない場合、VS Code を再起動すると有効になると思われる。