Voltar para os posts
Como melhorar o seu histórico no git
01/05/2021
Introduçao
Em alguns projetos recentes percebi a falta de organização no histórico do git, por causa disso eu e meu time não conseguiamos acompanhar novas features ou bugfix que ocorriam ocasionando em diversos problemas de comunicação indireta.
Com isso resolvi procurar alguma ferramenta que auxiliasse na hora de escrever as mensagens do git, procurando na internet encontrei um projeto chamado Commitizen que serviria para padronizar os nossos commits no projeto, aliado com o Standard Version a gente conseguiu fazer o versionamento ser muito mais fácil e prático.
Pré-requisitos
Antes de você começar a fazer algo, você precisa:
- Do Node e Npm (ou Yarn) instalados na sua máquina
- Do git (obviamente)
- De um projeto node
1º Passo - Criação do projeto
Bem, pra começarmos criarei um projeto minímo pra servir de exemplo, você pode vê o resultado cliquando aqui.
2º Passo - Instalação das depêndencias
Vamos começar instalado o cli do Commitizen:
Globalmente:
npm install commitizen -g
Ou localmente:
npm install --save-dev commitizen
Com isso, você agora pode usar a lib no terminal para fazer a configuração inicial do commitizen no seu projeto. Se você instalou localmente, você tem que adicionar o npx antes dos comandos, se você instalou globamente, não precisa.
Instalando com Npm:
npx commitizen init cz-conventional-changelog --save-dev --save-exact
Ou com Yarn:
npx commitizen init cz-conventional-changelog --yarn --dev --exact
3º Passo - Utilização
Agora, você só precisa configurar o script no package.json:
...
"scripts": {
...
"commit": "cz"
},
Rodando o comando npm run commit, você verá a seguinte tela:
Dessa maneira, você agora consegue fazer um commit muito mais sucinto e limpo.
4º Passo - Customização
Esse é um passo opcional, porém muito interessante. O Commitizen tem uma série de adaptadores que servem para fazer várias coisas, sendo que um desses auxilia a customização dos comandos que a gente vê no terminal.
Primeira coisa que vamos fazer, instalar o cz-customizable:
Instalando com Npm:
npm install cz-customizable --save-dev
Ou com Yarn:
yarn add cz-customizable --dev
Se você seguiu todos os passos até o momento, a sua configuração do Commitizen dentro do package.json deve estar parecido com isso:
...
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}
Para se adequar ao adaptador, devemos trocar para:
...
"config": {
"commitizen": {
"path": "./node_modules/cz-customizable"
}
}
A última coisa que tem que ser feita é, criar um arquivo .cz-config.js, pra facilitar a vida, a documentação do Commitizen aconselha a usar como base esse arquivo.
A configuração que atualmente eu uso, é essa:
module.exports = {
types: [{
value: 'feat',
name: 'feat: Uma nova feature'
},
{
value: 'fix',
name: 'fix: Um bug fix'
},
{
value: 'docs',
name: 'docs: Mudança apenas na documentação'
},
{
value: 'style',
name: 'style: Mudança que não altera afeta a lógica do código\n (white-space, formatting, missing semi-colons, etc)',
},
{
value: 'refactor',
name: 'refactor: Um código que não é nem um bug fix nem uma feature',
},
{
value: 'perf',
name: 'perf: Uma mudança no código para melhorar a performance',
},
{
value: 'test',
name: 'test: Adicionando testes que faltavam'
},
{
value: 'chore',
name: 'chore: Mudança no processo de build, alguma ferramenta auxilar\n ou libs para geração de documentação',
},
{
value: 'revert',
name: 'revert: Reverte um commit'
},
{
value: 'WIP',
name: 'WIP: Work in progress - Trabalho em progresso'
},
],
scopes: [{
name: 'componentes'
}, {
name: 'diretiva'
}, {
name: 'lib'
}],
allowTicketNumber: false,
isTicketNumberRequired: false,
ticketNumberPrefix: 'ISSUES FECHADAS:',
ticketNumberRegExp: '\\d{1,5}',
// it needs to match the value for field type. Eg.: 'fix'
/*
scopeOverrides: {
fix: [
{name: 'merge'},
{name: 'style'},
{name: 'e2eTest'},
{name: 'unitTest'}
]
},
*/
// override the messages, defaults are as follows
messages: {
type: "Seleciona o tipo de mudança que você tá commitando:",
scope: '\nDescreva o scopo dessa mudança (opcional):',
// used if allowCustomScopes is true
customScope: 'nDescreva o scopo dessa mudança:',
subject: 'Escreva uma descrição PEQUENA e IMPERATIVA sobre a mudança:\n',
body: 'Forneça uma decriçao LONGA sobre a mudança (opcional). Use "|" para quebrar uma nova linha:\n',
breaking: 'Liste qualquer BREAKING CHANGES (opcional):\n',
footer: 'Liste qualquer ISSUE FECHADA por essa mudança (optional). E.g.: #31, #34:\n',
confirmCommit: 'Você tem certeza que quer proceder com o commit de cima?',
},
allowCustomScopes: true,
allowBreakingChanges: ['feat', 'fix'],
// limit subject length
subjectLimit: 100,
// breaklineChar: '|', // It is supported for fields body and footer.
// footerPrefix : 'ISSUES CLOSED:'
// askForBreakingChangeFirst : true, // default is false
};
5º Passo - Versionamento
Por último, iremos usar o standard-version para facilitar o versionamento do projeto, como já se foi dito.
Instalando com Npm:
npm install standard-version --save-dev
Ou com Yarn:
yarn add standard-version --dev
Feito isso, adicionei mais um script para o seu package.json:
"scripts": {
...
"release": "standard-version"
},
Esse pacote também permite a customização dos textos que irão ser gerador no Changelog, criando um arquivo chamado .versionrc, .versionrc.json ou .versionrc.js você consegue configurar.
Logo abaixo tem a configuração na qual, eu utilizo (Para mais informações, clique aqui):
/// .versionrc
{
"header": "# Changelog\n\nTodas as mudanças notáveis dos componentes serão listadas aqui.",
"types": [
{"type": "chore", "section":"Outros", "hidden": false},
{"type": "revert", "section":"Regressões", "hidden": false},
{"type": "feat", "section": "Features", "hidden": false},
{"type": "fix", "section": "Bugs Arrumados", "hidden": false},
{"type": "improvement", "section": "Feature Improvements", "hidden": false},
{"type": "docs", "section":"Documentação", "hidden": false},
{"type": "style", "section":"Estilos", "hidden": false},
{"type": "refactor", "section":"Refatoração do código", "hidden": false},
{"type": "perf", "section":"Melhoria na Performance", "hidden": false},
{"type": "test", "section":"Testes", "hidden": false},
{"type": "WIP", "section":"Trabalho em Progresso (Work in progress)", "hidden": false}
]
}
Agora é só fazer o commit e rodar o comando que ele irá automaticamente criar a tag propícia e o changelog:
npm run commit
npm run release
Quando terminar, você vai perceber que foi mudada a versão do projeto e foi adicionado um arquivo chamado CHANGELOG.MD, desse modo finalizamos o passo-a-passo.
Conclusão
Se você seguiu o artigo corretamente, você agora deve estar com o seu projeto configurado e funcionando muito bem, você não necessariamente precisa das configurações extras, como por exemplo o cz-customizable e consequentemente nem mesmo os arquivos .cz-config.js e/ou .versionrc.