ESLintの設定

ESLintとは

ESlintはJavaScriptやTypeScriptなどに使える静的解析ツールです．any型を許容するのか，アロー関数のみを使うのかなど，多岐に渡って厳密なルールを定義することでコードの一貫性を維持することができます．

おすすめの設定法

npmライブラリの追加

npx create-next-app@latestし，以下のように設定した場合を想定します

bash
What is your project named?  xxx
Would you like to use TypeScript?  Yes
Would you like to use ESLint?  Yes
Would you like to use Tailwind CSS?  Yes
Would you like your code inside a `src/` directory?  No
Would you like to use App Router? (recommended)  Yes
Would you like to use Turbopack for `next dev`?  Yes
Would you like to customize the import alias (`@/*` by default)?  No

この場合，デフォルトで以下のようなnpmパッケージが取り込まれます．

json
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.2.29"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "eslint": "^8",
    "eslint-config-next": "14.2.29"
  }

ここからさらにeslint関連のライブラリを追加していきます．

bash
npm install -D \
  @typescript-eslint/eslint-plugin \
  @typescript-eslint/parser \
  @eslint/eslintrc \
  eslint-plugin-import \
  eslint-plugin-import-access \
  eslint-plugin-simple-import-sort \
  eslint-plugin-unused-imports

eslint.config.mjsの設定

create-next-app時にeslintを追加した場合，自動で.eslintrc.jsonが作成されます．ただしjsonで書く場合柔軟性がなくなるので，代わりにフラット構成(eslint.config.mjs)で使うべきです．

js
// /eslint.config.mjs
import { fixupConfigRules, fixupPluginRules } from "@eslint/compat";
import { FlatCompat } from "@eslint/eslintrc";
import js from "@eslint/js";
import typescriptEslint from "@typescript-eslint/eslint-plugin";
import tsParser from "@typescript-eslint/parser";
import importAccess from "eslint-plugin-import-access/flat-config";
import simpleImportSort from "eslint-plugin-simple-import-sort";
import unusedImports from "eslint-plugin-unused-imports";
import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
  recommendedConfig: js.configs.recommended,
  allConfig: js.configs.all,
});

export default [
  {
    ignores: ["coverage", ".next", "*.config.mjs", "components/ui/**/*"],
  },
  ...fixupConfigRules(
    compat.extends(
      "plugin:@typescript-eslint/recommended",
      "next/core-web-vitals",
      "plugin:import/recommended",
      "plugin:import/warnings",
    ),
  ),
  {
    plugins: {
      "@typescript-eslint": fixupPluginRules(typescriptEslint),
      "simple-import-sort": simpleImportSort,
      "unused-imports": unusedImports,
      "import-access": importAccess,
    },
    languageOptions: {
      parser: tsParser,
      ecmaVersion: "latest",
      sourceType: "module",
      parserOptions: {
        project: "./tsconfig.json",
        tsconfigRootDir: __dirname,
      },
    },
    rules: {
      "@typescript-eslint/naming-convention": [
        "error",
        {
          selector: "variable",
          types: ["array", "boolean", "number", "string"],
          format: ["strictCamelCase", "UPPER_CASE"],
        },
        {
          selector: "variable",
          types: ["function"],
          format: ["strictCamelCase", "StrictPascalCase"],
        },
      ],
      "simple-import-sort/imports": "error",
      "simple-import-sort/exports": "error",
      "import/first": "error",
      "import/newline-after-import": "error",
      "import/no-duplicates": "error",
      "@typescript-eslint/consistent-type-exports": "error",
      "import/group-exports": "error",
      "unused-imports/no-unused-imports": "error",
      "import-access/jsdoc": ["error"],
      "no-restricted-imports": [
        "error",
        {
          paths: [
            "sonner",
            "next/link",
            "react-icons",
            "lucide-react",
            "zod",
            { name: "@/components/ui/Form", importNames: ["Form"] },
            {
              name: "@next/third-parties/google",
              importNames: ["sendGAEvent"],
            },
          ],
          patterns: ["react-icons/*"],
        },
      ],
      "no-restricted-syntax": [
        "error",
        {
          selector:
            "CallExpression[callee.object.name='Object'][callee.property.name='keys']",
          message:
            "Do not use Object.keys. Check src/utils/object.ts or add a new utility function.",
        },
      ],
      "@typescript-eslint/no-unused-vars": "off",
      "@typescript-eslint/no-unnecessary-type-assertion": "error",
    },
  },
  {
    files: [
      "src/**/*.stories.tsx",
      "src/**/*Type.ts",
      "src/types/**",
      "src/features/**/*Repository.ts",
      "src/features/**/*Converter.ts",
      "src/features/**/*Constants.ts",
    ],
    rules: {
      "import/group-exports": "off",
    },
  },
  {
    files: ["components/icons/**/*.{ts,tsx}"],
    rules: {
      "no-restricted-imports": "off",
    },
  },
];

コードの解説

1. モジュールのインポート部

js
import { fixupConfigRules, fixupPluginRules } from "@eslint/compat";
import { FlatCompat } from "@eslint/eslintrc";
import js from "@eslint/js";
import typescriptEslint from "@typescript-eslint/eslint-plugin";
import tsParser from "@typescript-eslint/parser";
import importAccess from "eslint-plugin-import-access/flat-config";
import simpleImportSort from "eslint-plugin-simple-import-sort";
import unusedImports from "eslint-plugin-unused-imports";
import path from "node:path";
import { fileURLToPath } from "node:url";

2. __dirname & FlatCompat の準備

js
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
  recommendedConfig: js.configs.recommended,
  allConfig: js.configs.all,
});

3. エクスポートされる ESLint 設定本体

js
export default [
  ...
];

4. 無視ファイルの指定

