image

Acesse bootcamps ilimitados e +650 cursos

50
%OFF
Article image
William Silva
William Silva18/12/2024 08:51
Compartilhe

๐Ÿ“ Guia Definitivo: Crie Commits Claro e Organizados com o Conventional Commit Format e Simplifique Seu Workflow

  • #GitHub
  • #Git

Manter commits claros e consistentes รฉ essencial para um bom desenvolvimento colaborativo. Este guia detalhado cobre o formato Angular Commit Message Format, incluindo as seรงรตes Header, Body e Footer.

๐Ÿ› ๏ธ Header

O header contรฉm trรชs elementos principais:

  • type: O tipo de mudanรงa no cรณdigo (obrigatรณrio).
  • scope: O escopo que o commit afeta (opcional, mas recomendado).
  • short summary: Resumo da mudanรงa em no mรกximo 72 caracteres (obrigatรณrio).

Formato do Header

<type>(<scope>): <short summary>

Valores Aceitos para type

  • build: Alteraรงรตes que afetam o sistema de build ou dependรชncias externas.
  • ci: Alteraรงรตes nos scripts ou configuraรงรตes de CI (Integraรงรฃo Contรญnua).
  • docs: Mudanรงas na documentaรงรฃo apenas.
  • feat: Introduรงรฃo de uma nova funcionalidade.
  • fix: Correรงรฃo de um bug.
  • perf: Melhorias de desempenho.
  • refactor: Alteraรงรฃo de cรณdigo que nรฃo corrige bugs nem adiciona funcionalidades.
  • test: Adiรงรฃo ou modificaรงรฃo de testes.

Exemplos de scope

  • animations,bazel,benchpress,common,compiler,compiler-cli,core,elements,forms,http,language-service,
  • localize,platform-browser,platform-browser-dynamic,platform-server,router,service-worker,upgrade,zone.js,
  • packaging,changelog,docs-infra,migrations,ngcc,ve,devtools

Exemplo de Header

feat(forms): add custom validation feature

๐Ÿ“– Body

O body รฉ uma explicaรงรฃo detalhada do commit. Ele deve responder ao "por quรช" e "como" a mudanรงa foi feita.

Regras para o Body

  • Comece com um verbo no presente para explicar o impacto.
  • Use frases curtas e claras.
  • Limite cada linha a 72 caracteres para facilitar a leitura.

Exemplo de Body

Adds the ability to include custom validators in reactive forms.

This commit introduces a new API for adding validators directly to
form controls. The feature supports synchronous and asynchronous
validators.

๐Ÿšฉ Footer

O footer contรฉm informaรงรตes adicionais, como:

  • Breaking Changes: Declara mudanรงas que quebram compatibilidade.
  • Closes/Fixes: Relaciona o commit com issues no GitHub.

Formato do Footer

BREAKING CHANGE: <description>

Closes #<issue-number>

Exemplo de Footer

BREAKING CHANGE: This changes the default validation strategy
in reactive forms, which might break existing applications.

Closes #1234

๐Ÿ”ง Tรฉcnicas para Criar Commits Perfeitos

Utilizar um Template Padrรฃo

Configure templates de mensagem de commit no Git com instruรงรตes claras para Header, Body e Footer.

# Configuraรงรฃo do template global
 git config --global commit.template ~/.git-commit-template.txt

Crie o arquivo .git-commit-template.txt com o formato do Angular Commit:

<type>(<scope>): <short summary>

# Body
<detailed explanation of the commit>

# Footer
<breaking change or references>

Automaรงรฃo com Hooks do Git

Use hooks como prepare-commit-msg para prรฉ-preencher mensagens com base em convenรงรตes:

  • Husky: Integra hooks em projetos com configuraรงรตes fรกceis.
  • Combine com ferramentas como Commitizen para garantir que os commits sigam um padrรฃo.

Documentaรงรฃo para a Equipe

Crie um guia interno ou adote convenรงรตes claras como o Angular Commit Format, para que toda a equipe siga o mesmo padrรฃo.

๐Ÿ› ๏ธ Ferramentas para Ajudar com Commits

1. Commitizen

  • Ferramenta CLI que guia o processo de commit no formato correto.
  • Garante conformidade com padrรตes como o Angular Commit Format.

Instalaรงรฃo:

npm install -g commitizen

Uso:

git cz

Plugins รบteis:

  • cz-conventional-changelog: Segue o padrรฃo do Angular.

