Prettier + Format On Save = Never worry about formatting JavaScript again

In my last post, I mentioned a tip to using the Format on Save option in VS Code.  I’d like to take that one step further and mention how you can combine that with the Prettier – Javascript Formatter plugin for VS Code to make a really nice editing experiencee.


What is Prettier?

Prettier is an open source project (originally started by James Long) that is an opinionated JavaScript formatter.  Prettier takes JavaScript code in, runs some of its formatting rules against it, and then spits that JavaScript code with its formatting rules applied.

One of the things I love about it is it’s not rigid with its rules.  It makes some “logical” choices that I would make myself.  For instance, Prettier will make a short const array declaration a one liner, but a declaration with a bunch of items in the array, it will split out into multiple lines to avoid horizontal scrolling (see demo GIF at the end).  I love that.

While I only mentioned JavaScript so far, technically Prettier can do more than just JavaScript.  It can do CSS, LESS, SASS, TypeScript, and JSX as well.


VS Code Integration

The Prettier -JavaScript Formatter plugin for VS Code simply shells out to Prettier, as well as it exposes some settings that you can override in your settings.json.  It also respects the Format on Save option I mentioned in my last blog post.


Overriding Prettier settings in VS Code

By default Prettier uses 2 spaces for tabs.  You can increase that to the VS Code default of 4 if you want extremely easily:

  1. Hit CTRL + , or Command + , on Mac to bring up the Settings.json
  2. Search for Prettier
  3. Click to the left of prettier.tabWidth on the left hand side and click Copy To Settings
    1. 2017-06-09_22-15-33
  4. On the right side so you can change it to 4 and then hit Save to save your settings.json file.


You can scan the rest of the prettier options that show up in the search to see if there’s ones you want to override.


Formatting is something I never worry about anymore

I find when using Prettier, along with the Format On Save option in VS Code, I don’t think about how to format my code anymore.  I don’t ever wonder “oh should I put this on multiple lines or keep it all in one line?”  Instead, I focus on solving my problem, hit Save and let Prettier do the rest.  It’s shocking how liberating this is.  I end up with consistent formatting across my entire project instead of just doing whatever I felt was best at the time.


Prettier in Action


Quick VS Code Tip – Format on Save

Rather than Formatting your code using Shift + Alt + on Windows or on Shift + Option + on Mac, consider just formatting on save instead.

To turn this on go to:

  1. File
  2. Preferences
  3. Settings
    • Or just hit CTRL + Comma on Windows to bypass steps 1-3
  4. search for editor.formatOnSave and change that to true
    • Note: this UI is a little confusing. The left side is the default settings and the right side is your custom settings you’ve overriden.  You can either copy the setting over to the right or hover over the setting on the left and click the pencil and select true.
    • 2017-06-05_9-35-18