Getting started with Prettier: Writing clean concise code
“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:
- 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).
- 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. 🏎
- 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.
- 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
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
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.
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 :
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:
- On your code editor (Sublime Text), open Command Prompt (
ctrl+shift+p). Navigate to Package Control: Install Package and then search for “JsPrettier”.
- 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:
..we’ll then copy the resulting path and attribute it to our value.
node_path , we’ll do the same as in the previous step, only this time we’ll input:
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.
If you have any opinions on it as well, I’d be delighted to hear them. Cheers!