Setting up Prettier in an Angular CLI Project

Photo by Mike Kotsch on Unsplash

Victor Mejia is a Sr. UI Engineer at McGraw-Hill Education. He is also an instructor at LinkedIn Learning.

By now I’m sure you have heard of Prettier, the “opinionated” code formatter that has been making developers happy by having their code magically formatted in a clean, consistent style. I care a lot about continuous integration, and I believe that ensuring clean, formatted code should be part of it.

I’ve recently been using Prettier and I love it. And you may not know it, but Prettier has TypeScript support! That means that you can easily integrate it into your Angular project.

However, there is TSLint, so how do the two work together? It’s simple, we can leave the code-quality rules for TSLint to handle, and we can have Prettier take care of formatting rules, and I totally agree with Victor Savkin here:

Combined with a pre-commit hook and a check for CI, we can easily provide automatic, consistent code formatting for your Angular app. Let’s get started.

Install and Configure Prettier

I’m assuming you are starting from a project generated with the Angular CLI. It sets up linting with TSLint for you out of the box.

First install Prettier:

npm install prettier -D

Next, I recommend you set up a configuration file. This has the added benefit that regardless of what editor your team members use, they will all reference the same configuration file. Prettier has defaults, and so you only need to specify the options you wish to override. However, I like to be explicit so that any developer on your team knows exactly what rules are being applied. Create a .prettierrc file:

{
 “printWidth”: 120,
 “singleQuote”: true,
 “useTabs”: false,
 “tabWidth”: 2,
 “semi”: true,
 “bracketSpacing”: true
}

The only defaults I am overriding here is the printWidth (default is 80), and enforcing single quotes instead of double quotes.

Next, I recommend you install the extension for your editor. I use VS Code, along with the Prettier extension. Then, in your user settings, make sure you enable formatting on save:

“editor.formatOnSave”: true

Now whenever you save your code, it will be automatically formatted. Neat!

Formatting on save in VS Code

Remove formatting rules from tslint.json

As mentioned previously, we want to remove the code formatting rules from TSLint and let Prettier handle that:

Configure pre-commit hooks

Pre-commit hooks are a great way to run certain checks to ensure clean code. This can be used to format staged files if for some reason they weren’t automatically formatted during editing. husky can be used to easily configure git hooks to prevent bad commits. We will use this along with pretty-quick to run Prettier on our changed files. Install these packages, along with npm-run-all, which will make it easier for us to run npm scripts:

npm install npm-run-all husky pretty-quick -D

To configure the pre-commit hook, simply add a “precommit” npm script. We want to first run Prettier, then run TSLint on the formatted files. To make our scripts cleaner, I am using the npm-run-all package, which gives you two commands, run-s to run scripts in sequence, and run-p to run scripts in parallel:

"format:fix": "pretty-quick --staged",
"precommit": "run-s format:fix lint",
"lint": "ng lint",

Now, when you commit your staged files, it will first format your files and then run those through tslint.

Pre-commit script to run Prettier and tslint

Configure npm script for CI

Last thing we need to do is to add a check that we can use in a CI environment. In this particular case, we should check our source files and error out if any files fail to conform to Prettier’s configuration. We can configure a “format:check” npm script for this:

We run Prettier, specifying the config file, then use a flag to print out any files that are different from Prettier formatting, which also throws an error. Lastly, we supply the source files we want to check.

Some drawbacks

Sometimes Prettier won’t give you the exact output you desire. For instance, take this piece of code:

Prettier is trying to fit it all in one line. Currently, it will break only if there are three or more chained calls, in this case I only have two. You can avoid this by changing the code slightly:

this.searchTerm.valueChanges.debounceTime(500).subscribe(term => {
  this.newSearch.emit(term);
});

You can also adjust the max-width to your liking. These are such small shortcomings, however, compared to the benefits it provides.

Check out this commit for your reference. I also have a repo containing unit testing techniques for Angular applications.

And that’s it! Using Prettier in your Angular application will be a game-changer, especially if you work on a large team. Try it out, and let me know what you think!