Getting started with Prettier: Writing clean concise code

Raphael Ugwu
Jul 30, 2017 · 6 min read
https://www.flickr.com/photos/khiavdim/2942890819

Ever stared at your code and thought: “Wow this is really messy”, semicolons here, square and curly brackets there. Sometimes we painstakingly try to clean things up, but who wants to clean 300 lines of JavaScript (more often than not, it probably wasn’t even created by you)?

Enter Prettier: Prettier is simply a JavaScript formatter. Designed by James Long, it supports languages like JavaScript (ES8 included), TypeScript, JSX, Flow, JSON, GraphQL and even CSS.

“Why do I need Prettier?”

It’s only human that most people don’t even know what they need. Asides the occasional debate over lunch about how many spaces you should leave before a semicolon, where and where not to indent, or if functions should follow up on the same line or not.

Some of the reasons you’ll be needing Prettier are:

  1. Cleaning up an existing code base: So you get hired at Startup X, you get to meet the team, it’s all good until you’re given a backlog of work to take care of and you spend the first hour figuring what goes where ( crazy right).
  2. Taking care of newbies: Everyday a lot of people take that decision to learn how to code, they begin their journey on a decent project, write say 50 lines of code (jumbled and all) and then come across this amazing repo on GitHub with 6,789 stars. Curious, they decide to take a look and come across syntax that looks like a Lamborghini parked in the driveway. To many of these newcomers, it’s intimidating… “Will I ever be like this?” they ask. Buddy, Prettier can get you your own Lamborghini. 🏎
  3. Creating a recognized style guide: With all the debates over which style is the best, it’s only suitable we have something that sets a standard right? A standard we can all accept, something we can trust and most importantly, something to stop the debates; because they’re time wasting.
  4. Writing code: We want to stop spending half our time adding semicolons (yeah Prettier does that), figuring out how many lines of space to leave and all that. We want to do what we signed up for in the first place, which is write code!

Getting started with Prettier

To install Prettier, all we need to do is go to our command line interface (CLI) and say:

For those of us who don’t know it yet, Yarn is a package or dependency manager for JavaScript. You can look it up here. After installation, we should see something similar to this on our CLI:

This is from a PC using Linux Mint 18.1. Certain parameters may vary.

After installation, we can simply check for what version of Prettier we got by typing on our CLI. At this time, the latest release is

Using Prettier on our files

Let’s say we’ve got this really messed up file . It’s almost a basket case, no semicolons, poor indentation… you name it. We’re going to fix all of this with Prettier.

The first 30 lines of ‘weather-app.js’ (Its like they put me in a Siberian Prison!)

Let’s navigate to the project folder that contains :

What we’ll do now is to give Prettier some parameters on how we want our code to be formatted, typing into our CLI :

We’ll get the supposed syntax, that’s what our code is meant to look like.

Pretty shiny right? To implement it on our code, we’ll add the command to the parameters we previously gave Prettier.

The syntax will now be:

And voila! 💫 Our messy code is formatted:

But hey, we shouldn’t have to open our terminal and slam down snippets of commands each time we want to format our code, that would make Prettier more of an inconvenience than a tool. For this reason, we’re going to integrate Prettier with our editor; it’s going to run automatically on save, thus making it very seamless.

What you’re about to see is an integration for Sublime Text, for instructions on how to integrate Prettier on other editors, go here.

Integrating Prettier into your code editor

One limitation of Prettier to keep in mind is that it doesn’t have a good way of running project level configurations… yet. With that said, let’s proceed to integrating Prettier into our code editor:

  1. On your code editor (Sublime Text), open Command Prompt ( ). Navigate to Package Control: Install Package and then search for “JsPrettier”.
  2. Once the package is installed, open Command Prompt once more, navigate to “JsPrettier Settings - User”. This opens up your personal settings and you should see something like this:

3. At the first value , we’ll specify where Prettier is. All we need to do is go to our CLI and input:

..we’ll then copy the resulting path and attribute it to our value.

4. At , we’ll do the same as in the previous step, only this time we’ll input:

5. Change to

It’s okay to change any of the values in according to your taste with the exception of the value. It is recommended that you use instead of as you will benefit from type annotations if you use the former whereas the latter has some small inconsistencies.

To learn more about what options to choose, navigate to “JsPrettier Settings - Default” instead of “JsPrettier Settings - User”.

But what if someone wants to work on your already formatted project and the person doesn’t want to install Prettier. This sequence of commands relayed to our CLI will address the issue:

Navigate to the directory where the project folders are and type:

This will format any files with extensions inside the folder. To verify if the files were really formatted, we’ll have to tweak the command a little by removing the opening and closing backslashes.

Notice the grayed out list of files? That’s to indicate that they’ve been formatted. Any files that were not formatted would be white.

This sequence is really useful in the sense that it’s kind of an escape route for users that want to work with Prettier but don’t want to install it on their code editor.

So there you have it, clean code all the way! Like I earlier said, Prettier is a new tool developed by James Long. I came across it on Github and fell in love with it, I just had to share.

If you have any opinions on it as well, I’d be delighted to hear them. Cheers!

DailyJS

JavaScript news and opinion.

Raphael Ugwu

Written by

Writer, Software Engineer and a lifelong student.

DailyJS

DailyJS

JavaScript news and opinion.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade