Automated code formatting with Prettier

Prettier is a tool that automatically makes your code more readable and consistent with your project's style guide.

Prettier integrates with your editor, so your code is tidied up every time you save your changes:

title

Let's look at two examples:

function sayHi(name){  
    return 'Result: ' + name
}

Prettier will rewrite this as follows.

function sayHi(name) {  
  return "Result: " + name;
}

Here are the changes Prettier made:

  • Use " instead of '
  • Add an extra space before the function body (after the parameter list)
  • Add a semicolon at the end of the return statement

I'm using the default configuration here, but you can configure Prettier to prefer single quotes and no semicolons instead.

Another example. We've got a function with a lot of options. (If you've not seen it before, this code uses the ES6 object destructuring syntax).

function init({ option1, option2, option3, option4, option5, option6, option7 }) {  
  //...
}

But this is slowly becoming difficult to read. Prettier can fix the problem:

function init({  
  option1,
  option2,
  option3,
  option4,
  option5,
  option6,
  option7
}) {
  //...
}

No need to move the cursor and press enter 8 times! And if you realize you don't need option7 after all Prettier will instantly revert to the single line format.

Benefits

Prettier has had a surprisingly big impact on my productivity and happiness! I miss it every time I work on a project that's not set up with it.

Here's why Prettier is awesome:

  • No effort spent fixing formatting
  • No need to look up rules in a style guide
  • No time wasted discussing style in pull requests
  • When the style guide changes (or when it is first introduced) Prettier can automatically apply it across the whole code base.
  • Code copied from another project or from StackOverflow automatically adjusts

Setup with Visual Studio Code

There are Prettier plugins for many different editors available. Here I'll show the setup in Visual Studio Code.

1. Install the Prettier VS Code plugin

Open the Command Palette (under the View submenu, or using Cmd+Shift+P on Mac and Ctrl+Shift+P on Windows). Then select "Extensions: Install Extensions".

Search for "Prettier", click "Install", and then "Reload" once the installation is complete.

title

2. Run Prettier on a file

Now, if you open a JavaScript file and select "Format Document" in the Command Palette Prettier will tidy up your code!

title

3. Automatically run Prettier when saving a file

Open your workspace settings through the Command Palette. Then enable formatOnSave:

{
  "folders": [],
  "settings": {},
  "editor.formatOnSave": true,
}

Save your settings and now your code should be formatted every time a file is updated!

Prettier also supports languages other than JavaScript, e.g. TypeScript, HTML, CSS, or JSON. However, if you don't want those to be formatted you can control the formatOnSave setting by file type:

{
  "folders": [],
  "settings": {},
  "[javascript]": {
    "editor.formatOnSave": true
  }
}

Formatting existing code with command line

You can format the code for your entire project using the Prettier command line interface (CLI). First install the CLI tool:

npm install prettier --global  

Then update your current code:

prettier "*/.ts" --write  

Done! One quick warning though: automatically updating your code formatting means you'll make a big commit in source control where a large number of files are updated. That can make it harder to use e.g. git blame, since half the lines in a file may have last been modified in the Prettier commit.