Ultimate Angular + Prettier Cheatsheet

How did I ever code without this?

Like many others, within the first weeks of using Prettier, I wondered how I’d ever survived without it. In fact, thats such a common response from new Prettier users, you might say it’s totally cliche to express such an opinion. Notwithstanding, this IS how I felt as well. The following is the most concise list of steps one can take to get Prettier successfully integrated into their Angular project.

Ye Old Steps

Here are your steps for getting Prettier into your Angular project. After this list you will find the instructions for each step, to guide you through this process.

1. Install Prettier locally
2. Add prettier.config.js and .prettierignore files at root of your project
3. Add your Prettier options to the prettier.config.js
4. Add the text package.json to your .prettierignore
5. Remove conflicting tslint rules from your tslint.json
6. If you use EditorConfig, modify your .editorconfig to match your prettier.config.js
7. Configure your IDE to format on save
8. Decide on a rollout strategy
9. Read up on Prettier

It’s seriously that easy. Let’s go over each of those steps. Now that we have this list, let’s go over each one in more details.

Install Prettier locally 
For npm: npm install --save-dev --save-exact prettier
For yarn: yarn add prettier --dev --exact

Add Prettier config files
You want to add two new files to your project to support Prettier. Add both of them to the same directory as your package.json. The files are:
- prettier.config.js
- .prettierignore

Modify your prettier.config
Prettier comes with lots of default styling options. Most of them you can’t modify. There are some config options you can tweak, however. Look over the following and update those you feel compelled to update.

Modify your .prettierignore
Depending on the settings from this previous step, you might run into some errors where any changes to your package.json will result in a massive reformat. If you manually edit it, Prettier may change all the tabWidth to 2. But if you use npm to install anything, that install will reformat the entire package.json to use tabWidth of 4. To avoid this tabWidth-thrashing, add package.json to your .prettierignore.

Remove certain tslint.json setting that conflict w/ Prettier
Now that Prettier is in, it needs a little help to play nicely with the tslint.json that was produced by the AngularCLI. You will want to remove the following options from your tslint.json.

Modify .editorconfig file
If you’re project is equipped with a .editorconfig, you may have some conflicts with how things will work with regards to thetabWidth that was specified in your prettier.config.js. Update the indent_size in the .editorconfig to match the tabWidth in the you specified in your prettier.config.js file.

Modify your IDE
Now that Prettier is in the project, you need to get your IDE to reformat your code anytime you save a file. The Prettier docs have examples for setup in the following IDEs: Atom, Emacs, Vim, Visual Studio Code, Visual Studio, SublimeText and/or Webstorm/IntelliJ/PyCharm/Resharper. Pick your IDE-of-choice, and follow the corresponding instructions from Prettier’s website. Once you get it setup, open any file, make a few edits, and save the file to watch the magic of Prettier happen.

Note for VSCode users: the setup instructions on Prettier’s website are incomplete. They tell you to install the Prettier extension. But there is one additional step you need to do before Prettier will format your code on save. You need to open your User Settings (Cmd+, or click Code > Preferences > Settings) and change the setting for editor.formatOnSave to true. If your User Settings doesn’t have editor.formatOnSave, you should add it and set it to true.

Decide on a rollout strategy
Now that you’ve got Prettier installed and its working with you, you need to decide how you will roll it out. This can result in a larger conversation. Do you want to open each file individually, and let Prettier reformat all of them in one night, allowing you to get all of the frivolous reformatting done in one large commit? Or do you want to leave all the files alone, and let the files get reformatted down the road the next time you or your team modifies said file?

If you do the former, that initial commit will be massive, possibly including each file in your project. If you do the latter, for weeks and months to come, your team will slowly commits where the entire file will change, even though only a few lines were modified. It makes it harder to mentally parse those commits to see what actually changed.

Read up on Prettier
When you first begin to use Prettier, you will notice that sometimes it will do one type of formatting, when another time it will do something different, despite the two scenarios appearing to be the same. An example is: sometimes it will leave an arrow function on one line, where other times it may break them out into two or three different lines. When this happens, it may seem random. But it’s far from random.

The facebook team has taken quite a bit of consideration when building in these seemingly-variable behaviors. By reading a little about what it is doing, and why it’s doing it, you will more quickly be able to understand (as well as teach others) why it appears to do different things at different times.

Ta-Da!

At this point, Prettier is up and running. You should start preparing your PR so that you can add it to your project. There are many more options that you can consider here. You can setup a pre-commit hook that will ensure that all files are formatted according to Prettier. You can also integrate it with your CI system, to ensure that your build never gets non-Prettier-compliant code out into the open.

If these steps didn’t work for you, and you have some questions for us, please feel free to reach out and chat with us. You can comment below and someone will respond very quickly.

Why Use Prettier?

Because this is a cheatsheet, I am putting the “Whys” at the end of the post instead of at the beginning. I figured that if you clicked on the title “Ultimate Angular + Prettier Cheatsheet”, you were here for the “Hows” not the “Whys”. So I left this part for the end.

Why do you want Prettier? TBH, there are quite a few reasons I think you should adopt it. However, it is possible that a product exists where Prettier might not be needed. Let us share some of our horror stories that have ceased now that I use Prettier. I hope this will help explain the benefits by talking about a few examples.

When working on a team with 60+ Angular developers, some of the ESLint/TSLint rules can get out of hand. Some organizations claim that they lose countless hours of work because their teams are arguing about which rules should fail a build, and which should simply be warnings. A lot of time and grief can be spent here, as your team attempts to customize ESLint/TSLint to meet their needs. WITH PRETTIER, this issue is gone! Because Prettier prescribes so many of it’s styles out of the box, the team doesn’t have as much tangible control over which rules are set to what. The team at Facebook has prescribed a styleguide for you. When you adopt Prettier, you are effectively agreeing to follow Facebook’s prescribed styleguide (with the addition to the settings that you modified in prettier.config.js. Not having these conversations can increase team harmony and camaraderie.

Conclusion

If you haven’t begun using Prettier with your Angular projects, try it out today. Use this cheatsheet to whip through the setup process. I feel confident that you will love it like many other Angular, React, and Vue developers do.

Please give us a clap if you found this useful, and follow our blog to catch a lot more useful Angular content coming soon.

Please Follow Us!

Please help ng-conf by following the event on social media:

• Follow the author on Medium
• Follow ng-conf on Medium
• Follow ng-conf on Twitter
• Subscribe to ng-conf on Youtube
• Join the ng-conf newsletter

Don’t forget to Clap!!