Using Git Hooks for better commits using Angular Prettier Husky

Git hooks let us hook into Git events to add code that can be executed at events different events such as:

• Commit-msg

• Pre-commit

• Pre-push

You can set up Git Hooks in the .git folder inside a Git project. These are written as bash scripts. One that people lacking social skills and wearing square glasses can only like to write(joke).

 

Step 1: Install prettier
 

npm install --save-dev prettier

Also Read: GIT IGNORE

Step 2: Configure prettier
 

{
    "bracketSpacing": true,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "es5",
    "printWidth": 180
}

At the root of the project, create another file namely .prettierignore.
 

package.json
package-lock.json
yarn.lock
dist

Step 3: TSLint + Prettier

In this step, we will add tslint-config-prettier to disable all conflicting rules creating problems. We do it so that both could be used without any problem. The work gets divided between them to where Prettier takes care of the formatting and tslint takes care of the remaining part.

npm install --save-dev tslint-config-prettier

Also Read: Data Binding in Angular

Step 4: Install pretty-quick

If you do not want prettier to run on the whole project and only run on the changed files you can use pretty-quick.

npm install --save-dev pretty-quick
 

Step 5: Install husky

Now we arrive at the most significant step of creating Git Hooks. Firstly, we will install husky, 

npm install husky --save-dev

Pre hooks can be used in protecting the quality of your code at a much, much higher level. It does so by simply running a shell command which you specify and if the command fails with exit status 1, the process terminates. So it will prevent any broken builds as you won't be able to push the code if your tests are failing or your ts files are not properly lined. :)

"husky": {
    "hooks": {
        "pre-commit": "pretty-quick --staged && ng lint && ng test",
        "pre-push": "ng build --aot true"
    }
}

Also Read: Eager, Lazy, and preloading

Below are the three things we are doing in the pre-commit hook,

• pretty-quick --staged - This will run prettier to format staged files and those files will be re-staged automatically after formatting
• ng lint - It will run the lint command, to check lint errors and warnings
• ng test - This will run the unit test cases of the project

In the pre-push hook, we are creating the build of the project. The best thing is if any of the tasks fail it will terminate the process. This will prevent us from lint errors, fail test cases, and broken build.

Turn To Our SaaS App Development Services

We are a 360-degree software development company that provides cross-platform SaaS app development services to address varied software project requirements. We have an experienced team of Java, PHP, and Python developers who use advanced frameworks, tools, and SDKs to build scalable web and mobile applications with custom features. For more detail, reach us out at [email protected].