ESLint con Claude Code

Gestion automatica de la calidad del codigo con ESLint

ESLint es una herramienta de analisis estatico para JavaScript/TypeScript que verifica automaticamente la calidad y el estilo del codigo. Con el formato Flat Config de ESLint v9 en adelante, la configuracion se ha simplificado. Claude Code soporta con precision desde el diseno de Flat Config hasta la creacion de reglas personalizadas.

Configuracion basica de Flat Config

Solicitemos a Claude Code la configuracion optima de ESLint.

> Crea un ESLint Flat Config para un proyecto Next.js + TypeScript.
> Incluye verificacion estricta de tipos, ordenamiento de imports y verificacion de accesibilidad.

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

  // Patrones de exclusion global
  {
    ignores: [
      "node_modules/",
      ".next/",
      "out/",
      "dist/",
      "coverage/",
      "*.config.{js,mjs}",
    ],
  },

  // Configuracion de TypeScript
  {
    languageOptions: {
      parserOptions: {
        project: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },

  // Configuracion de 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" },
    },
  },

  // Orden de imports
  {
    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",
    },
  },

  // Reglas especificas del proyecto
  {
    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"] }],
    },
  }
);

Separacion de configuracion por tipo de archivo

Patron para aplicar diferentes reglas a archivos de prueba y archivos de configuracion.

// eslint.config.mjs (continuacion)
export default tseslint.config(
  // ...configuracion anterior

  // Configuracion relajada para archivos de prueba
  {
    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",
    },
  },

  // Para archivos de configuracion
  {
    files: ["*.config.ts", "*.config.mts"],
    rules: {
      "import/no-default-export": "off",
    },
  },

  // Componentes de pagina (Next.js)
  {
    files: ["src/app/**/page.tsx", "src/app/**/layout.tsx"],
    rules: {
      "import/no-default-export": "off",
    },
  }
);

Creacion de reglas personalizadas

Puede solicitar a Claude Code la creacion de reglas especificas del proyecto.

// 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: "Prohibe cadenas de texto hardcodeadas en JSX y promueve el uso de i18n",
    },
    messages: {
      noHardcodedString:
        "No use cadenas de texto hardcodeadas directamente. Use la funcion 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" });
        }
      },
    };
  },
});

Integracion con VS Code

Configuracion para ejecutar ESLint automaticamente en 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" }
  ]
}

Integracion con lint-staged

Configuracion para ejecutar lint solo en los archivos modificados al hacer commit.

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

Resumen

Con Flat Config de ESLint, la visibilidad de la configuracion ha mejorado significativamente. Aprovechando Claude Code, puede construir eficientemente desde la seleccion de reglas optimas para el proyecto, integracion con TypeScript hasta la creacion de reglas personalizadas.

Para la configuracion de formato de codigo, consulte la guia de personalizacion de Prettier. Para la ejecucion automatica al hacer commit, consulte la guia de configuracion de Husky + lint-staged. Tambien revise la documentacion oficial de ESLint.