How I Set Up Prettier
Prettier is a opinionated code formatter that allows you to create more consistent code automatically.
In this post, we are going to install, configure, and test Prettier on a TypeScript project.
First, install the prettier package:
Install plugin to sort imports
Next, install the sort imports Prettier plugin. I have found that being consistent with the order in which imports are imported goes a long way in a project.
.prettierrc.json file in the root of your project
A few points about the rules I like to use:
80 characters as the print width works great for split screen windows and general legibility.
2 spaces as the tab width is enough to get the job done without sacrificing width space.
The sort import plugin has ^@/(.*)$ in the first position of the array. You can map the root of your project to @/ by adding the following path to your
Add Prettier Ignore
The quickest and safest way to have Prettier ignore files is by copying your .gitignore file:
Format all files
To format all files using Prettier, you can run the following CLI command. I highly recommend committing the work you’ve done so far to version control since this command will most likely change most of the files in your project.
Prettier is an amazing solution for keeping your files formatted. I often don’t write my code in a prettier way, and have Prettier setup to run on save to auto format my files for me. You don’t have to deal with bad spacing, extra line breaks, and even the order of imports in your TypeScript files. This has been a huge time-saving tool for me over the last 5+ years and I now install Prettier in this way on all my projects.
Sign-Up for New Posts
Stay in the loop and get the latest blog posts about development sent to your inbox.