DEV Community

loading...
Cover image for Husky hooks in Angular 🐶

Husky hooks in Angular 🐶

salimchemes profile image Salim Chemes ・3 min read

What is husky?
Husky prevents push/commit changes to our repo that are not desired like tests failing or not well formatted files. If we try to commit something that is not correct, 🐶 will say: Woof!

How it works?

  • npm install husky --save-dev
  • adds your hooks into package.json
// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "npm test",
      "pre-push": "npm test",
      "...": "..."
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

How husky can help us and what are we going to cover on this post?

  • Run Prettier and avoid not well formatted files
  • Run tests and make sure all of them pass before pushing

What is Prettier?
Prettier formats our code in order to have an unified pattern for the project files.

How it Works?
You need to install the dependency and follow the next steps:

  • npm i prettier --save-dev
  • adds .prettierrc to let your editor know that you are using Prettier
  • adds .prettierignore to exclude files to be formatted

We have Prettier running in our project so let's adds our first hook

Hook #1: Prettier
First of all we need to install

  • npm install --save-dev pretty-quick husky
  • adds a pre-commit hook on package.json
// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

That's all, now we are going to see if it works

I will add some extra spaces in a app.component.html (could be any file)

Alt Text

Finally I will commit to see what happens

Alt Text

Nice! Prettier pre-hook fixed my file (no extra spaces anymore)

Alt Text

You can also use Prettier Visual Code extension and setup the IDE to format the code when saving files. But it will work just locally and you will need this configuration in all developer computers from your team. If for some reason any developer does not have this setup, some not formatted code could be pushed generating posible merge conflicts.

Hook #2: Running tests
This one is very simple, we will prevent commits with unit test failing. The only thing we need to do is add an extra sentence in our pre-commit hook (note that we are running the test headless to don't open any browser)

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged && ng test --watch=false --browsers=ChromeHeadless
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Let's make a test fail and try to commit

Alt Text

Since there is a failing test, I am not able to commit.
Let's fix the test and try again.

Alt Text

Conclusions

  • Husky hooks are helpful to have a standard way to commit/push code
  • Prettier will format the code for us avoiding merge conflicts and helping us to get our project files more clean and organised
  • You can add as many hooks as you want, in this post we just reviewed 2 but could be more

References

Thanks for reading!

Discussion

pic
Editor guide