Set Up Conventional Commits, Commitlint, and Husky

Table of contents

• Step 1: Conventional Commits setup
• Step 2: Commitlint setup
• Step 3: Husky setup
• Step 4: Using Conventional-changelog
• Step 6: Useful resources

Step 1: Conventional Commits setup

1. Install the Conventional Commits extension in Visual Studio Code to streamline the commit process.

2. Open extensions in Visual Studio Code with Ctrl + Shift + P and search for “Conventional Commits”. Select the option and press Enter.

3. In the dialog box, choose the type of commit you’re making. You can select from options such as feat (new feature), fix (bug fix), and others.

4. If your change relates to a specific component (scope), you can choose or create a scope. This provides additional context about the commit’s scope.

5. Select a gitmoji that visually represents the purpose of your commit. These emojis help quickly identify the nature of the changes.

6. Provide a brief, concise description of the change you’re making. Use clear, direct language.

7. Optionally, you can add a more detailed description of the commit to provide additional information if needed.

8. If relevant, list breaking changes or issues closed by this commit. This makes it easier to track and document the changes made.

9. You can customize a shortcut for quicker access to the extension, for example, Shift + Alt + G.

Step 2: Commitlint setup

Commitlint is a command-line tool that we can integrate into our project and even hook into our GitHub workflow so that every time we make a commit, the hook runs, checks whether it follows Conventional Commits style rules, and only then allows the commit to proceed.

1. Start a new npm project with npm init -y.

2. Install the dev dependencies:

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

3. Create a commitlint.config.js file in the project root with the following content:

   module.exports = {
   	extends: ["@commitlint/config-conventional"],
   };

   What we’re doing here is inheriting the Conventional Commits style rules from the package we just installed.

Step 3: Husky setup

Husky is a tool that simplifies setting up Git hooks in development projects. It lets you run scripts automatically on specific events, such as before committing or before pushing changes to the repository. This helps automate tasks like running tests or formatting code, keeping quality and consistency in software development.

1. Install Husky as a dev dependency:

    npm i -D husky

2. Add the Husky prepare script in your package.json:

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

   Then run:

    npm run prepare

3. Add the commit-msg hook with the following command:

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

4. Create a .gitignore file and add node_modules to it.

Step 4: Using Conventional-changelog

Conventional Changelog is a tool that automates generating change logs from your commit messages. By following Conventional Commits conventions, it makes it easy to produce consistent, readable changelogs. The tool parses commit messages and generates change logs automatically, improving documentation and communication of software updates.

1. Install conventional-changelog-cli globally or locally:

    npm install -g conventional-changelog-cli

   Or locally:

    npm install --save-dev conventional-changelog-cli

2. Generate the changelog file with the following command:

    conventional-changelog -i CHANGELOG.md -s -r 0

Step 6: Useful resources

Conventional Commits - gitmoji - commitlint - husky

With these steps, you’ll be using Conventional Commits, Commitlint and Husky together, keeping your workflow consistent and generating changelogs automatically. This approach improves code quality and collaboration in project development.