How I Set Up Prettier

Tue, Dec 28th, 20212 minsdevelopment

Prettier is a opinionated code formatter that makes it easy to create more consistent code automatically.

In this post, we are going to install, configure, and test Prettier on a TypeScript project.

Install Prettier

First, install the prettier package:

npm install -D prettier

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.

npm install -D @trivago/prettier-plugin-sort-imports

Configure Prettier

Create a .prettierrc.json file in the root of your project

touch .prettierrc.json
{
  "importOrder": ["^@/(.*)$", "^[./]"],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true,
  "printWidth": 80,
  "proseWrap": "always",
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "none"
}

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 just 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 tsconfig.json:

{
  "baseUrl": ".",
  "paths": {
    "@/*": ["./*"]
  }
}

Add Prettier Ignore

The quickest and safest way to have Prettier ignore files is by copying your .gitignore file:

cp .gitignore .prettierignore

Format all files

To format all files using Prettier, you can run the following CLI command. I highly recommend comitting the work you've done so far to version control since this command will most likely change most of the files in yoru project.

npx prettier --write .

Final Thoughts

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 my weekly review newsletter

The weekly review is a place to recommend music and movies, as well as what I'm up to as a software developer and indie entrepreneur.

Subscribe Now