|
| 1 | +# Guide to setup conventional commits on commit |
| 2 | + |
| 3 | +[TOC] |
| 4 | + |
| 5 | +## What does conventional commits do? |
| 6 | + |
| 7 | +docs: [conventionalcommits.org](https://www.conventionalcommits.org)<br> |
| 8 | + |
| 9 | + |
| 10 | + |
| 11 | +Validates the commit message format locally before pushing changes: |
| 12 | + |
| 13 | +Why Use Conventional Commits |
| 14 | + |
| 15 | +- Automatically generating CHANGELOGs. |
| 16 | +- Automatically determining a semantic version bump (based on the types of commits landed). |
| 17 | +- Communicating the nature of changes to teammates, the public and other stakeholders. |
| 18 | +- Triggering build and publish processes. |
| 19 | +- Making it easier for people to contribute to your projects, by allowing them to explore a more structured commit history. |
| 20 | + |
| 21 | +The commit message should be structured as follows: |
| 22 | + |
| 23 | +``` |
| 24 | +<type>[optional scope]: [optional gitmoji] <description> |
| 25 | +
|
| 26 | +[optional body] |
| 27 | +
|
| 28 | +[optional footer(s)] |
| 29 | +``` |
| 30 | + |
| 31 | +example: |
| 32 | + |
| 33 | +``` |
| 34 | +feat(auth): ✨ <description> |
| 35 | +
|
| 36 | +[optional body] |
| 37 | +
|
| 38 | +[optional footer(s)] |
| 39 | +
|
| 40 | +``` |
| 41 | + |
| 42 | +## gitmoji |
| 43 | + |
| 44 | +gitmoji: [gitmoji.dev](https://gitmoji.dev/)<br> |
| 45 | + |
| 46 | + |
| 47 | + |
| 48 | +## Examples |
| 49 | + |
| 50 | +Good commits: |
| 51 | + |
| 52 | +✅ _`chore: add shadcn package`_ |
| 53 | + |
| 54 | +✅ _`feat: ✨ add login button`_ |
| 55 | + |
| 56 | +✅ _`fix(auth): 🐛 token validation`_ |
| 57 | + |
| 58 | +✅ commit message with ! to draw attention to **breaking change**: |
| 59 | + |
| 60 | +✅ _`feat!: send an email to the customer when a product is shipped`_ |
| 61 | + |
| 62 | +✅ _`feat(api)!: send an email to the customer when a product is shipped`_ |
| 63 | + |
| 64 | +✅ commit message with **description** and **breaking change footer** (BREAKING CHANGE) |
| 65 | + |
| 66 | +``` |
| 67 | +feat: allow provided config object to extend other configs |
| 68 | +
|
| 69 | +BREAKING CHANGE: `extends` key in config file is now used for extending other config files |
| 70 | +``` |
| 71 | + |
| 72 | +✅ message with **multi-paragraph body** and **multiple footers** |
| 73 | + |
| 74 | +``` |
| 75 | +fix: prevent racing of requests |
| 76 | +
|
| 77 | +Introduce a request id and a reference to latest request. Dismiss |
| 78 | +incoming responses other than from latest request. |
| 79 | +
|
| 80 | +Remove timeouts which were used to mitigate the racing issue but are |
| 81 | +obsolete now. |
| 82 | +
|
| 83 | +Reviewed-by: Z |
| 84 | +Refs: #123 |
| 85 | +``` |
| 86 | + |
| 87 | +Bad commits: |
| 88 | + |
| 89 | +❌ _`Add LOgin BUTTON`_ |
| 90 | + |
| 91 | +❌ _`add login button`_ |
| 92 | + |
| 93 | +❌ _`commit message that is too large to fit in one commit, this means that the commit has too many changes to describe and you should split it into multiple commits or you require to use a multi-paragraph body and/or footers.`_ |
| 94 | + |
| 95 | +## ⭐ Recommendation: Install VSCode extension |
| 96 | + |
| 97 | +vscode extension: [vivaxy.vscode-conventional-commits](https://marketplace.visualstudio.com/items?itemName=vivaxy.vscode-conventional-commits)<br> |
| 98 | + |
| 99 | + |
| 100 | + |
| 101 | +To improve your experience creating a commit message. |
| 102 | + |
| 103 | +**Optional:** disable autoCommit |
| 104 | + |
| 105 | +- The extension enables `conventionalCommits.autoCommit` by default, I recommend to disable it to only generate the formatted commit message. |
| 106 | +- It can be disabled from the option in `Settings > conventionalCommits.autoCommit`. |
| 107 | + |
| 108 | +## 🎉 Setup project |
| 109 | + |
| 110 | +1. Init a new project (skip if you already have one) |
| 111 | + |
| 112 | +```bash |
| 113 | +npm init -y |
| 114 | +``` |
| 115 | + |
| 116 | +2. install dev dependencies |
| 117 | + |
| 118 | +```bash |
| 119 | +npm install --save-dev @commitlint/cli @commitlint/config-conventional |
| 120 | +``` |
| 121 | + |
| 122 | +3. add a new file at root `commitlint.config.js` |
| 123 | + |
| 124 | +**commitlint.config.js** |
| 125 | + |
| 126 | +```javascript |
| 127 | +module.exports = { |
| 128 | + extends: ["@commitlint/config-conventional"], |
| 129 | +}; |
| 130 | +``` |
| 131 | + |
| 132 | +4. Install husky as dev dependency |
| 133 | + |
| 134 | + `npm i -D husky` |
| 135 | + |
| 136 | +5. add script `prepare="husky"` in `packages.json` |
| 137 | + |
| 138 | + `npm pkg set scripts.prepare="husky"` |
| 139 | + |
| 140 | +6. Execute prepare, this will create the .husky folder |
| 141 | + |
| 142 | + `npm run prepare` |
| 143 | + |
| 144 | +7. Add hook commit message |
| 145 | + |
| 146 | + `echo "npx --no -- commitlint --edit ${1}" > .husky/commit-msg` |
| 147 | + |
| 148 | +## FAQ |
| 149 | + |
| 150 | +### How does this relate to SemVer? |
| 151 | + |
| 152 | +1. `fix` type commits should be translated to `PATCH` releases. |
| 153 | +2. `feat` type commits should be translated to `MINOR` releases. |
| 154 | +3. Commits with `BREAKING CHANGE` in the commits, regardless of type, should be translated to `MAJOR` releases. |
| 155 | + |
| 156 | +### Are the types in the commit title uppercase or lowercase? |
| 157 | + |
| 158 | +Any casing may be used, but it’s best to be consistent. |
| 159 | + |
| 160 | +### What do I do if the commit conforms to more than one of the commit types? |
| 161 | + |
| 162 | +Go back and make multiple commits whenever possible. Part of the benefit of Conventional Commits is its ability to drive us to make more organized commits and PRs. |
| 163 | + |
| 164 | +### Doesn’t this discourage rapid development and fast iteration? |
| 165 | + |
| 166 | +It discourages moving fast in a disorganized way. It helps you be able to move fast long term across multiple projects with varied contributors. |
| 167 | + |
| 168 | +### What do I do if I accidentally use the wrong commit type? |
| 169 | + |
| 170 | +When you used a type that’s of the spec but not the correct type, e.g. `fix` instead of `feat` |
| 171 | + |
| 172 | +**Prior to merging or releasing** the mistake, we recommend using `git rebase -i` to edit the commit history. After release, the cleanup will be different according to what tools and processes you use. |
0 commit comments