How to use prettier to customize your code formatting

Learn to configure and use this code formatter to make your life easier

sam andreatta
Oct 12 · 3 min read
Image for post
Image for post
Photo by Sidney M. on Unsplash

Tabs or spaces? Double or single quotes? Trailing commas and whitespace? It doesn’t matter, while you’re being consistent and using the same pattern throughout your code. However, getting warnings and errors about these small things can get pretty annoying pretty fast. That’s why you should use a code formatter and configure it to format a file as soon as you save it, and then you can take care of the important stuff. There are a lot of options out there but this week I want to talk about prettier, a light and simple tool that offers support to a lot of languages and most editors.

1. Install prettier in your project

yarn:yarn add --dev --exact prettier

After installing, create a json file to store your custom configurations:

echo {}> .prettierrc.json

You should also create a .prettierignore file for everything that you don’t want to format. You can use your .gitignorefile as a reference for this step.

2. Install the prettier extension in your editor

Image for post
Image for post

You can configure it to format on save, which is really useful. For this, open the palette with ctrl shift P and go to user settings. Go to formatting and select option format on save.

3. Set up your format options

Image for post
Image for post

Use tabSize to define how many spaces should occupy a tab, and if you want you can use the option “parser” — but prettier automatically infers it from the input file path, so this isn’t super important. Check the documentation for the full list of options.

4. Format your files

Image for post
Image for post
Before saving
Image for post
Image for post
After saving

It works! If it doesn’t, and you’re getting conflicts with your linter, you’ll have one extra step here. In my case, I had a couple of conflicts with tslinter, so I went to my tslint.json and deleted the option that was clashing with prettier:

"indent": [true, spaces]

And that’s it, now prettier alone will take care of the indentation. Hopefully this was a helpful tutorial and now you can focus on creating beautiful apps without a linter barking at you all the time. Happy coding!

Thank you for reading!

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store