Getting started with Prettier: Writing clean concise code

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:

yarn global add prettier

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 prettier -v on our CLI. At this time, the latest release is 1.5.2

Using Prettier on our files

Let’s say we’ve got this really messed up file weather-app.js . 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 weather-app.js:

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

prettier --single-quote --print -width=120 weather-app.js

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 --write command to the parameters we previously gave Prettier.

The syntax will now be:

prettier --single-quote --print -width=120 --write weather-app.js

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 ( ctrl+shift+p ). 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 prettier_cli_path , we’ll specify where Prettier is. All we need to do is go to our CLI and input: which prettier

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

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

5. Change "auto_format_on_save" to true

It’s okay to change any of the values in prettier_options according to your taste with the exception of the parser value. It is recommended that you use flow instead of babylon 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 .js extensions inside the js-files 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!