2. AI Assistants

  • GitHub Copilot: Pode sugerir mensagens de commit baseadas em mudanรงas feitas no cรณdigo.
  • Use comentรกrios no cรณdigo para explicar mudanรงas; o Copilot sugere commits baseados nisso.
  • OpenAI API ou ChatGPT: Gere mensagens de commit detalhadas com base nos diffs do cรณdigo.
  • Integraรงรฃo com ferramentas de linha de comando ou editores como VS Code.

3. Linting de Commits

  • CommitLint: Valida automaticamente mensagens de commit para verificar se seguem o formato correto.
  • Integraรงรฃo com Husky para rodar automaticamente nos commits:
npm install --save-dev @commitlint/{config-conventional,cli}
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

4. Change Detection & Templates

  • Semantic Release: Automatiza o versionamento e changelogs baseados em mensagens de commit.
  • รštil para grandes projetos onde commits seguem padrรตes rรญgidos.
  • GitMoji: Usa emojis para identificar visualmente o tipo de commit.
  • CLI para adicionar emojis diretamente no commit:
npm install -g gitmoji-cli
gitmoji -c

5. Editor Plugins

  • VS Code Extensions:
  • Git Commit Template: Ajuda a preencher mensagens de commit com templates padrรฃo.
  • Conventional Commits: Oferece suporte interativo para gerar mensagens no formato Angular.
  • JetBrains IntelliJ:
  • Suporte para convenรงรตes de commits com configuraรงรฃo personalizada.
  • Plugins como GitToolBox fornecem histรณrico e sugestรตes.

6. Automaรงรฃo com IA

  • GPT Commit Message Generator:
  • Ferramenta CLI que usa GPT para gerar mensagens de commit:
  • OpenCommit: Analisa git diff e cria mensagens contextuais.

Instalaรงรฃo:

npm install -g opencommit
opencommit
  • Pode ser configurado com sua prรณpria chave API do OpenAI.

๐Ÿš€ Fluxo Recomendado

  1. Escreva o cรณdigo.
  2. Use git add para preparar os arquivos.
  3. Execute:
git cz

ou:

opencommit
  1. Valide com CommitLint antes de finalizar:
npm run lint
  1. Finalize com git commit ou git push.

Com essas ferramentas e tรฉcnicas, รฉ possรญvel garantir que seus commits sejam bem formatados, consistentes e informativos!

โœ… Exemplo Completo

feat(forms): add custom validation feature

Adds the ability to include custom validators in reactive forms.

This commit introduces a new API for adding validators directly to
form controls. The feature supports synchronous and asynchronous
validators.

BREAKING CHANGE: This changes the default validation strategy
in reactive forms, which might break existing applications.

Closes #1234

๐Ÿงพ Checklist para um Commit Perfeito

๐Ÿ”น Header

  • Estรก no formato <type>(<scope>): <short summary>?
  • O resumo estรก claro, direto e no presente?

๐Ÿ”น Body

  • Explicou o que foi alterado, por quรช e como?
  • Cada linha tem no mรกximo 72 caracteres?

๐Ÿ”น Footer

  • Indicou Breaking Changes ou issues relacionadas?

Seguindo este guia, vocรช manterรก seus commits consistentes, claros e fรกceis de rastrear! ๐ŸŒŸ

Compartilhe
Recomendados para vocรช
Microsoft 50 Anos - GitHub Copilot
Microsoft AI for Tech - GitHub Copilot
Microsoft 50 Anos - Prompts Inteligentes
Comentรกrios (1)
Lilian Santos
Lilian Santos - 18/12/2024 10:40

Sรณ as orientaรงรตes sobre a estrutura e o checklist ao final jรก fazem desse artigo muito muito informativo! Principalmente pra quem estรก comeรงando e as dicas de ferramentas e automaรงรฃo deixam o tรณpico ainda mais avanรงado.

Valeu por compartilhar esse conhecimento! Depois dos cursos que fiz na DIO sobre Git e GitHub comecei a ir treinando os commits mais convencionais, trabalhando melhor o header e o body... E uma satisfaรงรฃo fazer referรชncia a uma issue solucionada, alรฉm de treinar o inglรชs rsrs

Uma ferramenta legal pra visualizar branchs e commits รฉ o gitk.

Particularmente, gostei muito do curso com Otรกvio Reis Perkles, muito didรกtico e muitas informaรงรตes de forma descomplicada.

ร“timo assunto para compartilhar experiรชncia. Parabรฉns pelo artigo! โœจ๐Ÿš€