DEV Community

Vinicius Rodrigues
Vinicius Rodrigues

Posted on

8 3 1

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

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more