A padronização que você precisa para seu projeto: Nx + Conventional Commits

Andrew Rosário
5 min readMar 4, 2024

--

No desenvolvimento de software colaborativo e ágil, a comunicação clara e padronizada é essencial para garantir a qualidade do código, assim como a rastreabilidade das alterações e a colaboração eficiente entre os membros da equipe.

Os Conventional Commits, juntamente com as bibliotecas Commitlint e Commitizen, desempenham um papel crucial nesse processo, permitindo um histórico de commits consistente e bem documentado. Neste artigo, exploraremos a importância dos Conventional Commits e realizaremos a integração das bibliotecas commitlint e commitizen em um repositório utilizando o Nx Build System.

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. 😉

A Importância dos Conventional Commits

Os Conventional Commits são um padrão de nomenclatura de commits que segue uma convenção específica para descrever de forma clara e concisa o propósito da alteração. Isso inclui um prefixo indicando o tipo da alteração (como “feat” para novas funcionalidades ou “fix” para correções de bugs), seguido por uma descrição sucinta da mudança. Além disso, os commits podem incluir informações adicionais, como o escopo da alteração e uma mensagem mais detalhada.

Benefícios dos Conventional Commits

  1. Clareza na Comunicação: O uso de um padrão predefinido torna mais fácil para todos os membros da equipe entenderem rapidamente o propósito de um commit.
  2. Histórico de Alterações Significativo: Um histórico bem estruturado ajuda a rastrear a evolução do projeto ao longo do tempo e facilita a busca por alterações específicas.
  3. Geração de Changelogs Automáticos: Ferramentas podem analisar os commits seguindo a convenção e gerar automaticamente changelogs e release notes.

Integração do Commitlint e Commitizen com o Nx

O Nx Build System, conhecido por sua eficiência no desenvolvimento de projetos em escala, permite uma integração suave das bibliotecas Commitlint e Commitizen. O Commitlint valida os commits em relação ao padrão Conventional Commits, enquanto o Commitizen facilita a criação de commits seguindo essa convenção.

Além disso, vamos instalar uma extensão do Commitlint chamada Config-Nx-Scopes. Ela nos ajudará a validar se o o escopo do nosso commit está válido de acordo com os módulos existentes do seu Workspace Nx.

Passo 1: Instalação do Husky

O Husky é uma biblioteca que possibilita a automação de tarefas antes de eventos do Git, como por exemplo nossos commits. Recomendo a leitura do meu artigo A qualidade que você precisa para seus projetos: Nx + 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
$ npx husky add .husky/commit-msg ''
$ npx husky add .husky/prepare-commit-msg ''

Este setup iniciará o husky em seu projeto, editando o package.json e criando os arquivos em forma de hooks commit-msg e prepare-commit-msg que vamos editar. Eles foram criados na raíz do repositório dentro de um diretório chamado .husky.

Passo 2: Configuração e instalação do Commitlint

Primeiramente vamos editar o arquivo commit-msg com as seguintes instruções:

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

npx --no-install commitlint --edit "$1"

Nosso hook executará o Commitlint, portanto agora precisamos configurá-lo no projeto. Vamos instalar os seguintes pacotes via npm como DevDependencies:

npm install -D @commitlint/cli @commitlint/config-conventional @commitlint/config-nx-scopes

Agora precisamos criar um arquivo chamado commitlint.config.ts na raíz do repositório e editá-lo da seguinte forma:

export default {
extends: ['@commitlint/config-conventional', '@commitlint/config-nx-scopes'],
};

Passo 3: Configuração e instalação do Commitzen

De volta ao diretório do Husky, vamos editar o arquivo prepare-commit-msg com as seguintes instruções:

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

exec < /dev/tty && node_modules/.bin/cz --hook || true

Este hook executará o Commitzen quando o desenvovedor der um git commit. Com os hooks configurados, chegou a hora de instalar os pacotes via npm como DevDependencies:

npm install -D commitizen @commitlint/cz-commitlint

Para finalizar, vamos criar o arquivo .cz-config.ts na raíz do repositório e editá-lo da seguinte forma:

export default {
path: '@commitlint/cz-commitlint',
};

Passo 3: Teste e uso

O fluxo é bastante simples e intuitivo. Adicione os arquivos que deseja commitar e execute somente o comando git commit.

Temos toda uma interatividade para escrever nosso commit da forma mais detalhada e padronizada possível. Os commits sempre serão realizados seguindo os passos instruídos pelo Commitzen.

Observação: caso não funcione o comando git commit com o Commitzen, execute os seguintes comandos no seu terminal:

./node_modules/.bin/commitizen
./node_modules/.bin/commitizen init cz-conventional-changelog --save-dev --save-exact

E no momento de escolher o escopo do commit, caso o desenvolvedor informe um nome que não existe dentro dos escopos do seu Workspace Nx, teremos o seguinte erro:

Para entender como criar os escopos (módulos) dentro do Nx recomendo ler meus artigos Como eu inicio projetos Angular e Como eu inicio projetos React.

Conclusão

A adoção dos Conventional Commits e a integração das bibliotecas Commitlint e Commitizen com o Nx Build System têm um impacto significativo na qualidade do código e na colaboração da equipe. Essa abordagem facilita a comunicação, documentação e rastreabilidade das alterações no projeto, tornando o processo de desenvolvimento mais eficiente e transparente.

Ao seguir esse padrão e integrar essas ferramentas em seu repositório Nx, você estará construindo uma base sólida para um desenvolvimento de software mais organizado e eficaz.

--

--

Andrew Rosário
Andrew Rosário

Written by Andrew Rosário

Desenvolvedor Front-end, mentor e palestrante. Apaixonado por tecnologia e por compartilhar conhecimento.

Responses (1)