How often do you argue with your coworkers about code formatting rules? Missing semicolons, blank lines, line breaks and too long function signatures. It all happens to us. Sometimes caused by different environment, IDE setting or BCAK error. Because formatting is a computer’s job.

Earlier this year, James Long created Prettier, an opinionated code formatter which was born to deal with all the issues mentioned above. Prettier has over 30k downloads per day on NPM.

Prettier takes in all your code, clears all the formatting and outputs well formatted code. Sounds easy, right? Under the hood it parses your JavaScript into Abstract Syntax Tree and prints it nicely formatted. Well, you don’t need to even know about this. It all just happens automagically and without any interaction from your side.

Just works

As you can see below, it can deal with all your ugly, long method signatures and format them nicely (Yeah, I know – we’re all working on nice and shiny greenfield projects only):

Input:


function iHaveAVeryLongSignature(hello='hello',world='world', user='joe', age=30){var x;  var y; if (x > y) { console.log(x)}}

Output:


function iHaveAVeryLongSignature(
  hello = "hello",
  world = "world",
  user = "joe",
  age = 30
) {
  var x;
  var y;
  if (x > y) {
    console.log(x);
  }
}

You can play with it on the Prettier Playground and see it in action here in your browser.

And the installation is as simple as:

  1. yarn add prettier –dev –exact or if you prefer using npm: npm install –save-dev –save-exact prettier
  2. Create a configuration file
  3. Run it from the CLI to see if it works: ./node_modules/.bin/prettier
  4. Automate it:

I use ESLint. Isn’t it enough?

Actually not. ESLint is a code quality tool. It checks your code for unused variables, bad naming, preferred ways of doing same job, while Prettier is a code formatter. It does the job that we all hate – formatting too long function signatures – with few arguments, even typed ones (yes, TypeScript is supported too).