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 como exemplo, porém você pode testar em qualquer projeto SPA.

Pré-requisitos:

• Node.js instalado.
• Projeto Vue.js configurado com ESLint e Prettier
• Repositório Git local criado

O Husky

É 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:
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):​

"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

Testando

Exemplo de um commit falhando por conta de um erro de sintaxe.

Exemplo de um commit passando com sucesso e o Prettier formatando o código – trocando as aspas duplas por 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.

Agora o Husky deve funcionar corretamente.

Link do projeto no GitHub: https://github.com/guigovaski/husky-config-example