> ## Content Index > Fetch the complete content index at: https://www.azurebrasil.cloud/llms.txt > Use this file to discover other available public pages before exploring further. # Evitando commits com erros usando Husky em projetos frontend - URL: https://www.azurebrasil.cloud/blog/evitando-commits-com-erros-usando-husky-em-projetos-frontend/ - Published: 2026-02-04T13:32:24.000Z - Updated: 2026-02-04T13:55:17.000Z - Author: Guilherme Govaski Em um ecossistema moderno de desenvolvimento, especialmente quando trabalhamos com CI/CD, o custo de subir uma versão com erro pode gerar estresse, especialmente porque o pipeline geralmente demora alguns minutos para finalizar sua execução, fazendo com que os desenvolvedores esperem o fim da execução para poder ter um feedback e saber se o pipeline executou com sucesso ou não. O objetivo deste artigo é apresentar uma ferramenta que fará com que o código frontend seja validado antes de cada commit no ambiente local de cada desenvolvedor, fazendo com que a validação e a correção — caso necessário — sejam feitas antes do código subir para o repositório remoto. Utilizaremos um projeto [Vue.js 3](https://vuejs.org/?ref=azurebrasil.cloud) como exemplo, porém você pode testar em qualquer projeto SPA. **Pré-requisitos:** - [Node.js](https://nodejs.org/pt-br?ref=azurebrasil.cloud) instalado. - Projeto Vue.js configurado com [ESLint](https://nodejs.org/pt-br?ref=azurebrasil.cloud) e [Prettier](https://prettier.io/?ref=azurebrasil.cloud) - Repositório [Git](https://git-scm.com/?ref=azurebrasil.cloud) local criado ### O [Husky](https://typicode.github.io/husky/?ref=azurebrasil.cloud) É uma ferramenta moderna e padrão de mercado usada para gerenciar *Git Hooks*. Ele intercepta comandos do Git, como `commit` ou `push` e executa scripts arbitrários. Caso o comando falhar, o comando Git é abortado. Com isso, podemos criar scripts personalizados que serão executados antes de cada commit e fazer validações no código frontend para que tudo se mantenha padronizado e livre de erros. No terminal, execute os comandos seguintes para instalar e configurar o Husky no projeto: 1\. `npm install husky -D` \- instala o Husky como dependência de desenvolvimento 2\. `npx husky init` \- cria os arquivos e comandos necessários O comando `npx husky init` cria uma pasta chamada **.husky** com um arquivo **pre-commit** dentro–esse arquivo deve conter todos os scripts que serão executados antes de cada commit, em ordem – e adiciona um script chamado **prepare** no arquivo package.json, que é script padrão do NPM que é executado sempre quando um comando `npm install` é executado, garantindo que o Husky seja configurado corretamente quando outros desenvolvedores baixarem o projeto e executarem o comando `npm install` ou de forma manual `npm run prepare`. **Otimização com o** [**Lint-staged**](https://www.npmjs.com/package/lint-staged?ref=azurebrasil.cloud)**:** Em projetos grandes e corporativos, rodar formatadores de código e linters manualmente em todos os arquivos durante cada commit pode ser demorado e irritante. O Lint-staged resolve isso executando os scripts de formatação e validação apenas nos arquivos que estão na área de stage do Git. Além disso, ele permite você adicionar e personalizar comandos que você queira que sejam executados e adicionar apenas as extensões dos arquivos que você queira que sejam trackeados. Podemos combinar essa ferramenta com o Husky e permitir a execução de linters e formatadores de código ao fazer um commit. Para instalar o Lint-staged, execute o comando no terminal: `npm install lint-staged -D.` Agora adicione esse trecho de código no arquivo package.json (modifique de acordo com a estrutura de diretórios da sua aplicação e os comandos dos linters e formatter que você esteja utilizando):​ ```JSON "lint-staged": { "*.{js,ts,vue}": [ "eslint . --fix", "prettier --write src/", ], "*.{json,css,md}": [ "prettier --write src/", ] } ``` Agora é só modificar o arquivo **.husky/pre-commit** e adicionar o comando: `npx lint-staged` na primeira linha ![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/2026/01/image-11.png) ### **Testando** Exemplo de um commit falhando por conta de um erro de sintaxe. ![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/2026/01/image-12-1.png) Introduzindo um erro de sintaxe em um arquivo .vue ![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/2026/01/image-13.png) Commit falhando por conta do erro no código Exemplo de um commit passando com sucesso e o Prettier formatando o código – trocando as aspas duplas por aspas simples. ![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/2026/01/image-14-1.png) Código sem erros e com aspas duplas no import do componente TheWelcome ![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/2026/01/image-16-1.png) Commit passou e o import com aspas duplas foi corrigido para aspas simples ### **DICA BONUS** Se você tem um projeto monorepo em que a pasta **.git** está em um nível acima do projeto frontend, você precisa fazer uma configuração extra para que o Husky funcione corretamente, pois o Husky se baseia na localização da sua pasta **.git** para executar os comandos. Considerando que temos um projeto com a seguinte estrutura de diretórios: . |– .git |– frontend |– backend 1. Execute o comando no terminal `git config core.hooksPath frontend/.husky/_` 2. Altere o script **prepare** dentro do arquivo package.json (na seção de scripts) no projeto frontend para: `"prepare": "cd .. && husky frontend/.husky"` 3. Adicione o comando `cd frontend` na primeira linha do arquivo **frontend/.husky/pre-commit**. ![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/2026/01/image-21.png) Arquivo "pre-commit" com os dois comandos Agora o Husky deve funcionar corretamente. Link do projeto no GitHub: [https://github.com/guigovaski/husky-config-example](https://github.com/guigovaski/husky-config-example?ref=azurebrasil.cloud)