Claude Code के साथ ESLint

ESLintでcode品質を自動managementする

ESLintはJavaScript/TypeScriptの静的解析ツールで、codeの品質とstyleを自動的にcheckし है।ESLint v9以降のFlat Config形式 से、settingsがよりシンプルになり हुआ।Claude CodeはFlat Configの設計 सेカスタムruleのcreate तक的確にサポートし है।

Flat Configの基本settings

Claude Codeに最適なESLintsettingsを依頼 करें।

> Next.js + TypeScriptProject用のESLint Flat Configをबनाओ。
> 厳格なtype check、インポート順序整理、accessibilitycheckを含めて。

// 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(
  // 基本settings
  eslint.configs.recommended,
  ...tseslint.configs.strictTypeChecked,
  ...tseslint.configs.stylisticTypeChecked,

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

  // TypeScriptsettings
  {
    languageOptions: {
      parserOptions: {
        project: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },

  // Reactsettings
  {
    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",
    },
  },

  // Project固有のrule
  {
    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"] }],
    },
  }
);

file種類ごとのsettings分離

testfileやスクリプトfileで異なるruleを適用するpattern है।

// eslint.config.mjs（続き）
export default tseslint.config(
  // ...उपरोक्तのsettings

  // testfile用の緩和settings
  {
    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",
    },
  },

  // settingsfile用
  {
    files: ["*.config.ts", "*.config.mts"],
    rules: {
      "import/no-default-export": "off",
    },
  },

  // pagecomponent（Next.js）
  {
    files: ["src/app/**/page.tsx", "src/app/**/layout.tsx"],
    rules: {
      "import/no-default-export": "off",
    },
  }
);

カスタムruleのcreate

Project固有のruleをClaude Code को requestしてcreateでき है।

// 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内のハードcode文字列を禁止し、i18nの使用を促す",
    },
    messages: {
      noHardcodedString:
        "ハードcodeされた文字列を直接使用しないで करें।t()functionを使用して करें।",
    },
    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 Codeintegration

ESLintをVS Codeで自動実行するsettings है।

// .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とのintegration

コミット時に変更fileのみlintを実行するsettings है।

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

まとめ

ESLintのFlat Config से、settingsの見通しが大幅に改善され हुआ।Claude Code का लाभ उठाकर、Projectに最適なrule選定、TypeScriptintegration、カスタムrulecreate तकefficientlybuildpossible है।

codeformatのsettingsはPrettiersettingscustomizeガイドを、コミット時の自動実行はHusky + lint-stagedsettingsガイドをदेखें。ESLintofficial documentationもconfirmしておきましょう。