最低限の環境構築② ～Next.js編～

最低限の環境構築①以降の作業を進めていく。
この記事では、以下の手順で進めていく

1. ESLintの設定
2. フォーマット(prettier)の設定
3. tailwindCSSへのeslint設定

ESLintの設定

①.eslintrc.jsonファイルを消して、.eslintrc.jsを作成する

プロジェクトを作成した場合、以下画像のようなディレクトリ構成になっている

この中に、.eslintrc.jsonがあるのでまずはこれを削除する。
このままでも問題はないが、参考にした記事と形式を合わせるために実施する。
（優先度の違いやESLint v9.0.0では非推奨になるなどがあるが今の時点で使えることを優先する）

削除後に、`.eslintrc.js‘を作成して、内容を以下のように定義する

module.exports = {
  extends: ["next/core-web-vitals", "next/typescript"],
};

.eslintignoreファイルの作成

.eslintignoreファイルとは

ESLint に対して「特定のファイルやディレクトリを解析対象から除外する」ための設定ファイル

.gitignoreのようなものと考える。両方とも無視する対象を管理するファイルとなる。
ファイル内の記載内容に関してはこちらの記事を参考にさせて頂きました。
[2023年]Next.js + eslint周りの設定

prettierの設定

上記で参考サイトとして挙げている手順を、そのまま実施することで完了できたので、書くことがなかったです。手順通りに実施すること。
参考箇所

手順通りで問題ないが、次の2点をルールとして追加したい。

①const で宣言された定数への再代入を禁止
②関数に明示的な戻り値の型を指定を強制

なので、.eslintrc.jsを次のように変更する。

module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "next/core-web-vitals",
    "next/typescript",
    "prettier",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: "./tsconfig.json",
  },
  // 追加したルール
  rules: {
    "no-const-assign": "error",
    "@typescript-eslint/explicit-function-return-type": "error",
  },
  plugins: ["@typescript-eslint"],
  root: true,
};

tailwindCSSに対するルールの設定

存在しないクラスを設定したときに、Warningを出してくれたり
cssのclassの並び替えを自動でやってくれたりする。
とても便利なので設定しておく。

①以下のプラグインをインストールする

1. eslint-plugin-tailwindcss
   Tailwind CSS のユーティリティクラスの「ルール違反」や「非推奨の使い方」をチェックし、問題を検出するための ESLint プラグイン

実行するコマンド

npm install --save-dev eslint-plugin-tailwindcss 

②.eslintrc.jsに次の設定を追加

"plugin:tailwindcss/recommended",

ファイル全体は以下のようになる

module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "next/core-web-vitals",
    "next/typescript",
    "plugin:tailwindcss/recommended", // 追加箇所
    "prettier",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: "./tsconfig.json",
  },
  rules: {
    "no-const-assign": "error",
    "@typescript-eslint/explicit-function-return-type": "error",
  },
  plugins: ["@typescript-eslint"],
  root: true,
};

設定が成功している場合は次のように表示してくれる。

実際のエラー表示例:
①存在しないクラスを指定した場合

npm run lint 実行時

②設定したクラス名が以下の順序で並んでいない場合

1. レイアウト: 要素のレイアウトに関連するクラス (p-2, text-center など)
2. ボックスモデル: サイズやパディング、マージン、ボーダーなど (rounded)
3. 背景: 背景色など (bg-blue-500)
4. テキスト: テキスト関連のクラス (text-lg, font-bold)
5. ボックスシャドウやその他のスタイリング: (shadow-md)

npm run lint 実行時

以上で、簡単な検証環境を用意できる。
Lintやフォーマットを実際の現場で設定することはないと考えていたが、ほとんどの現場で必要だったので、こちらで紹介したような方法があることは知っておいた方が良いかと思います。