js
{
  ignores: [
    "coverage",
    ".next",
    "*.config.mjs",
    "components/ui/**/*",
  ],
},

• ESLintがチェック対象から除外するファイルやフォルダを定義
• *.config.mjsなども解析しないよう除外している（誤検出防止）

5. 従来の extends をそのまま使う（変換）

js
...fixupConfigRules(
  compat.extends(
    "plugin:@typescript-eslint/recommended",
    "next/core-web-vitals",
    "plugin:import/recommended",
    "plugin:import/warnings",
  )
),

• compat.extends(...)：.eslintrcスタイルの "extends" を使えるように変換
• fixupConfigRules(...)：ルールにプラグイン名を正しくプレフィックスしてくれる（例: "@typescript-eslint/no-unused-vars" に直してくれる）

6. メイン設定ブロック（ルール、プラグインなど）

js
{
  plugins: {
    "@typescript-eslint": fixupPluginRules(typescriptEslint),
    "simple-import-sort": simpleImportSort,
    "unused-imports": unusedImports,
    "import-access": importAccess,
  },
  ...
}

7. ルール設定（重要）

js
rules: {
  "@typescript-eslint/naming-convention": [...],
  "simple-import-sort/imports": "error",
  "simple-import-sort/exports": "error",
  ...
}

8. 特定ファイルへのルール適用除外

js
{
  files: [...],
  rules: {
    "import/group-exports": "off",
  },
},
{
  files: ["components/icons/**/*.{ts,tsx}"],
  rules: {
    "no-restricted-imports": "off",
  },
},

• 特定のファイルパターン（例: *.stories.tsx, *Type.ts）にだけルールを変更
• group-exportsを無効にすることで、柔軟にexport可能にしている

tailwindの設定

Tailwind CSS は通常の CSS や JS 文法とは違う「ユーティリティクラスを文字列で書くスタイル」なので，エラーチェックや構文チェックができません．そのためこれらの設定をeslintに追加していきます

npm の追加

bash
npm install -D eslint-plugin-readable-tailwind

eslint.config.mjsの設定

import

js
import readableTailwind from "eslint-plugin-readable-tailwind";

ignoresに追記

js
  {
    ignores: [
      "coverage",
      ".next",
      "*.config.mjs",
      "tailwind.config.ts",  // ←追加
      "components/ui/**/*",
    ],
  },

compat.extends(...) に追記

js
...fixupConfigRules(
  compat.extends(
    "plugin:@typescript-eslint/recommended",
    "plugin:import/recommended",
    "plugin:import/warnings",
    "plugin:tailwindcss/recommended", // ←追加
  )
),

pluginsに追加

js
plugins: {
  "@typescript-eslint": fixupPluginRules(typescriptEslint),
  "simple-import-sort": simpleImportSort,
  "unused-imports": unusedImports,
  "import-access": importAccess,
  "readable-tailwind": readableTailwind, // ←追加
},

Tailwindの settings（cn() など補完関数を解析させたい場合）

js
settings: {
  tailwindcss: {
    callees: ["cn", "cva"], // `cn()` や `cva()` の中のclass名もチェック対象に
  },
},

rulesを追加

js
      "tailwindcss/no-custom-classname": [
        "error",
        {
          classRegex:
            "^(class(Name)?|textClassName|iconClassName|innerClassName)$",
          whitelist: ["^[A-Z].*"],
        },
      ],
      "readable-tailwind/multiline": [
        "warn",
        {
          group: "newLine",
        },
      ],

• no-custom-classname：カスタムクラスの混入を制限
• readable-tailwind/multiline: Tailwindクラスを折り返して可読性を高める（複数行に分ける）

tailwind.config.tsの設定

なぜかスタイリングされないといった事象が発生した場合，このファイルを確認することをお勧めします．

ts
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./features/**/*.{js,ts,jsx,tsx,mdx}",
  ],

コンポーネントの場所が設定されていない可能性があります．

prettierの設定

Prettierはコード整形を自動で揃えるフォーマッタです．eslintも一部はコード整形を行いますが，これはより拡張的です．

eslint.config.mjsの設定

ライブラリの追加

bash
npm install -D \
  prettier \
  prettier-plugin-tailwindcss \
  eslint-config-prettier

Tip

※ eslint-plugin-prettier を使いたい場合は、最後に以下を追加：

bash
npm install -D eslint-plugin-prettier

compat.extends(...) に追記

js
...fixupConfigRules(
  compat.extends(
    "plugin:@typescript-eslint/recommended",
    "plugin:import/recommended",
    "plugin:import/warnings",
    "plugin:tailwindcss/recommended",
    "prettier", // ←追加
  )
),

vscodeの設定

プロジェクトに.vscodeディレクトリを配置し，その中にjsonファイルを配置するとvscode専用のプロジェクトごとのエディタ設定を置くことができます．

使えるファイル

settings.jsonの設定

ここではeslintやprettier関連の設定をし，ファイル保存時に自動で整形が走るようにします．

json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "typescript.tsdk": "node_modules/typescript/lib",
  "tailwindCSS.classAttributes": ["class", "className", ".*Class"],
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ]
}

extensions.jsonの設定

プロジェクトで使うべき VSCode 拡張機能のおすすめ一覧を示し，プロジェクトに適用することができます．

json
{
  "recommendations": [
    "dbaeumer.vscode-eslint", // ESLintのエラー表示・自動修正を有効にする拡張
    "esbenp.prettier-vscode", // Prettierで保存時整形をする拡張
    "bradlc.vscode-tailwindcss" // Tailwindクラスの補完・色表示をしてくれる拡張
  ]
}

まとめ

以上のことをすると構文チェックができ，ファイル保存時に自動でフォーマッティングされます．すごく頼もしいです．