DEV Community

loading...
Cover image for Start Using Prettier The Right Way

Start Using Prettier The Right Way

akinghill profile image Austin Hill Updated on ・3 min read

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
}
Enter fullscreen mode Exit fullscreen mode

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",
}
Enter fullscreen mode Exit fullscreen mode

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"
  },
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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."
Enter fullscreen mode Exit fullscreen mode

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!

Discussion (12)

pic
Editor guide
Collapse
nikolahristov profile image
Niki Hristov • Edited

I've hosted my full Prettier config at gist.github.com/nhristov/6867c78ff...

It sits in my main Developer folder and everything underneath obeys it along with my .editorconfig file

Dev

That way I don't have to install prettier in every JavaScript project I'm working on and VSCode takes care of the formatting automatically for projects that reside there.

Collapse
michaelcurrin profile image
Michael

If you want keep it that shorter, you can remove options which are already the same as Prettier defaults. Like semi and quotes.

Also I noticed your style of indent 4 and using tabs is not the prevailing style I've noticed in the JS community. So if anyone contributes to your repo and that don't have your Prettier config, they may conflict with you.

Another approach based on Sharing configuration section of this doc is to publish your config as a NPM package, even if it's only on GitHub. Then you can install your own package in all your own projects. This means that you and anyone else who works on your projects can share the same config file.

Collapse
akinghill profile image
Austin Hill Author

Clever! I'm definitely going to give this a try. Thanks for sharing!

Collapse
michaelcurrin profile image
Michael • Edited

Use without installing

If you don't have Prettier installed globally or in a project, you can still download and run it on a project. This won't install it.

$ npx prettier -w .
Enter fullscreen mode Exit fullscreen mode

That will use the default options plus any overrides you've set in Prettier configs.

More info on how to use Prettier CLI

michaelcurrin.github.io/dev-cheats...

Collapse
matjones profile image
Mat Jones

The prettier extension is editor-specific. For an editor-agnostic solution, you can create a prettier git pre-commit hook pretty easily using pretty-quick and Husky.

Collapse
akinghill profile image
Austin Hill Author

Really cool. I didn't know about either of those tools. Thanks for sharing!

Collapse
matjones profile image
Mat Jones

Sure thing! This is my preferred way to use prettier.

Collapse
michaelcurrin profile image
Michael

I want to add a list of all options that Prettier allows. And if you like the default options, you can keep your config light or non existent by relying on those.

prettier.io/docs/en/options.html

Collapse
akinghill profile image
Austin Hill Author

Thanks for linking this :)

Collapse
aalphaindia profile image
Pawan Pawar

Good post!

Collapse
eljayadobe profile image
Collapse
akinghill profile image
Austin Hill Author

Really cool. Thanks for sharing!