DEV Community

Vinicius Rodrigues
Vinicius Rodrigues

Posted on

Padronize seus commits com Commitlint + Husky + Commitizen.

Antes de iniciarmos, é importante que você crie um projeto qualquer. Crie uma nova pasta, inicialize com npm init e logo após execute o git init. Com isso feito teremos o básico para iniciar. Aqui a intenção é dar os primeiros passos então o artigo vai focar na instalação e configuração das libs, no final irei indicar alguns links para que possa se aprofundar mais.

📖 Estrutura do Commit

Aqui seguiremos o padrão adotado pelo conventional commits.

Esturtura de um commit

📗 Commitlint

Commitlint cria regras e padrões para nossos commits, ele impedirá que o commit esteja fora do padrão proposto na sessão anterior.

⚙️ Instalação

npm i @commitlint/config-conventional @commitlint/cli -D
Enter fullscreen mode Exit fullscreen mode

⚙️ Configuração

Após a instalação ser realizada, é necessário criar o arquivo commitlint.config.js com o conteúdo abaixo:

module.exports = { 
    extends: ['@commitlint/config-conventional'] 
};
Enter fullscreen mode Exit fullscreen mode

Para que o commitlint consiga “interceptar” um commit iremos utilizar o Husky.

📗 Husky

⚙️ Instalação

npm i husky -D
Enter fullscreen mode Exit fullscreen mode

⚙️ Configuração

npx husky install

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit $1'
Enter fullscreen mode Exit fullscreen mode

Após isso ao utilizar o comando “git commit” o husky irá solicitar a validação do commitlint e nosso commit só será aceito se estiver dentro das regras.

Para nos ajudar a não criar commits fora das regras iremos utilizar uma ferramenta chamada commitzen.

📗 Commitizen

⚙️ Instalação

npm i -D commitizen 
Enter fullscreen mode Exit fullscreen mode

⚙️ Configuração

Adicione a configuração do conventional commits para que o commitizen siga esse padrão. Basta executar o comando abaixo:

npx commitizen init cz-conventional-changelog --save-dev --save-exact
Enter fullscreen mode Exit fullscreen mode

Após isso temos que adicionar um novo script, podemos chama-lo de “commit” assim continuaremos utilizando um comando parecido para fazer o fluxo que estamos acostumados. Adicione o seguinte conteúdo no seu package.json.

"scripts": {
    "commit": "cz"
 }
Enter fullscreen mode Exit fullscreen mode

A partir de agora nosso fluxo de commits deixa de usar o comando “git commit” e passa a utilizar o “npm run commit”. Nesse caso, iremos executar o commitzen que por sua vez fará o commit, o husky irá intervir e utilizar o commitlint para realizar a validação.

Pronto!!! Está tudo padronizado e pronto para ser utilizado. Mas tenho que te informar que essas ferramentas vão muito além e você mesmo pode criar um padrão personalizado de acordo com suas regras. Se quiser se aprofundar os links das documentações de cada uma das bibliotecas e um outro artigo que mostra a instalação das ferramentas com yarn estão logo abaixo.

🌐 Links úteis

Discussion (0)