My take on code formatting as a beginner

There is a hidden burden on every newbie programmer’s mind when they’re writing a reasonably sized code. It surfaces occasionally in the form of questions such a following :

Should I use double quote or single quote ?

Should my objects span over multiple lines ? what about the 6 parameters I’m passing to this function ?

Should I be using semicolons or not ?

Did I forget to insert a necessary space somewhere that’s causing this syntax error ?

None of these issues impact your code’s correctness (unless you’re using a language like python) . But they do consume a lot of your mental energy, energy which may be better spent grasping important rules and paradigms. And while it may not concern you as an individual, these issues will come into play when you start contributing to open source (psst! it should also have been last year) or when you start collaborating in a team.

To get over these doubts you should use a code formatter. And prettier is pretty much taking over the javascript scene in this aspect.

What is prettier ?

Prettier is an opinionated code formatter with support for :

  1. Javascript
  2. JSX
  3. Angular
  4. Vue
  5. FLow
  6. Typescript
  7. Graphql
  8. HTML
  9. CSS
  10. JSON
  11. Markdown

and a few more.

What does prettier do ?

It removes all original styling and ensures that all outputted code conforms to a consistent style.

This means :

  1. Insert semicolons where necessary
  2. Uniform usage of quotes
  3. Decides whether to span a function over multiple lines or wrap it in a single line
  4. Same as 3 for objects

and much more.

When I got started with javascript I installed eslint to help me write valid js code. Is prettier the same ?

Yes and no. Linters aim to help you with two sets of issues :

  1. Formatting rules (spacing , tabs, semicolon and the like)
  2. Syntax quality control (unused variables, unnecessary usage of gloabals etc)

Prettier helps you deal with the first set and does nothing about the second set.

I am doing fine with my own style of coding. Why should I go through the hassle of setting up yet another tool ?

First of all, it is barely any hassle to get prettier up and running as we shall see shortly. Secondly , having a common style guide is valuable for any project or a team. You will realise this fact as soon as you start reading someone else’s code, which you should be doing right away anyway. When you collaborate with other programmers you will spend your time writing code, not fighting over whose coding style is superior.

You will (hopefully) have to use Continuous integration / Continuous Delivery tools in your workflow. Having a uniformly styled code is one of the tests that your code has to pass under CI/CD.

Reiterating again on the advantages for beginners, prettier gives you a confidence that your code will be styled properly. You can hence spend your limited willpower on grasping new concepts. And trust me, if you think your willpower is infinite, javascript will blow your mind, with or without prettier enabled. When something goes wrong, you will be able to jump on to the bug quicker, instead of searching for an improper spacing somewhere.

Did I mention that it was developed by the same people that created react and react native ?

Late edit (18–06–19) : I’ve discovered another hidden perk of prettier : auto-removal of comma after the last property of a javascript object. (according to a recent survey 100/100 javascript developers commit this error)

I’m sold! how do I start using this magic wand ?

There are two approaches to using prettier :

  1. Through the CLI
  2. As an editor plugin.

As Editor Plugin :

We shall use VSCode as the example code editor. If you happen to use atom/vim/emacs/sublime/any jetbrains editor then this page has you covered.

  1. Search for Prettier -Code Formatter in VSCode extensions and install it.(if you can’t find it within vscode visit this page .
  2. Enable format on save :search for the setting : editor.formatOnSave and enable it. Or to modify specifically for javascript edit the file as below:
// Set the default
"editor.formatOnSave": false,
// Enable per-language
"[javascript]": {
"editor.formatOnSave": true
}

CLI approach :

Then run prettier in your project directory using the commands listed on https://prettier.io/docs/en/cli.html

Toggling styling on and off:

I have never faced any issue with prettier. But early on while learning React my JSX tags started mysteriously getting broken up over multiple lines. This made it syntactically incorrect and I had to resort to using Atom for jsx. Uninstalling prettier didn’t help (and made my other javascript code messy as before). Only later did I realise that the cuplrit was another formatter called beautify.

Lesson learnt : Know the tools that you use inside out. Do not blindly use every shiny new tool. To avoid such issues or if you want to disable formatting for some other reason : use this helpful extension . It lets you toggle formatting on and off from the status bar.

Hope this article helped you understand the why of prettier. You will only understand the what after you start using it on daily basis.

I will be regularly posting about more such tools and apps (Have you heard of wakatime ?) Drop in a comment if you know of any such software you would like to share.