How I Set Up Prettier hero

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:

Terminal window
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.

Terminal window
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:

Terminal window
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.

Terminal window
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 New Posts

Stay in the loop and get the latest blog posts about development sent to your inbox.

man sitting at desk in front of a landscape of rivers leading to a mountain range

Dev Workflow Intro

Your guide to creating a powerful and intuitive development workflow in the terminal.

The terminal is a powerful tool for developers, but it can be overwhelming to know where to start. This guide will help you create a powerful development environment in the terminal. Here are some of the things you'll learn.

  • Install packages and keep them up-to-date
  • Design a minimalist, distraction-free, user-interface
  • Use familiar keyboard shortcuts
  • Manage multiple projects with ease
  • Integrate with Git and GitHub
Get Started