Cómo configurar Claude Code para el estilo de código

Important: La funcionalidad solo está disponible para los clientes que se inscribieron en nuestro programa de acceso anticipado (Early Access, EA). Para obtener más información sobre nuestros criterios de elegibilidad para los programas de EA, comuníquese con su representante de Guidewire. Tenga en cuenta que las funciones de EA podrían o no formar parte de nuestras ofertas futuras.

Para garantizar los mejores estándares de calidad del código y asegurarse de que el código generado pase las reglas de linting y el formato de Prettier, se recomienda configurar el gancho de Claude PostToolUse, que ayuda al agente a comprender los posibles problemas de linting o formato que pueden ocurrir después de crear un archivo. Este gancho valida y formatea automáticamente los archivos de código cada vez que Claude Code los modifica.

Requisitos

Note: Este gancho de ejemplo se crea en función de la configuración base de las aplicaciones de Jutro. Los scripts npm pueden variar si no utiliza la configuración base de la aplicación de Jutro.

Agregue los siguientes scripts npm a su package.json:

{
  "scripts": {
    "prettier:files": "prettier --write -c",
    "lint:js:files": "eslint",
    "lint:css:files": "stylelint"
  }
}

Pasos de configuración

1. Cree el directorio de ganchos

En su terminal, ejecute:

mkdir -p .claude/hooks

2. Cree el archivo de gancho

Cree su archivo .claude/hooks/post-tool-use.js y agregue el siguiente contenido:

#!/usr/bin/env node

const { spawnSync } = require('child_process');

async function validateCode() {
  try {
    const chunks = [];
    for await (const chunk of process.stdin) {
      chunks.push(chunk);
    }
    const hookInput = JSON.parse(Buffer.concat(chunks).toString());
    const filePath = hookInput.tool_input?.file_path;

    if (!filePath) {
      console.error('No file path provided in hook input');
      process.exit(0);
    }

    let validationCommands = [];

    if (/\.(ts|tsx|js|jsx|json|json5|scss|css|html|mdx)$/.test(filePath)) {
      validationCommands.push(['npm', 'run', 'prettier:files', '--', filePath]);
    }

    if (/\.(ts|tsx|js|jsx)$/.test(filePath)) {
      validationCommands.push([
        'npm',
        'run',
        'lint:js:files',
        '--',
        '--fix',
        filePath,
      ]);
    }

    if (/\.(css|scss|sass|less)$/.test(filePath)) {
      validationCommands.push([
        'npm',
        'run',
        'lint:css:files',
        '--',
        '--fix',
        filePath,
      ]);
    }

    if (validationCommands.length === 0) {
      console.error(`Skipping linting for ${filePath} (no linter configured)`);
      process.exit(0);
    }

    console.error(`Validating code standards for file ${filePath}`);

    for (const command of validationCommands) {
      const mainCmd = command[0];
      const args = command.slice(1);

      const result = spawnSync(mainCmd, args, {
        encoding: 'utf-8',
        stdio: 'pipe',
      });

      if (result.status !== 0) {
        console.error(`exit code: ${result.status}`);
        const combinedOutput = [result.stdout, result.stderr]
          .filter(Boolean)
          .join('')
          .trim();
        const errorText =
          combinedOutput ||
          (result.error && result.error.message) ||
          'No output from linter.';

        const errorMessage = `
        ❌ LINTING FAILED ❌
        File: ${filePath}
        Command: ${command.join(' ')}

        Errors:
        ${errorText}

        ⚠️  The file has linting errors that must be fixed before proceeding.
        `;
        console.error(errorMessage);
        process.exit(2);
      }

      console.error(`✓ "npm ${command.join(' ')}" passed for ${filePath}`);
    }

    console.error('exit code: 0');
    process.exit(0);
  } catch (error) {
    console.error('Error processing hook:', error.message);
    process.exit(1);
  }
}

validateCode();

3. Haga que el gancho sea ejecutable

En su terminal, ejecute:

chmod +x .claude/hooks/post-tool-use.js

4. Configure su instancia de Claude Code para usar el gancho

Cree o actualice su archivo .claude/settings.json:

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Edit|Write",
        "hooks": [
          {
            "type": "command",
            "command": ".claude/hooks/post-tool-use.js"
          }
        ]
      }
    ]
  }
}

Cómo funciona

El gancho automáticamente:

• Ejecuta Prettier en archivos modificados.
• Ejecuta ESLint en los archivos .js, .jsx, .ts y .tsx.
• Ejecuta Stylelint en los archivos .css, .scss, .sass y .less.
• Bloquea los cambios si la validación falla.
• Soluciona automáticamente los problemas cuando es posible.

Códigos de salida

Cuando se utiliza el gancho, se pueden devolver los siguientes códigos de salida:

• 0: Todas las validaciones aprobadas.
• 1: Error inesperado.
• 2: Se encontraron errores de linting o formato.