A qualidade que você precisa para seu projeto: Nx + Husky

No desenvolvimento de software moderno, a manutenção da qualidade do código e a garantia de boas práticas são fundamentais para o sucesso de um projeto. Para alcançar esse objetivo, ferramentas de linting (análise estática de código) e boas práticas de versionamento se tornaram parte integrante do fluxo de trabalho de desenvolvedores e equipes de desenvolvimento.

Nesse contexto, a integração da biblioteca Husky juntamente com o Lint-Staged em um repositório utilizando o Nx Build System se apresenta como uma solução eficaz para automatizar a aplicação de verificações de código antes do commit e garantir a consistência do código em projetos de grande escala.

O que é o Nx Build System?

O Nx é um conjunto de ferramentas de desenvolvimento projetado para auxiliar no desenvolvimento de aplicações em escala, permitindo a criação de monorepos eficientes que abrigam diversos projetos relacionados. Com o Nx, é possível compartilhar código, estabelecer dependências claras entre projetos e executar tarefas como build, testes e linting de maneira otimizada.

Se você nunca utilizou o Nx antes, então não deixe de conferir meus artigos sobre Como eu inicio projetos Angular e Como eu inicio projetos React. Eu garanto que você também vai começar a criar seus projetos com ele. 😉

Introdução ao Husky e Lint-Staged

Husky

O Husky é uma biblioteca Node.js que possibilita a automação de tarefas antes de eventos do Git, como commits e pushes. Ele permite configurar githooks (scripts executados em determinados eventos do Git) para validar, testar ou executar qualquer outra tarefa antes que o código seja efetivamente commitado ou enviado.

Lint-Staged

O Lint-Staged é uma ferramenta que trabalha em conjunto com o Husky para otimizar o processo de linting e testes em projetos versionados pelo Git. Ele permite rodar scripts apenas nos arquivos que estão sendo commitados, ao invés de executar todas as verificações no código inteiro do projeto.

Vantagens da Integração

A integração do Husky e Lint-Staged em um repositório Nx oferece diversas vantagens:

1. Automação de Qualidade de Código: Garante que todas as verificações de qualidade de código, como linting e testes, sejam executadas automaticamente antes de cada commit. E essas verificações serão feitas somente nos projetos afetados dentro do repositório Nx.
2. Economia de Tempo: Ao executar apenas verificações nos arquivos alterados, o Lint-Staged economiza tempo de execução, tornando o fluxo de trabalho mais eficiente.
3. Consistência do Código: Mantém um padrão consistente de código em todo o repositório, independentemente do número de desenvolvedores ou projetos envolvidos.
4. Prevenção de Commits Incorretos: Evita a inclusão de código com erros básicos ou que não esteja de acordo com as diretrizes estabelecidas.

Passos para integração

Passo 1: Instalação e configuração do Husky

Uma vez que já temos o nosso repositório com Nx, vamos executar o seguinte comando dentro do nosso workspace para configurar o Husky:

$ npx husky-init && npm install

Este setup iniciará o husky em seu projeto, editando o package.json e criando o arquivo em forma de hook pre-commit que vamos editar. Na raíz do repositório temos um diretório chamado .husky. Editaremos então o arquivo pre-commit com a seguinte instrução:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

Nosso hook executará o comando lint-staged, portanto agora precisamos configurá-lo no projeto.

Passo 2: Instalação e configuração do Lint-Staged

Vamos instalá-lo via npm como DevDependencies:

npm install -D lint-staged

Agora basta criar o arquivo .lintstagedrc na raíz do repositório com as seguintes etapas:

{
  "{src,modules}/**/*.{js,ts,jsx,tsx,json,html,css,scss}": [
    "nx affected:lint --fix true --uncommitted",
    "nx affected:test",
    "nx format:write --uncommited"
  ]
}

Estamos dizendo para o Lint-Staged rodar os comandos nas pastas src e modules , que é onde o código deste repositório de exemplo está. Você pode informar as pastas que estão de acordo com o seu projeto. Por fim, adicionamos todas as extensões dos arquivos que passarão pelas modificações.

Agora entenderemos o array de etapas:

1. Lint: Com o comando affected:lint, vamos rodar o lint somente nos arquivos dos módulos que foram afetados. Para entender o funcionamento do Affected, leia meu artigo sobre o Nx. A flag --fix tentará corrigir os erros de lint automaticamente. E por fim, esse processo será executado somente nos arquivos que já não foram commitados.
2. Test: Para garantir que nenhum arquivo suba com algum teste quebrado, rodaremos os testes de todos os projetos afetados pelas modificações.
3. Format:Write: O Nx irá formatar todos arquivos não commitados com o Prettier.

Passo 3: Teste e uso

Com as configurações feitas, sempre que um desenvolvedor realizar um commit, o Husky será acionado, executando as verificações configuradas pelo Lint-Staged nos arquivos modificados.

Integração realizada! O lint e a formatação será feita automaticamente neste processo. Caso falhe o processo no lint ou no test, o desenvolvedor será informado disso e ele não conseguirá realizar o commit antes de corrigir tudo.

Conclusão

A integração da biblioteca Husky e do Lint-Staged em um repositório utilizando o Nx Build System é uma maneira poderosa de automatizar e garantir a qualidade do código antes dos commits. Com essa abordagem, os desenvolvedores podem se concentrar mais no desenvolvimento de recursos e menos na manutenção da qualidade do código, resultando em um processo de desenvolvimento mais suave e consistente.

A combinação do Husky e Lint-Staged dentro do ecossistema do Nx oferece uma solução robusta para projetos de grande escala, onde a garantia de qualidade é uma prioridade.