ESLint avec Claude Code

ESLintでコード品質を自動管理する

ESLintはJavaScript/TypeScriptの静的解析ツールで、コードの品質とスタイルを自動的にチェックします。ESLint v9以降のFlat Config形式により、設定がよりシンプルになりました。Claude CodeはFlat Configの設計からカスタムルールの作成まで的確にサポートします。

Flat Configの基本設定

Claude Codeに最適なESLint設定を依頼しましょう。

> Next.js + TypeScriptプロジェクト用のESLint Flat Configを作成して。
> 厳格な型チェック、インポート順序整理、アクセシビリティチェックを含めて。

// eslint.config.mjs
import eslint from "@eslint/js";
import tseslint from "typescript-eslint";
import reactPlugin from "eslint-plugin-react";
import reactHooksPlugin from "eslint-plugin-react-hooks";
import jsxA11yPlugin from "eslint-plugin-jsx-a11y";
import importPlugin from "eslint-plugin-import";

export default tseslint.config(
  // 基本設定
  eslint.configs.recommended,
  ...tseslint.configs.strictTypeChecked,
  ...tseslint.configs.stylisticTypeChecked,

  // グローバル無視パターン
  {
    ignores: [
      "node_modules/",
      ".next/",
      "out/",
      "dist/",
      "coverage/",
      "*.config.{js,mjs}",
    ],
  },

  // TypeScript設定
  {
    languageOptions: {
      parserOptions: {
        project: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },

  // React設定
  {
    plugins: {
      react: reactPlugin,
      "react-hooks": reactHooksPlugin,
      "jsx-a11y": jsxA11yPlugin,
    },
    rules: {
      ...reactPlugin.configs.recommended.rules,
      ...reactHooksPlugin.configs.recommended.rules,
      ...jsxA11yPlugin.configs.recommended.rules,
      "react/react-in-jsx-scope": "off",
      "react/prop-types": "off",
      "react/jsx-no-target-blank": "error",
    },
    settings: {
      react: { version: "detect" },
    },
  },

  // インポート順序
  {
    plugins: { import: importPlugin },
    rules: {
      "import/order": [
        "error",
        {
          groups: [
            "builtin",
            "external",
            "internal",
            "parent",
            "sibling",
            "index",
          ],
          "newlines-between": "always",
          alphabetize: { order: "asc", caseInsensitive: true },
        },
      ],
      "import/no-duplicates": "error",
    },
  },

  // プロジェクト固有のルール
  {
    rules: {
      "@typescript-eslint/no-unused-vars": [
        "error",
        { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
      ],
      "@typescript-eslint/consistent-type-imports": [
        "error",
        { prefer: "type-imports" },
      ],
      "@typescript-eslint/no-misused-promises": [
        "error",
        { checksVoidReturn: { attributes: false } },
      ],
      "no-console": ["warn", { allow: ["warn", "error"] }],
    },
  }
);

ファイル種類ごとの設定分離

テストファイルやスクリプトファイルで異なるルールを適用するパターンです。

// eslint.config.mjs（続き）
export default tseslint.config(
  // ...上記の設定

  // テストファイル用の緩和設定
  {
    files: ["**/*.test.{ts,tsx}", "**/*.spec.{ts,tsx}"],
    rules: {
      "@typescript-eslint/no-unsafe-assignment": "off",
      "@typescript-eslint/no-unsafe-member-access": "off",
      "@typescript-eslint/no-explicit-any": "off",
      "no-console": "off",
    },
  },

  // 設定ファイル用
  {
    files: ["*.config.ts", "*.config.mts"],
    rules: {
      "import/no-default-export": "off",
    },
  },

  // ページコンポーネント（Next.js）
  {
    files: ["src/app/**/page.tsx", "src/app/**/layout.tsx"],
    rules: {
      "import/no-default-export": "off",
    },
  }
);

カスタムルールの作成

プロジェクト固有のルールをClaude Codeに依頼して作成できます。

// eslint-rules/no-hardcoded-strings.ts
import { ESLintUtils } from "@typescript-eslint/utils";

const createRule = ESLintUtils.RuleCreator(
  (name) => `https://example.com/rules/${name}`
);

export const noHardcodedStrings = createRule({
  name: "no-hardcoded-strings",
  meta: {
    type: "suggestion",
    docs: {
      description: "JSX内のハードコード文字列を禁止し、i18nの使用を促す",
    },
    messages: {
      noHardcodedString:
        "ハードコードされた文字列を直接使用しないでください。t()関数を使用してください。",
    },
    schema: [],
  },
  defaultOptions: [],
  create(context) {
    return {
      JSXText(node) {
        const text = node.value.trim();
        if (text.length > 0 && !/^[\s\d\W]+$/.test(text)) {
          context.report({ node, messageId: "noHardcodedString" });
        }
      },
    };
  },
});

VS Code統合

ESLintをVS Codeで自動実行する設定です。

// .vscode/settings.json
{
  "eslint.useFlatConfig": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "eslint.rules.customizations": [
    { "rule": "no-console", "severity": "warn" },
    { "rule": "import/order", "severity": "warn" }
  ]
}

lint-stagedとの連携

コミット時に変更ファイルのみlintを実行する設定です。

// package.json
{
  "lint-staged": {
    "*.{ts,tsx}": ["eslint --fix", "prettier --write"],
    "*.{json,md,yml}": ["prettier --write"]
  }
}

まとめ

ESLintのFlat Configにより、設定の見通しが大幅に改善されました。Claude Codeを活用すれば、プロジェクトに最適なルール選定、TypeScript統合、カスタムルール作成まで効率的に構築可能です。

コードフォーマットの設定はPrettier設定カスタマイズガイドを、コミット時の自動実行はHusky + lint-staged設定ガイドを参照してください。ESLint公式ドキュメントも確認しておきましょう。