Josh Medeski Memoji Josh Medeski

Menu

How I Set Up Prettier

Development
How I Set Up Prettier hero

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.

Categories

These are a few of my favorite things.

Dotfiles

My developer environment

Development

How I build websites and apps

Desk Setup

The space that helps me create

Productivity

How I get things done

Personal Development

Creating a meaningful life

Stay up to date

Get updates on my latest content on web development, vim, macOS, working from home, productivity, and more.

Sign up to my newsletter