The Right way to commit a code - Integrating Git hooks using husky(V7) with (ESLint + commitlint + SonarQube) in Angular(12+)
Tags: angular, commit, webdev, productivity
Published: 2021-12-08 11:22:01

> Here we'll be automating our commit workflow i.e when a developer commits a code it will check for lint errors, do unit testing then inspect the code using SonarQube and check whether the commit message given by developer follows the commit convention or not. Only If all above conditions are satisfied the code will be commited.


 In this article we'll cover the basic set-up required to integrate [husky](https://typicode.github.io/husky/#/) into your Angular Application.


> Husky improves your commits and more 🐶 woof!
> You can use it to lint your commit messages, run tests, lint code, etc... when you commit or push. Husky supports all Git hooks.

Now, Let's get started

- First install husky

`npm install husky --save-dev`

This command will add husky to your packahe.json file.

-  enable Git Hook:

`npx husky-init`

this will add following script to you package.json file
 "prepare": "husky install"

and it will also create a .husky folder in your root directory.

- Next we'll be creating a file in the Husky directory for the purpose of linting commit messages

`npx husky add .husky/commit-msg 'npx --no-install commitlint --edit'`

this will create a file called commit-msg in .husky directory with the following data:

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

npx --no-install commitlint --edit
```
 
Now we'll install commit lint
`npm install @commitlint/config-conventional @commitlint/cli --dev`

now create a file commitlint.config.js in the root directory with the following data




{% gist https://gist.github.com/vishnuramero/9eb2eb2f7f88c1943e37a2265e5d8887 %}




- Now when you commit you changes using 

`git commit -m 'new fixes'`

it will give the following error, if its not aligned with the git commit conventions ([git conventions](https://www.conventionalcommits.org/en/v1.0.0-beta.2/#why-use-conventional-commits))
![without convention commit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7iioghiw7xrirob1d34.png)

- again perform the commit with 
`git commit -m 'style(package): package upgrade'`

![commit following git commit convention](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ikj1qppmqaoi4v8fwo5.png)


## Linting before commit using Husky
Install following package:
`npm install lint-staged --save-dev
npm install eslint`

- Add linting to the application
[https://github.com/angular-eslint/angular-eslint](https://github.com/angular-eslint/angular-eslint)

`ng add @angular-eslint/schematics
`

`ng g @angular-eslint/schematics:convert-tslint-to-eslint --remove-tslint-if-no-more-tslint-targets --ignore-existing-tslint-config`

this will migrate the default tslist to esLint

Now add the following content to the pre-commit file .husky/pre-commit

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

npx pretty-quick --staged
npx lint-staged
ng test --watch=false --browsers=ChromeHeadless

```

- Now when you run the following git commit command it will run the **pre-commit** script which you just defined.

`git commit -m 'style(package): package upgrade'`

It will run pretty-quick after that it will check lint and after that it will run test case for the project and if successful it will check for the commit message.

![running git commit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxgmp5tp2q7lgj48gu4h.png)


## Integrating SonarQube

- Install SonarQube in your system:

> For Mac Users:
> `https://techblost.com/how-to-setup-sonarqube-locally-on-mac/`

> For Windows Users:
> 1. Install SonarQube form https://www.sonarqube.org/downloads/
> 2. Post download extracts the ZIP file to any folder and then run the StartSonar.bat from sonarqube\bin\windows-x86–64.
> Now you can access the SonarQube from your browser using the default port http://localhost:9000. You can use the default credentials i.e admin and admin.



![SonarQube login window](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vaii3ulb6d5rokzm2hck.png)




 ![SonarQube after login](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ntduvog71z47i9h19rhc.png)

##  Configure Sonar with Angular

`npm install sonar-scanner --save-dev` 

- Create a file name **sonar-project.properties** in the root directory with the following data:

{% gist https://gist.github.com/vishnuramero/a7c4f1b395bc08629b78846ab2938e0e %}

- Now, add following script in your package.json file:

```
"sonar": "sonar-scanner"
```

- Now, run the following script using `npm run sonar`

If everything goes as planned SonarQube will start inspecting your angular project 

- On Successful completion you can navigate to `http://localhost:9000/projects` and see the inspection result done on the project.

![inspection result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3t9ct5rpl3swioncjib.png)
 


## Final - Integrating Sonarqube with husky

- Add the following in your pre-commit file lazyloading/.husky/pre-commit


{% gist https://gist.github.com/vishnuramero/51663f77150cdecb6c20a03840a88477 %}


- Now run `git commit -m 'feat(sonar): sonarqube integrated'`


![SonarQube with husky](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xx0f66ifbrvqkvnbkr7.png)


That's all, Congratulations🥳🥳  you have successfully integrated Husky with Es-Lint, commitlint and SonarQube with your commit workflow.


You can check the sample code in https://github.com/vishnuramero/lazyloading