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

Prettier

6 thoughts on “Prettier + Format On Save = Never worry about formatting JavaScript again

  1. Hey Scott, thank you for your interesting article ! Everything works fine but I am currently facing issues regarding the array multi-line formatting like in your gif example… Actually, when I format with Prettier, it does format json object like in your gif (multi-lines) so that is OK ! But it is different with an array because when I format, it shortens my array into a single line… whereas I really would like to format my array multi-lines (just like in your gif !) ==> Do you know which option it is ? or can you send me the configuration of your prettier configuration file please ? then I can check it ! Thank you very much !

    Liked by 1 person

  2. Thanks for the comment!

    I believe Prettier has a default rule where it will keep arrays that have 3 or less values on the same line, and anything more it will move to multiple lines. I don’t think there’s an option to configure this. I also think the printWidth affects this as well, depending on how verbose your array and its values are.

    If you’d like to opt-out of Prettier, you can use // prettier-ignore comment right above the code block you want to ignore and format it however you’d like.

    Example: https://gist.github.com/scottsauber/54a5676dae8775768553dec36049ab4c

    Hope that helps!

    Like

  3. Hey, Scott,
    I have added the prettier-eslint in package.json. I have checked the “Use prettier-eslint” in settings but I am still not getting the formatting. Any suggestions?
    Dana

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s