ESLint: 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공식 문서도 확인해 두세요.