Conventional Commit for Mobile Development

Conventional Commits is a specification for adding human and machine-readable meaning to commit messages. It provides a set of rules for creating well-structured commit messages that can generate changelogs, automate versioning, and aid in the comprehension of the codebase history.

A conventional commit message follows a specific format, which includes a type, a scope(module), and a description, followed by an optional body and footer. Here is an example of a conventional commit message:

feat(users): search functionality added

In this example, feat is the commit type, which indicates that a new feature has been added. users here is the scope, which indicates which part of the codebase this commit affects. The description, add search functionality, summarizes the changes made in the commit.

The types available to be used are as follows:

build

Changes have been made to the build process, such as updating dependencies or configuration files.

ci

Changes have been made to the continuous integration (CI) configuration or scripts.

docs

Changes have been made to the documentation, such as updating README files or adding comments to code.

feat

A new feature or functionality has been added or modified to the codebase.

fix

A bug or error has been fixed.

perf

Improvements have been made to the performance of the codebase.

refactor

Changes have been made to the codebase that does not affect the behavior of the application, such as restructuring code or renaming variables.

style

Changes have been made to the code’s formatting, such as indentation, whitespace, or code style.

test

Changes or additions have been made to the tests for the codebase.

chore

Changes have been made to the codebase that does not fit into the other categories, such as updating dependencies or adding a new script to the build process.

Each commit type serves a specific purpose, and using them consistently helps to provide clarity and context about the changes made in the commit. By using conventional commit types, it becomes easier to search and filter commits by their type, which can be helpful when browsing the codebase history.

Set up Conventional Commit

Before setting up a conventional commit package you will need npm in your system to install.

Installing npm on Mac OS

1. First, check if npm is already installed on your Mac by running the following command in your terminal:

npm -v

2. If npm is not installed, you can install it using Homebrew, a popular package manager for Mac OS. If homebrew is not installed, to install Homebrew, run the following command in your terminal:

/bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

3. Once Homebrew is installed, you can install npm by running the following command

brew install npm

4. After the installation is complete, you can verify that npm is installed by running the following command:

npm -v

This should display the version number of npm that you just installed.

Installing npm on Windows

1. First, check if npm is already installed on your system by running the following command in your terminal:

npm -v

2. If not installed first, download and install Node.js from the official website: https://nodejs.org/en/download

3. During the installation process, make sure to select the option to install npm as well.

4. Once the installation is complete, open a command prompt and type the following command to verify that npm is installed.

npm -v

This should display the version number of npm that you just installed.

Installing Conventional Commit npm Package

Before adding any npm package please add node .gitignore to your project so that heavy-sized node modules dependencies do not make its way to your git repository.

Note: Please do not create .gitignore directly if you already have your iOS/Android/Flutter domain .gitignore because it will replace your domain’s .gitignore file. Instead, append the additional gitignore content to your already existing .gitignore file.

You can find the node .gitignore file here.

Please commit and push your code to git after creating or editing your .gitignore file.

Steps to install Conventional Commit

1. Navigate to your project directory using the terminal/command prompt and run the following command to initialize your project with npm.

npm init

This will create a package.json file in your project directory.

2. Install the Conventional Commit npm package by running the following command:

npm install — save-dev @commitlint/config-conventional @commitlint/cli

This command will install the necessary npm packages and save them as dev dependencies in your package.json file.

Installing Husky npm Package

1. Navigate to your project directory using the terminal/ command prompt and run the following command to install the husky npm package:

npm install husky — save-dev

This command will install the necessary npm packages and save them as dev dependencies in your package.json file.

2. Edit package.json to prepare a script by following the command below:

npm pkg set scripts.prepare=”husky install”

The above command will create a script with key prepare with the husky install command in package.json inside the scripts object.

3. Run the prepare command to run prepare script to initialize husky

npm run prepare

This will create the .husky directory in your project root.

4. Run the below command to add the pre-commit file

npx husky add .husky/pre-commit “”

This will create the pre-commit hook inside the .husky folder.

5. Create a shell file named common.sh inside .husky folder where you will see the pre-commit file and add the below scripts to the file

command_exists () {
  command -v “$1” >/dev/null 2>&1
}
# Windows 10, Git Bash and Yarn workaround
if command_exists winpty && test -t 1; then
  exec < /dev/tty
fi

6. Run the below command to add commit-msg file

npx husky add .husky/commit-msg “”

This will create the commit-msg hook inside the .husky folder. Replace the existing script with the script below

#!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 . "$(dirname "$0")/common.sh"
 npx commitlint --edit $1

7. Finally, create a .commitlintrc.json file in your project root directory with the following content:

{
  "extends": ["@commitlint/config-conventional"]
}

This file contains the Conventional Commit configuration for your project.

That’s it! You have now installed the Conventional Commit and Husky npm packages and set up Husky to validate commit messages according to the Conventional Commit guidelines.

Testing Conventional Commit

Conventional Commit Rule Violation

Committing with description only

Committing with wrong type

Following Conventional Commit Rule