DEV Community: Marcus Ícaro

Como padronizar mensagens nos commits de sua equipe utilizando husky e commitlint

Marcus Ícaro — Wed, 20 Dec 2023 10:57:14 +0000

Glossário

Introdução
O que é commitlint
Implementando commitlint no nosso projeto

Introdução

Este tutorial é a segunda parte de uma série de tutoriais utilizando a ferramenta husky. Caso queira ver a primeira parte, onde ensino a fazer o setup do projeto detalhadamente, o link se encontra aqui.

Veremos aqui uma maneira rápida e prática de padronizar suas mensagens de commit utilizando husky e commitlint, para que você e sua equipe possam facilmente navegar pelo histórico de seus projetos.

O que é commitlint

Para fazer validações nas mensagens de commit antes do upload, utilizaremos novamente git hooks. Para uma explicação mais detalhada sobre o que são git hooks, leia a primeira parte desse tutorial aqui. Adicionaremos um novo hook em nosso projeto, para fazer agora uma validação na mensagem de commit.

Implementando commitlint no nosso projeto

Começaremos a partir de onde estava nosso projeto (com o npm já inicializado e com o Husky devidamente instalado). Iremos então instalar a package commitlint usando o comando npm install -g @commitlint/cli @commitlint/config-conventional.

Explicando o que o comando faz:

npm install -g define a instalação dessas packages de forma global na máquina.

@commitlint/cli instala o commitlint na máquina.

@commitlint/config-conventional instala uma configuração do commitlint de acordo com conventional commits.

Depois, com seu terminal na raíz do projeto, insira o comando echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js.

Isso criará um arquivo chamado commitlint.config.js exportando um objeto que define que nosso commitlint deverá estar de acordo com as configurações do @commitlint/config-conventional.

Adicionaremos nosso primeiro hook. Com o terminal na raíz de seu projeto, insira o seguinte comando:

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'

Na primeira parte do tutorial, expliquei o que o comando husky add faz. A única diferença é que ao invés de requisitarmos que nosso hook rode um teste, estamos requisitando que o comando seja rodado sem realizar uma instalação caso commitlint não seja encontrado (--no --).

Como já temos o husky instalado, não será necessário instalá-lo novamente, mas, caso haja algum erro, você pode instalar o husky em seu projeto com o comando:

npm install husky --save-dev

E, por fim, ativar os hooks:

npx husky install

Vamos agora testar para ver se tudo está funcionando corretamente. Insira o comando git add . && git commit -m 'mensagem de commit ruim'.

O output resultante deverá ser similar a esse:

⧗ input: mensagem de commit ruim
✖ subject may not be empty [subject-empty]
✖ type may not be empty [type-empty]

✖ found 2 problems, 0 warnings
ⓘ Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

Mas o que isso significa? Para entendermos, precisamos entender um pouco sobre conventional commit format. De acordo com conventional commit format, nossas mensagens de commit precisam ter um tipo e uma descrição, no formato [escopo opcional]: . No nosso caso, estamos utilizando commitlint/config-conventional, que inclui como possíveis tipos, os seguintes:

  'build',
  'chore',
  'ci',
  'docs',
  'feat',
  'fix',
  'perf',
  'refactor',
  'revert',
  'style',
  'test'

Você pode verificar isso e outras no arquivo .commitlintrc.json na raíz do projeto. O conteúdo dele deverá ser:

{
  "extends": ["@commitlint/config-conventional"],
  "rules": {
    "type-enum": [
      2,
      "always",
      [
        "ci",
        "chore",
        "docs",
        "ticket",
        "feat",
        "fix",
        "perf",
        "refactor",
        "revert",
        "style"
      ]
    ]
  }
}

"extends": ["@commitlint/config-conventional"] traz as configurações de "@commitlint/config-conventional" e as aplica em nosso projeto.
"rules" traz um objeto que pode conter algumas propriedades. No nosso caso, estamos interessados somente em "type-enum", que define algumas regras a serem utilizadas no tipo da mensagem de commit. O primeiro valor do array diz se deverá ser desabilitado (0), mostrar apenas um warning (1) ou exibir um erro no terminal (2). O segundo item do array define quando a regra deverá ser aplicada. O terceiro, são os tipos válidos.

Nosso commit não tem um tipo válido e nem um subject (assunto).

Agora que vimos a mensagem de erro e sabemos o que ela quer dizer, iremos consertar esse commit para ficar de acordo com as boas práticas. Iremos inserir o comando git commit -m 'feat: add commitlint to project' no terminal. O tipo é feat pois estamos adicionando uma feature nova commitlint. A descrição é o que foi feito. Depois é só salvar.

Pronto, seu commit já está de acordo com as boas práticas para mensagens de commit e é só fazer o push.

Links úteis:

Foto por NoName_13 em Pixabay

Como adicionar hooks aos commits de seu projeto utilizando Husky

