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.

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

{
  "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 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 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.

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.