automatic-conventional-commits-example

This repository serves as an example for implementing automatic conventional commits in a project. It demonstrates how to streamline the commit message formatting and structure for better readability and automated versioning.

Prerequisites

Before you begin, ensure you have met the following requirements:

1. You have created a package.json file for your project. If you haven't created one, you can initialize a new package.json file using one of the following commands:

   npm init -y
   # or
   yarn init -y

2. You have Git installed. If not, you can download it here.
3. You have initialized a local Git repository. If you haven't initialized a Git repository yet, you can do so by executing the following command in your project directory:

   git init

Configuration

You can adhere to a commit convention and also (if you want) add interactivity to your git commit command.

Adhere to a commit convention

Here, you're gonna need some dependencies (commitlint and husky), set them up and add the commit-msg hook.

1. Install the commitlint dependencies:

   npm install -D @commitlint/config-conventional @commitlint/cli
   # or
   yarn add -D @commitlint/config-conventional @commitlint/cli

2. Configure commitlint to use conventional config:

   echo "module.exports = { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js

3. Install husky:

   npm install -D husky
   # or
   yarn add -D husky

4. Activate git hooks:

   npx husky install
   # or
   yarn husky install

5. Add the commit-msg hook:

   npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'

If you don't want to run the step 4 (npx husky install or yarn husky install) every single time you clone your repo include the prepare script in your package.json and it will be executed automatically every time you run the command to install your project's dependencies (e.g. npm install or yarn):

"scripts": {
  "prepare": "husky install" 
}

If you're facing any configuration errors, check the commitlint guide.
It's done! Now you can try to commit some new changes (you might want to check the conventional commits specification here):

git commit -m "some new message" # ❌ this will fail
git commit -m "foo: some new message" # ❌ this will fail
git commit -m "feat: some new message" # ✅ this won't fail

Add interactivity to your git commit command

1. Install commitizen:

   npm install -D commitizen
   # or
   yarn add -D commitizen

2. Make your repo commitizen friendly:

   npx commitizen init cz-conventional-changelog --save-dev --save-exact
   # or
   yarn commitizen init cz-conventional-changelog --yarn --dev --exact

3. Add the prepare-commit-msg hook:

   npx husky add .husky/prepare-commit-msg  'exec < /dev/tty && node_modules/.bin/cz --hook || true'

commitizen.mp4