How I Set Up Husky Pre-Commits in Angular Projects in Just 3 Simple Steps in 2023

Are you tired of finding code issues after they've made their way into your project? It's like finding a sock in the laundry after you've already put it in the dryer. You wish you could catch problems before committing your code, right? Well, you're in luck! In this article, I'll show you how to set up Husky pre-commits for your Angular projects, allowing you to catch issues before they become a bigger problem.

Before we dive in, let's talk about why you need Husky. Most developers don't think about code quality until it's too late, but I believe in taking a proactive approach to code quality. By setting up Husky pre-commits, you can catch issues before they make their way into your codebase, saving you time and hassle down the line.

Great! Now that we have set up Husky, let's take it a step further and integrate Commitzen. With Commitzen, we can ensure that our commit messages are consistent, descriptive, and follow a standard format. This makes it easier for other developers to understand the changes that have been made to the codebase.

Integrating Commitzen with Husky is a simple process that can make a big difference in your development workflow. Let's get started!

Step 1: Setting Up Commitizen

As mentioned earlier, Commitizen is a tool that helps you write standardized commit messages using the conventional commits specification.

To get started, we need to install Commitizen as dev dependencies. In your terminal, run the following command:

npm install commitizen --save-dev

Once installed, we need to add a new script to our package.json file

"scripts": {
   "commit": "cz"
}

When you make a commit, you'll be prompted to fill out some information about your commit, such as the type of change, a short description, and a longer description. The prompts are designed to guide you in writing a well-formatted commit message that follows the conventional commits specification.

Once you've filled out the prompts, your commit message will be automatically formatted based on the conventional commits specification. You can check this by running the git log command. I absolutely LOVE that!

Step 2: Setting Up Husky Pre-Commits

Ensures Code Quality Before Committing!

By setting up Husky pre-commits for your Angular projects, you can catch issues before they make their way into your codebase. This ensures that your code is of high quality before committing it to your repository.

npm install husky --save-dev

npx husky install

We will install husky after node module installation with:

"scripts": {
   "postinstall": "husky install"
}

Step 3: Setting Up Tests with Husky

In order to run tests, we need to set up a script that can be executed with a single command. In this case, we'll be using the "test:headless" script. This script is used to run tests in a headless browser environment, which means that there is no graphical interface for the browser. This makes it faster and more efficient to run tests.

This command will run tests using the Angular CLI's built-in testing framework. We've added the "--watch=false" flag to ensure that the tests only run once, rather than in watch mode, which would keep the tests running continuously.

"scripts": {
   "test:headless": "ng test --watch=false --browsers=ChromeHeadless"
}

To add the pre-commit hook, we'll use the "npx husky add" command. Here's an example:

npx husky add .husky/pre-commit "npm run test:headless"

Finally: Test your setup

With Husky pre-commit and linting set up, you can now test your setup to ensure it's working as expected. To do this, make a change to one of your .ts files and attempt to commit your changes.

Advice

Take Control of Your Code Quality!

By following these three simple steps, you can set up Husky pre-commits for your Angular projects and start catching issues before they make their way into your codebase. Don't wait until it's too late to start taking proactive measures for code quality. With Husky pre-commits, you can catch issues early, enforce code quality standards, and streamline your development process.