Prettier (Formatter for Javascript and CSS)

Formatting to make developer life easier

When you’re working on a large project with a team of developers, it is a common practice to agree on a formatting style for the code. However, this is easier said than done. We developers have a tendency to be very opinionated. For example, some people like to give two spaces to a tab, while some give four. Some people start their function definitions from a new line, while others on the same. Well, you get the idea.

“Prettier lets you format your code in a consistent and intelligent way.”


It’s built by the facebook team and is very easy to download and Install. e.g you can install through npm like this

npm install [-g] prettier

I love it because It lets you focus on the code and logic, rather than worry about the structure.

My Setup

I love it because It lets you focus on the code and logic, rather than worry about the structure. My current setup is pretty simple, I have integrated prettier with my Visual Studio Code editor. Its available as VS code plugin. I have set the configuration in such a way that whenever I save a document it runs prettier and formats the code.

Setup and Usage Options

In Action

Dive Deeper

If you want to understand the thought process and details of this tool. I suggest you have a look at these two videos.



  1. Umar June 21, 2017 at 1:40 am - Reply

    I like prettier formatter. I already has eslint in my project, is it redundant now since I’m installing prettier?

    • fais3000 June 27, 2017 at 4:02 am - Reply

      Yes Umar, eslint may be redundant for you now. You might think, to configure eslint it doesn’t take much time, or that teams won’t spend much time arguing about syntax. In my experience, that’s not true. Even if you’ve configured eslint extensively, it doesn’t actually catch a whole range of style differences. Teams still struggle to enforce a consistent style and it’s a big distraction. Prettier solves that very well.

Leave A Comment