ESLint dengan Claude Code

ESLintでコード品質を自動manajemen

ESLint JavaScript/TypeScript 静的解析tools 、コード 品質 dan style 自動的 チェック.ESLint v9以降 Flat Config形式 より、pengaturan よりシンプル なりま 。Claude Code Flat Config 設計 dari カスタムルール pembuatanま 的確 サポート.

dasarpengaturan Flat Config

Claude Code 最適なESLintpengaturan 依頼し.

> Next.js + TypeScriptproyek用 ESLint Flat Config buatkan.
> 厳格な型チェック、インポート順序整理、アクセシビリティチェック 含めて。

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

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

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

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

  // proyek固有 ルール
  {
    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"] }],
    },
  }
);

pengaturan分離 file種類ご

testfileやscriptfile 異なるルール 適用 pola.

// eslint.config.mjs（続き）
export default tseslint.config(
  // ...上記 pengaturan

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

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

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

pembuatan カスタムルール

proyek固有 ルール Claude Code 依頼 pembuatan bisa dilakukan.

// 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内 ハードコードstring 禁止し、i18n penggunaan 促す",
    },
    messages: {
      noHardcodedString:
        "ハードコードされたstring 直接penggunaanし tidak ください。t()fungsi penggunaan ください。",
    },
    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 Codeintegrasi

ESLint VS Code 自動実行 pengaturan.

// .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" }
  ]
}

integrasi lint-staged

コミット時 変更file みlint 実行 pengaturan.

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

Ringkasan

ESLint Flat Config より、pengaturan 見通し 大幅 peningkatanされま 。Claude Code pemanfaatanすれば、proyek 最適なルール選定、TypeScriptintegrasi、カスタムルールpembuatanま efisien pembangunandimungkinkan.

コードformat pengaturan Prettierpengaturanカスタマイズpanduan 、コミット時 自動実行 Husky + lint-stagedpengaturanpanduan silakan lihat.ESLint公式dokumen juga konfirmasi おき.