Hooks no Claude Code para Linting e Formatação

O Claude Code edita dezenas de arquivos em uma sessão típica de desenvolvimento. Cada alteração é uma oportunidade para um erro de estilo escapar, uma indentação inconsistente passar batida ou uma variável não utilizada sobreviver ao código final. Revisar manualmente cada arquivo modificado pela IA consome tempo e atenção que poderiam estar direcionados à lógica do projeto. A solução prática é configurar hooks que disparem linting e formatação automaticamente — toda vez que o Claude Code salvar um arquivo, seu código já sai padronizado.

Este tutorial mostra, passo a passo, como criar hooks no Claude Code que integram ESLint e Prettier ao fluxo de trabalho, eliminando a necessidade de rodar comandos manuais após cada edição.

Por que automatizar linting com hooks no Claude Code

Quando você pede ao Claude Code para refatorar um componente React ou criar uma nova rota de API, ele foca na funcionalidade. O resultado geralmente funciona, mas nem sempre respeita as regras de estilo do seu projeto. Variáveis declaradas com var em vez de const, ponto e vírgula faltando, imports não utilizados — problemas que o ESLint detecta em milissegundos.

Sem hooks, o fluxo é assim:

1. Claude Code edita o arquivo
2. Você percebe (ou não) que precisa rodar o linter
3. Executa npx eslint --fix manualmente
4. Corrige o que o --fix não resolveu
5. Repete para cada arquivo modificado

Com hooks configurados, o passo 2 ao 5 desaparece. O linter roda automaticamente após cada edição, e o Claude Code recebe o feedback dos erros restantes para corrigir na sequência.

Benefícios concretos

Configurando hook de linting com ESLint

Antes de criar o hook, garanta que o ESLint está instalado e configurado no projeto. Se ainda não estiver:

npm init @eslint/config@latest

Agora, abra (ou crie) o arquivo .claude/settings.json na raiz do seu projeto. A estrutura de hooks segue o padrão de eventos do Claude Code:

{
  "hooks": {
    "afterEdit": [
      {
        "command": "npx eslint --fix {{filePath}}",
        "description": "Roda ESLint com auto-fix após cada edição",
        "filePatterns": ["*.js", "*.jsx", "*.ts", "*.tsx"]
      }
    ]
  }
}

Entendendo cada campo

• afterEdit: o evento que dispara o hook — neste caso, após o Claude Code editar qualquer arquivo.
• command: o comando shell executado. A variável {{filePath}} é substituída pelo caminho do arquivo modificado.
• filePatterns: filtro de extensões. O hook só dispara para arquivos JavaScript e TypeScript.
• description: texto descritivo que aparece nos logs do Claude Code.

Testando o hook de linting

Para verificar se o hook funciona, peça ao Claude Code para criar um arquivo simples com erros propositais:

> Claude, crie um arquivo test-hook.js com uma variável var e um console.log sem ponto e vírgula

Após a criação, observe os logs. Você deve ver a execução do ESLint e as correções automáticas aplicadas ao arquivo.

Adicionando formatação automática com Prettier

ESLint cuida de problemas lógicos e de boas práticas. Prettier cuida da formatação visual — indentação, largura de linha, aspas simples versus duplas. A combinação dos dois cobre praticamente todas as necessidades de qualidade de código.

Instale o Prettier e o plugin de integração com ESLint:

npm install --save-dev prettier eslint-config-prettier

Adicione prettier ao final do array extends no seu eslint.config.js para evitar conflitos de regras.

Agora, adicione um segundo hook no .claude/settings.json:

{
  "hooks": {
    "afterEdit": [
      {
        "command": "npx prettier --write {{filePath}}",
        "description": "Formata o arquivo com Prettier após edição",
        "filePatterns": ["*.js", "*.jsx", "*.ts", "*.tsx", "*.css", "*.json", "*.md"]
      },
      {
        "command": "npx eslint --fix {{filePath}}",
        "description": "Roda ESLint com auto-fix após formatação",
        "filePatterns": ["*.js", "*.jsx", "*.ts", "*.tsx"]
      }
    ]
  }
}

Configuração recomendada do Prettier

Crie um arquivo .prettierrc na raiz do projeto:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80
}

Essas configurações são amplamente adotadas e funcionam bem com a maioria dos projetos JavaScript/TypeScript.

Testando e ajustando seus hooks de qualidade

Configurar os hooks é metade do trabalho. A outra metade é garantir que funcionam de forma confiável sem atrapalhar o fluxo do Claude Code.

Checklist de validação

1. Crie um arquivo com erros propositais — peça ao Claude Code para gerar código sem formatação e verifique se os hooks corrigem automaticamente.
2. Edite um arquivo existente — confirme que o hook dispara apenas para as extensões configuradas em filePatterns.
3. Verifique o tempo de execução — hooks que demoram mais de 2-3 segundos por arquivo podem travar o fluxo. Monitore os logs.
4. Teste com arquivos grandes — rode o hook em um arquivo com 500+ linhas para garantir que o ESLint e o Prettier não engasgam.

Problemas comuns e soluções

Para ativar o cache do ESLint, ajuste o comando do hook:

"command": "npx eslint --fix --cache {{filePath}}"

O cache armazena resultados de arquivos que não mudaram, reduzindo drasticamente o tempo de execução em projetos grandes.

Combinando com hooks de pre-commit

Se o projeto já usa husky ou lint-staged para hooks de Git, os hooks do Claude Code não entram em conflito. Eles operam em camadas diferentes: os hooks do Claude Code rodam durante a edição, enquanto hooks de Git rodam no momento do commit. Ter ambos é uma rede de segurança dupla — o código é validado ao ser escrito e novamente ao ser commitado.

Configuração final completa

Reunindo tudo, o .claude/settings.json completo fica assim:

{
  "hooks": {
    "afterEdit": [
      {
        "command": "npx prettier --write {{filePath}}",
        "description": "Formatação automática com Prettier",
        "filePatterns": ["*.js", "*.jsx", "*.ts", "*.tsx", "*.css", "*.json", "*.md"]
      },
      {
        "command": "npx eslint --fix --cache {{filePath}}",
        "description": "Linting e auto-fix com ESLint",
        "filePatterns": ["*.js", "*.jsx", "*.ts", "*.tsx"]
      }
    ]
  }
}

Com essa configuração, cada arquivo que o Claude Code tocar sai formatado e lintado. Sem intervenção manual, sem esquecimentos, sem inconsistências. Seu código mantém o mesmo padrão independentemente de ter sido escrito por você ou pela IA.

Artigos relacionados

• Claude Code – Guia Completo para Criar Projetos com IA
• Claude Code Hooks — Automatize Seu Fluxo de Trabalho
• Hooks do Claude Code para Validação e Segurança

Bruno Bracaioli

Empreendedor e Desenvolvedor

Bruno Bracaioli é especialista em arquitetura de software, ciência de dados e cybersecurity. Além disso, investe em criptomoedas e em investimentos tradicionais como CDBs, Ações, Tesouro e outros. É influenciador digital no instagram (@brunobracaioli) e no Youtube (/brunobracaioli). Contato por: bruno@bracaiolitech.com ou pelo bruno@b2tech.com