Husky for Angular: What, Why, When, and How

Supercharge Your Angular Projects with Pre-commit Hooks Using Husky

Learn how to use Husky in Angular projects to enforce code quality and streamline development. This step-by-step guide covers setup, real-world examples, and best practices.

Introduction

Let’s face it — team coding can sometimes feel like an Olympic relay. You pass the code baton, but someone always trips and introduces a bug. Enter Husky, a lightweight tool that ensures code quality through Git hooks, keeping your Angular project squeaky clean.

In this blog, we’ll explore:

• What Husky is and why you should care.
• Why it’s essential for Angular developers.
• When to use it.
• How to implement it step by step, with real working code.

Oh, and I’ve sprinkled in a bit of humor — because debugging is hard, but reading this blog shouldn’t be.

What is Husky?

Husky is a tool that enables Git hooks in your projects. Think of Git hooks as tiny elves that automatically perform tasks before or after Git commands. With Husky, you can:

• Run linting before committing.
• Prevent committing if tests fail.
• Ensure prettier formatting.

In essence, Husky is your project’s bodyguard, ensuring no “ugly” code sneaks in.

Why Use Husky in Angular Projects?

Angular projects thrive on teamwork. But without safeguards, the following horrors await:

1. Code that looks like it fought a tornado.
2. Failing builds due to missing test cases.
3. Endless debates over spaces vs. tabs (spoiler: tabs are evil).

Using Husky means:

• Automated enforcement of coding standards.
• Improved team collaboration.
• Peace of mind that bad commits are stopped at the door.

When Should You Use Husky?

Answer: Always.

If your project uses Git and you care about code quality (who doesn’t?), Husky belongs in your toolbox.

How to Set Up Husky in an Angular Project

Now the juicy part — let’s implement Husky in an Angular app.

Step 1: Create an Angular Project

If you already have one, skip this step (and grab a coffee). If not:

npx @angular/cli new husky-demo --routing --style=scss  
cd husky-demo

This creates a fresh Angular app with SCSS as the default style.

Step 2: Install Husky

Run the following command to add Husky:

npm install husky --save-dev

What’s Happening Here?
We’re adding Husky as a development dependency. This keeps our production build lightweight.

Bonus Tip: Use npm ci in CI/CD pipelines for consistent dependency installs.

Step 3: Enable Husky

Activate Husky by adding the following script to package.json:

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

Then run:

npm run prepare

Why This Matters:
The prepare script ensures Husky works right after dependencies are installed.

Bonus Tip: Always run prepare after cloning a project with Husky installed.

Step 4: Add a Pre-commit Hook

Create a Git hook using Husky:

npx husky add .husky/pre-commit "npm run lint"

This creates a .husky/pre-commit file that runs npm run lint before any commit.

.husky/pre-commit

#!/bin/sh  
. "$(dirname "$0")/_/husky.sh"  

npm run lint

Step 5: Add Linting

Ensure tslint.json or .eslintrc.json exists in your Angular project. Example .eslintrc.json:

{  
  "root": true,  
  "overrides": [  
    {  
      "files": ["*.ts"],  
      "extends": ["eslint:recommended", "plugin:@angular-eslint/recommended"],  
      "rules": {}  
    }  
  ]  
}

Code Explained:

• Extends recommended rules from ESLint and Angular.
• Overrides apply these rules to .ts files only.

Run linting with:

npm run lint

Bonus Tip: Integrate Prettier with ESLint for ultimate code beauty.

Step 6: Test Your Setup

Try committing some poorly formatted code:

git add .  
git commit -m "Bad Code"

If everything is set up correctly, Husky will block the commit and yell at you (kindly).

Directory Structure

Here’s how your project should look:

husky-demo/  
├── .husky/  
│   ├── pre-commit  
├── src/  
│   ├── app/  
│   ├── main.ts  
├── package.json  
├── .eslintrc.json  
├── angular.json

Full Code Example

package.json

{  
  "scripts": {  
    "prepare": "husky install",  
    "lint": "ng lint"  
  },  
  "devDependencies": {  
    "husky": "^8.0.0"  
  }  
}

.eslintrc.json

{  
  "root": true,  
  "overrides": [  
    {  
      "files": ["*.ts"],  
      "extends": ["eslint:recommended", "plugin:@angular-eslint/recommended"],  
      "rules": {}  
    }  
  ]  
}

.husky/pre-commit

#!/bin/sh  
. "$(dirname "$0")/_/husky.sh"  

npm run lint

Best Practices

1. Run Tests Before Committing:
   Add npm test to the pre-commit script.
2. Integrate Husky with CI/CD:
   Use Git hooks to catch issues before deployment.
3. Document for New Team Members:
   Write clear README instructions for Husky setup.

Bonus Tip

Use lint-staged for Faster Checks:
Add lint-staged for file-specific linting:

npm install lint-staged --save-dev

Update .husky/pre-commit:

npx husky add .husky/pre-commit "npx lint-staged"

Conclusion

Husky is a game-changer for Angular developers who want to enforce code quality and streamline workflows. By implementing Husky, you’re not just writing code — you’re fostering a culture of accountability and excellence.

For daily dose of SoftTech, Follow me on LinkedIn: https://www.linkedin.com/in/sehbanalam/