Coding Style using TSLint, Prettier and Husky in Angular

In this tutorial, we will see how to automate and enforce global coding styling so that the team can focus on the coding instead of worrying about the coding style. So we will learn how to automate the way our Angular code is formatted and globally enforce a code style. We will also use the TSLint to check errors so that no errors will be checked into the repository.

Though it's one-time work to set up the automation it saves a lot of time for the developers to talk about the coding standards once the project is live. Thus what we will be doing is that we will automate basic Angular best practices and enforce the developers to use that best practices always.

Requirements

We should have the latest version of npm installed. If you want to update your npm, you can run the following command

npm install npm@latest -g

Installing Dependencies

We will install the dependencies in our root directory of the Angular project by using the following command:

npm install --save-dev husky prettier pretty-quick

Husky - It is a modern native Git hook that improves the commits by adding certain conditions. Like in our case we will be checking if the code is prettier or not.

Prettier - It is an opinionated code formatter, which enforces a consistent style by parsing the code. We can run prettier directly from the editor, but we will be adding it to the pre-commit hook.

Pretty-quick - This runs Prettier on our changed files and can be used as a pre-commit hook.

Configure Husky

The next step is to configure Husky to run Prettier and TSLint check whenever a new commit is about to be added. In package.json we will add the following config to the bottom of the file:

"husky": {
  "hooks": {
    "pre-commit": "pretty-quick --staged & ng lint"
  }
}

Note: We are using pretty-quick but there are other ways of doing it like using lint-staged, pre-commit etc. You can get all the options in the Prettier Pre-commit Hook Documents.

Testing Hook

Let's make our code a little ugly like below:

And then I will try to commit, Husky catches it and the pretty-quick makes it prettier and thus the commit happens. Now if we check the file the code is formatted and thus every time anyone tries to commit we will have a prettier code.

Sometimes when we try to commit, the Husky command does not run on pre-commit. So before rolling out this feature, do check if it's working for you. If not then you can uninstall husky and install the V4 of husky like below:

npm uninstall husky
npm install -D husky@4

This is happening because the latest version of the hooks is not automatically installed, but it was automatically installed with previous versions. If you want to keep Husky's latest version then you need to add a post-install script in your package.json file and have the husky install command as shown below:

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

So as you can see the small automation can help us in a big way as most of the code will be clean.