Make your Code look pretty with Prettier

Have you been ever caught in an endless battle with yourself or with your team mates deciding which coding standard or syntax is best for you ? Cycling through endless coding standards and conventions, it is usually hard to decide what will be best for you and usually ends with hours of your precious time getting wasted .

Working on a new project for a Lean startup, I am developing Frontend for a new service using React JS framework , i came across the same problem and after looking around a bit I came across Prettier. As described on it’s Github repo.

Prettier is an opinionated JavaScript formatter inspired by refmt with advanced support for language features from ES2017, JSX, and Flow. It removes all original styling and ensures that all outputted JavaScript conforms to a consistent style.

The way it works is, it reads your whole Javascript code, digging into its AST (Abstract syntax tree) and rewrites the whole code again. No hassle …just pure magic. The above approach has certain benefits :

1. You no more need to think about writing beautiful JS and if it follows certain set of rules and regulations or not ! Consistent formatting all the way.
2. It saves time !
3. Easy to adapt to because you do not need to do anything.

Now, lets talk about How You Can Use it .

Method 1 — Using Atom’s Plugin

I use atom for my development and so I use “Prettier-atom” package for it . You may find it here. Install it and you are good to go. It comes with few configuration options, which you may change or not as per your needs, one thing I am sure , it won’t be difficult deciding what to do with them because they are pretty obvious settings. I am pasting a snapshot of my own for reference.

Method 2 — Using pre-commit hooks

This is a much better method compared to the previous one as it makes sure that every JS file you make changes to, gets checked once. Now lets walk through the setup process. Here is a snapshot for reference.

1. Install required NPM packages npm install --save-dev lint-staged pre-commit prettier Let me explain in short what is happening above.

prettier is the plugin obviously which will prettify the code obviously.

lint-staged is a Node.js script that allows you to run arbitrary scripts against currently staged files. In git, a file is being “staged” after you have “added” it to a commit.

pre-commit lets you run scripts before you commit them to Git. Remember here I am assuming that you are using Git for code versioning.

So, what happens is before you commit, pre-commitstops your commit run the script and then do the commit . Here it is supposed to run lint-staged which will take all the staged files ( which have been git add-ed) and match them using glob filters ( eg *.js here) and run the 2 scripts passed as an array, which is prettier and git add to add them back to git because they were just changed using prettier. And , here it is , you are done.

You may refer to plugin repos for further details.

Method 3 (preferred) Use both the above methods

I personally use both the above methods, I have configured atom to prettify my code on save as well as i use the pre-commit hooks so that nothing slips through un-formatted.

Depending on your preferences you may skip Method-1 , but you should definitely have method-2 configured.

So, that’s it .. enjoy your new found freedom !