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!
Top comments (11)
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.
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...
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.
Really cool. I didn't know about either of those tools. Thanks for sharing!
Sure thing! This is my preferred way to use prettier.
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.
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
Thanks for linking this :)
Clever! I'm definitely going to give this a try. Thanks for sharing!
I use Standard JS.
Really cool. Thanks for sharing!
Good post!