Padronizando seus Commits

Faaaala devs. Blz?

Faz tempo que não dou uma atenção aqui no blog, mas agora vamos voltar aqui pelo menos a cada 15 dias.

Hoje vou falar sobre automatizar padrões de código e também padronizar commits.

Uma estrutura que costumo fazer em praticamente todos meus projetos javascript.

Automatizar padrões de código

Para automatizar nossos códigos vamos usar um carinha chamado Husky.

Digamos que vamos querer varrer nosso código para ver se não ficou nenhum erro acusado pelo Eslint automaticamente. Por isso e outros motivos que utilizamos essa maravilhosa lib.

Dentro do nosso .git é possível encontrar hooks, que ao configura-los podemos fazer praticamente tudo que quisermos antes ou depois de qualquer comando GIT.

No nosso caso, queremos que toda vez que rodarmos um git commit seja verificado se esquecemos algum erro que o eslint detectou. Vamos configurar também um outro carinha chamado lint-stage, para que seja feita a verificação dos erros apenas nos arquivos que foram alterados. Imagina se tivervos mil arquivos no sistema onde será verificado nos mil arquivos mesmo nós termos alterado apenas um. Não faz sentido né?

Configuração

Para instalarmos basta rodar npm install husky lint-staged --save-dev no nosso terminal.

Agora em nosso package.json configuramos os 2:

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.ts": [
    "eslint --fix", "git add"
  ]
},

Calma, vou explicar!

Toda vez que rodarmos no terminal git commit será ativado o Husky por causa do comando que deixamos no hooks, o pre-commit, ou seja, antes do commit faça algo. E o que estamos fazendo no pre-commit? Estamos chamando nosso ajudante número 2 lint-staged.

Deixamos o lint-staged configurado para executar em todos (*) arquivos typescript (.ts), mas você pode colocar outras extensões de arquivos (js, jsx, tsx). Colocamos em um array pois será rodado 2 comandos nesses arquivos modificados: eslint --fix para corrigir e verificar erros e o git add pois o próprio eslint poderá corrigir os erros, então precisaremos novamente o git add para adicinar no commit.

husky-running

Husky irá começar a rodar e logo após fazer as tarefas mostrará assim:

husky-done

Pronto! Próxima configuração.

Padronizar commits

Quantas vezes tentamos olhar no git log o que foi alterado, quando foi, se foi fix, feature nova, enfim, quem nunca se perdeu no meio de tanto commit e não tem ideia sobre o que aquele commit de fato referenciava?

Para sanar esse problema vamos padronizar as mensagens dos commits para que todos devs sejam "obrigados" a manter o mesmo padrão.

Estou falando do Commit lint, que irá garantir o padrão do nossos commits, e o Commitizen que fará nossos commits automaticos e de uma forma mais visual.

Configuração

Vamos instalar as 2 libs,

yarn add  @commitlint/config-conventional @commitlint/cli commitizen -D 

Com as libs instaladas vamos configura-las.

npm commitizen init cz-conventional-changelog --save-dev --save-exact

ou se usa yarn

yarn commitizen init cz-conventional-changelog --yarn --dev --exact

Voltamos para o package.json lembra do Husky? Vamos ligar essas 2 libs com ele.

Dentro do husky vamos adicionar os comandos:

"prepare-commit-msg":"exec < /dev/tty && git cz --hook || true", 
"commit-msg":"commitlint -E HUSKY_GIT_PARAMS"

Então no prepare.. estamos preparando o commit, no commit-msg vamos garantir que nosso commit seguirá os padrões do conventional-changelog

Recapitulando, nosso package.json terá o Husky assim:

"husky":{
  "hooks":{
    "pre-commit":"lint-staged",
    "prepare-commit-msg":"exec < /dev/tty && git cz --hook || true",
    "commit-msg":"commitlint -E HUSKY_GIT_PARAMS"
  }
},

Será necessário criar a arquivo commitlint.config.js contendo:

module.exports={
  extends: ['@commitlint/config-conventional']
}

Pronto, chegou a hora do commit. Agora vamos rodar apenas o git commit e teremos este resultado:

git-commit

Após verificar os erros de lint, o comitizen irá nos direcionar com perguntas para criar nossa mensagem de commit. Basta ir respondendo e dando ENTER

captura de tela 2020 08 14 a s 19 49 40

Seus commits ficarão assim:

captura de tela 2020 08 14 a s 19 51 13

No começo não mudará muito, mas depois quando tiver uma lista grande de commits tudo organizado indicando o que cada commit resolveu, irá agradecer demais o commitizen.

Conclusão

Me diz ai, já conhecia alguma dessas libs? Já sabia que era possível utiliza-las juntas?

Ou, tem mais alguma que gostaria de indicar? Manda aqui abaixo nos comentários.

Encontrou algum erro? Pow... me ajuda ae!😁

Como esse blog é open source, então é só alterar o arquivo de texto, no próprio Github e abrir um pull-request. Simples não?

Quer conhecer mais meu trabalho? Sigam-me os bons!!!😜🚀

- Twitter: @dgsapenas
- Github: @douglasporto
- Linkedin: @douglas-porto

Comentários