From project to project, code formatting rules can vary significantly and it is not always easy to follow them exactly.

So, to encourage a particular formatting within your team, you can write a long contribution guide, but it will take a lot of energy to promote it and even more to make sure your teammates use it.

Instead, there is a much “skinny” and efficient solution : An automatable code formatting tool: Prettier.

What is about TSLint?

TSLint is part of the toolkit of any Angular application generated with Angular CLI. As a reminder, TSLint is a static analysis tool, which defines rules to increase the quality of TypeScript code in terms of readability, maintainability and functionality.

Here is an example rule for each category:

• Restrict the maximum number of characters per line (max-line-length) makes the code more readable
• Limiting the number of “if bloc” nested in a function (cyclomatic-complexity) makes the code more maintainable.
• Declaring variables only if they are used (no-unused-variable) ensures the correct functionality of the program

TSLint is able to identify formatting error, but TSLint does not fully automate code formatting. For example, the max-line-length rule cannot be corrected automatically (we cannot run tslint –fix on the command line for this rule) where Prettier can take care of this very well. In addition TSLint only formats TypeScript files while Prettier formats other types of files such as HTML and CSS files for example.

That’s why we’re going to keep TSLint for what it does best – finding functional errors and taking Prettier for automating code formatting.

Configure Prettier

Let’s add a .prettierrc file to the root of the workspace ( project):

This configuration file will override the default Prettier configuration. We just need to add the specific properties that correspond to our need.

Let’s use the single quotes with the singleQuote property and increase the line length to 140 characters, to stick closer to the original TSLint configuration.

{
 "singleQuote": true, 
"printWidth": 140
}

However, nothing prevents you from changing these rules to adapt them to your style.

Next, let’s add another .prettierignore file to list the files we don’t want to format.

This configuration is based on the syntax of the .gitignore files. We indicate here that we must ignore all files in the workspace except / e2e, / projects and / src which contain our business code.

Finally, inside the remaining folders, we ignore some folders (like assets /) and some files (like package.json and package-lock.json, which formatting is handled automatically by NPM).

Configure TSLint so that it does not interfere with Prettier

Prettier is now well configured, but We still can have conflict between TSLint and Prettier . Let us disable the code formatting rules specific to TSLint, in order to leave Prettier free to do this work.

For that, we are going to install the tslint-config-prettier package

$ npm i -D tslint-config-prettier

The contents of this package are very simple and this is what the configuration it provides looks like:

As you can see, it just sets all the code formatting rules that TSLint supports to false.

To use it, let’s add it to the tslint.json file at the root of our workspace, which allows us to configure TSLint:

Be careful, place the tslint-config-prettier configuration in the last position of the extends array.

The rules section of that same tslint.json file has priority over what is defined in the extends section. We then have to remove the code formatting rules from this section (rules), without touching the rules for static analysis of Angular specific functional errors.

Here are the rules that we must remove:

• arrow-parens
• max-line-length
• no-consecutive-blank-lines
• quotemark
• trailing-comma

To identify these rules, we have many solutions. One of them is:

• see the page http://unpkg.com/tslint-config-prettier/lib/index.json which lists the rules in question.

Prettier and TSLint are now well configured in our Angular application.

Run Prettier on the workspace

To run Prettier, we now need to install it:

$ npm i -D prettier

Option -D is like –save-dev . Package will appear in your ‘devDependencies’.

The executable is accessible from the ./node_modules/.bin/prettier folder.

We can run the command with the –check option (to list problematic files without modifying them) or with the –write option (to modify them). It is magic !

we can also add an NPM script to the package.json file, to make our life easier:

Integrate Prettier into our IDE

If you use VSCode, I suggest you install the plugin Prettier – Code formatter. This will allow us to format a file opened in our IDE from the “Format document” context menu, without going through the command line.

We can even go further by configuring VSCode to format an open file as soon as we save it, with the editor.formatOnSave option:

Run Prettier before every commit with husky and pretty-quick!

If you use Git as your version-file manager, then I suggest you add a “hook” to run Prettier before each commit, on all modified files. As a reminder, “hooks” are quite simply scripts that run automatically when a specific action is triggered. also like Taskrunner.

Let’s install 2 other packages which will allow us to simply run Prettier before each commit:

$ npm i -D husky pretty-quick

• husky: allows to configure Git hooks.
• pretty-quick: allows to run Prettier only on files that have been modified.

Now let´s configure husky to run pretty-quick before each commit. For example, we can fill in this configuration in the package.json file:

And that´s it.

more about git hooks

Reference

https://github.com/xebia-france/angular-prettier