Marcus Ícaro — Thu, 07 Dec 2023 17:11:39 +0000

Foto por Leon Seibert em Unsplash

Glossário

Introdução
Setup do projeto
Primeiros comandos nos hooks
Criando um teste

Introdução

Em qualquer projeto de desenvolvimento de software, é importante que os commits sejam consistentes e atendam a padrões predefinidos. Isso ajuda a melhorar a legibilidade e a manutenção do código, além de facilitar a colaboração entre os desenvolvedores.

O Husky é uma ferramenta que permite adicionar git hooks personalizados aos seus projetos. Git hooks são scripts que são executados antes ou depois de certas ações do sistema git, como fazer um commit ou enviar um push. As utilidades de Husky incluem lint de mensagens de commit, execução de testes, lint de código e muito mais.

Neste tutorial, ensinarei como fazer com que só seja possível realizar commits após passar nos testes.

Setup do projeto

Para começar, vamos precisar de um de um repositório com o pacote npm inicializado. Para isso, crie um repositório novo (mkdir **NOME DO REPOSITÓRIO** no Ubuntu), navegue para o repositório criado no seu terminal (cd **NOME DO REPOSITÓRIO**) e então insira o comando npm init -y no terminal para inicializar o pacote npm.

Caso não saiba o que é ou não tenha o Node instalado em sua máquina, acesse (aqui)[https://kinsta.com/pt/blog/como-instalar-o-node-js/] para ler um tutorial.

Agora, vamos agora instalar o Husky como uma devDependencies. Para isso, utilizaremos o comando npm install husky --save-dev.

Apenas um breve adendo: devDependencies são dependências necessárias durante o desenvolvimento da aplicação, mas não necessárias para seu código funcionar em produção. Um uso de caso bem comum para isso é quando você tem um servidor com baixo limite de armazenamento. Sua pasta node_modules, se for muito grande, pode não ser aceita com todas as dependências dela. Neste caso, para reduzirmos o espaço armazenamento necessário para nossa aplicação rodar no nosso servidor, instalamos alguns pacotes como devDependencies e, quando formos instalar as dependências para nossa aplicação rodar no servidor, utilizamos o comando: npm install --production, garantindo assim que as devDependencies não sejam instaladas também.

Em seguida, habilitaremos os git hooks com o comando npx husky install.

Para garantir que toda vez que seu projeto for instalado você tenha git hooks habilitados, utilize o comando npm pkg set scripts.prepare="husky install". Este comando irá adicionar na propriedade "scripts" de seu package.json a seguinte linha: "prepare": "husky install".

Primeiros comandos nos hooks

Agora, iremos adicionar comandos aos hooks de nossa aplicação. Digite os comandos abaixo em seu terminal.

npx husky add .husky/pre-commit "npm test"
git add .husky/pre-commit

Feito isso, será criado um arquivo na pasta .husky com o seguinte conteúdo:

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

npm test

Não se esqueça de adicionar o script correto para o comando npm test. No caso deste tutorial, iremos utilizar o Jest, portanto, insira o seguinte comando no seu terminal, caso queira utilizar o Jest também npm pkg set scripts.test="jest". Este comando adiciona nos scripts do package.json o comando "test".

Esse arquivo contém comandos para executar o shell script husky.sh para validar se o Husky está funcionando corretamente, e por fim, define que deverá ser executado o npm test para que o commit seja aceito. Caso falhe, o commit não irá funcionar e uma mensagem de erro será exibida.

É possível "burlar" a verificação executada pelo hook com o seguinte comando: git commit -m "*NOME DO SEU COMMIT AQUI*" --no-verify. O --no-verify ou -n desabilitam a verificação do commit.

Criando um teste

Agora, vamos para a parte favorita de todo desenvolvedor: escrever testes.

Utilizarei Jest como ferramenta de teste neste exemplo, mas fique à vontade para escolher a que for mais adequada para suas necessidades.

Inicialmente, rodaremos o comando npm install --save-dev jest para instalar o Jest no seu projeto.

Depois, criaremos um arquivo na raíz do projeto com o nome sum.js. Copie e cole o código abaixo nele:

function sum(a, b) {
    return a + b;
  }
module.exports = sum;

Agora criaremos o arquivo de testes dele sum.test.js
.

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

Pronto. Agora é só tentar fazer um commit. Primeiro, vamos adicionar os arquivos na index do Git com o comando git add .. Depois vamos tentar escrever uma mensagem de commit utilizando git commit -m '*SUA MENSAGEM AQUI*'. Se tudo ocorrer bem, você deverá ver o teste do Jest rodando e por fim uma mensagem dizendo que os arquivos foram adicionados à index com sucesso.

Por fim, rode git push para enviar estes commits para sua plataforma de versionamento de preferência.

Caso queira saber mais sobre o Husky, acesse o repositório oficial no github aqui e a documentação oficial deles [aqui][https://typicode.github.io/husky/).