Start Using Prettier The Right Way

Austin Hill — Wed, 17 Feb 2021 19:47:28 +0000

Background

If you are like me, you have the Prettier extension installed, enabled formatting on save, got frustrated when your code kept jumping around on save, and disabled the extension. Unfortunately, it took me a long time to start using Prettier the way it is supposed to be used. The purpose of this post is to help you avoid the mistakes I made.

Setting up Prettier

If you don't have Prettier installed, do so now.
Install Prettier

Create the following file in the root of your project: .prettierrc

This file will contain all of the rules we want Prettier to follow in this project.

For those that want to have pretty code without knowing why, just paste the code in your new file.

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": true
}

For those looking for an explanation for each line keep reading.

Explanations

Trailing Commas

Starting in es5 we are allowed to write trailing commas in JavaScript (note they are not allowed in JSON). I love this feature as it allows you do add properties right away to an object without having to look at the line above to see if you remembered to type a comma there. One character might not seems like it would make a difference, but trust me it does.

Let's take a look at this option in action.

{ "trailingComma": 2 }

// turns this
let obj = {
  foo: "foo",
  bar: "bar"
}

// into this
let obj = {
  foo: "foo",
  bar: "bar",
}

Tab Width

One of the simplest options to explain. Changed the width of the tab key from 4 (default) to 2 spaces. Code will look more compact and I think it's easier to read.

Option in action.

{ "tabWidth": 2 }

// turns this
let obj = {
    foo: "foo",
    bar: {
        bar: "bar"
    },
}

// into this
let obj = {
  foo: "foo",
  bar: {
    bar: "bar"
  },
}

Semicolons

One of the great things about JavaScript is Automatic Semicolon Insertion. It can also be a pain when you are working with a team where some people use semicolons and others don't. The semi option adds semis in when you format. Allowing everyone on the team to see where those implied semicolons actually are.

Option in action.

{ "semi": true }

// turns this
let foo = 0
let bar = 10

// into this
let foo = 0;
let bar = 10;

Standardize Quotes

The last two options accomplish the same thing. The last one is just needed if you are writing jsx. These options will convert all double quotes to single quotes. If you need to use an apostrophe, just use the escape key and Prettier will format just that particular string to use double quotes.

Option in action.

{ "singleQuote": true }

// turns this
let foo = "Hello World"
let bar = 'Don\'t try this at home.'

// into this
let foo = 'Hello World'
let bar = "Don't try this at home."

Final Thoughts

Now that I'm actually starting to understand Prettier and how to use it for my specific workflow, it's becoming an invaluable tool, that has made me a more productive developer that writes cleaner code.

Are there options I left out that you think are a must in any .prettierrc file?
Would you like to see more posts like this about Prettier or other coding tools? Let me know!

Thanks so much for reading!

DEV Community: Austin Hill

Start Using Prettier The Right Way

Background

Setting up Prettier

Explanations

Trailing Commas

Tab Width

Semicolons

Standardize Quotes

Final Thoughts