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

Scott Sauber10 Comments

Last updated: 2019-5-13

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 experience.

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 out that JavaScript code with its formatting rules applied.

One of the things I love about it is it’s not completely 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, JSX, Markdown, and more as well.

VS Code Integration

The Prettier -JavaScript Formatter plugin for VS Code simply shells out to Prettier.  It also respects the Format on Save option I mentioned in my last blog post.

Note: Make sure you have prettier installed in the project you’re working in or globally via npm install prettier -g

Format on Save in VS Code

To enable Format on Save in VS Code:

  1. File
  2. Preferences
  3. Settings
  4. Search for Format On Save and check the box

formatOnSave

Overriding Prettier settings

By default Prettier uses 2 spaces for your tab width for indenting your code.  You can increase that to the VS Code default of 4 if you want extremely easily.

  1. Add a .prettierrc file in the root of your project next to your package.json
  2. Add a new object with a tabWidth property and a value of 4
    1. prettierrc
  3. Note how VS Code gives autocompletion for the different settings within Prettier.  How awesome is that!?!
  4. Now start saving your files and watch Prettier in action.

Note: you can configure these settings directly in VS Code as well without a config file, but I think it’s better to use a .prettierrc file, especially when you’re on a team.  That way anytime you or someone else works on that codebase, everyone is using the same settings.

The rest of the Prettier configuration options can be found here.

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

Enforcing Prettier

If you’d like to learn more about how to enforce Prettier via git commit hooks, checkout my blog post on Husky and Lint Staged with Prettier that even works with nested folders.

10 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 !

    Reply

  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!

    Reply

  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

    Reply

  5. Thank you. I was using Nuxt with Prettier Eslint for my first project and I actually had to uncheck the “formatOnSave” option to make it work – if it helps someone.

    Reply