Husky y lint-staged con Claude Code

Garantizando automaticamente la calidad del codigo con Git hooks

Husky es una herramienta para gestionar facilmente los Git hooks, y lint-staged es una herramienta que ejecuta lint y formateo solo en los archivos preparados para commit. Al combinar ambos, puede verificar automaticamente la calidad del codigo antes de cada commit y evitar que codigo problematico entre al repositorio.

Configuracion

Solicitemos a Claude Code la configuracion.

> Configura Husky + lint-staged.
> Incluye verificaciones pre-commit de ESLint, Prettier, verificacion de tipos y pruebas.

# Instalacion de paquetes
npm install -D husky lint-staged

# Inicializacion de Husky
npx husky init

// .husky/pre-commit
npx lint-staged

// package.json
{
  "lint-staged": {
    "*.{ts,tsx}": [
      "eslint --fix --max-warnings 0",
      "prettier --write"
    ],
    "*.{js,jsx,mjs,cjs}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,md,yml,yaml}": [
      "prettier --write"
    ],
    "*.css": [
      "prettier --write"
    ]
  }
}

Agregar verificacion de tipos

Hook que verifica errores de tipo que afectan a los archivos preparados.

// .husky/pre-commit
#!/usr/bin/env sh

# lint-staged (ESLint + Prettier)
npx lint-staged

# Verificacion de tipos TypeScript (proyecto completo)
npx tsc --noEmit --pretty

La verificacion de tipos no tiene sentido por archivo individual, por lo que se ejecuta en todo el proyecto. En proyectos grandes puede tomar tiempo, por lo que tambien es valido delegarlo al CI.

Validacion de mensajes de commit

Hook que obliga a que los mensajes de commit cumplan con conventional commits.

# Instalacion de commitlint
npm install -D @commitlint/cli @commitlint/config-conventional

// commitlint.config.mjs
export default {
  extends: ["@commitlint/config-conventional"],
  rules: {
    "type-enum": [
      2, "always",
      ["feat", "fix", "docs", "style", "refactor", "perf", "test", "build", "ci", "chore", "revert"],
    ],
    "subject-max-length": [2, "always", 72],
    "body-max-line-length": [2, "always", 100],
  },
};

// .husky/commit-msg
npx --no -- commitlint --edit ${1}

Configuracion avanzada de lint-staged

Configuracion que ejecuta diferentes procesamientos segun el patron de archivos.

// lint-staged.config.mjs
export default {
  // Archivos TypeScript/JSX
  "*.{ts,tsx}": (filenames) => {
    const files = filenames.join(" ");
    return [
      `eslint --fix --max-warnings 0 ${files}`,
      `prettier --write ${files}`,
      // Ejecutar pruebas relacionadas con los archivos modificados
      `vitest related --run ${files}`,
    ];
  },

  // Archivos de estilo
  "*.{css,scss}": ["prettier --write"],

  // Esquema Prisma
  "prisma/schema.prisma": () => [
    "npx prisma format",
    "npx prisma validate",
  ],

  // Archivo de paquete
  "package.json": ["npx sort-package-json"],
};

Verificacion antes de push

Hook que ejecuta build y pruebas antes de push.

// .husky/pre-push
#!/usr/bin/env sh

echo "Ejecutando verificaciones antes de push..."

# Verificacion de build
npm run build

# Ejecucion de pruebas
npm run test:ci

echo "Todas las verificaciones pasaron"

Integracion con CI/CD

Configuracion que alinea los hooks locales con las verificaciones del CI.

// package.json
{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint --fix .",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "typecheck": "tsc --noEmit",
    "test": "vitest",
    "test:ci": "vitest run --coverage",
    "validate": "npm run typecheck && npm run lint && npm run format:check && npm run test:ci",
    "prepare": "husky"
  }
}

Solucion de problemas

Problemas comunes y soluciones.

# Si el hook no se ejecuta
chmod +x .husky/pre-commit
chmod +x .husky/commit-msg

# Verificar la ruta de git hooks
git config core.hooksPath

# Depuracion de lint-staged
npx lint-staged --debug

# Saltar hooks temporalmente (solo en emergencias)
git commit --no-verify -m "hotfix: correccion de emergencia"

Puntos clave para la adopcion en equipo

• Introducir gradualmente - Primero solo Prettier, luego ESLint, y finalmente verificacion de tipos
• Coincidir con CI - Ejecutar las mismas verificaciones en hooks locales y en CI
• Considerar el rendimiento - Delegar verificaciones pesadas al CI para no ralentizar los commits
• Documentar - Compartir los pasos de configuracion y las reglas de uso de --no-verify

Resumen

La combinacion de Husky + lint-staged es un mecanismo basico y efectivo para garantizar automaticamente la calidad del codigo. Aprovechando Claude Code, puede manejar eficientemente desde la configuracion hasta la creacion de hooks personalizados y la solucion de problemas.

Para la configuracion de ESLint, consulte la guia de optimizacion de ESLint. Para la configuracion de Prettier, consulte la guia de personalizacion de Prettier. Tambien revise la documentacion oficial de Husky.