Understanding the Modern Web Stack: Prettier

You can find the official repository for the Understanding the Modern Web Stack tutorial series here.

This includes the final versions of the code examples from each tutorial to help make sure you haven't missed anything. You can also submit pull requests for any errors or corrections you may find (and I will update the blog posts accordingly).

Table of Contents

1. What is Prettier?
2. Prerequisites
3. Initializing the Project
4. Installing Prettier
5. Running Prettier
6. Integration with ESLint
7. Editor Integration (VS Code)
8. Automation and Hooks
9. Wrapping Up

What is Prettier?

Prettier in their own words is an opinionated code formatter for Javascript. What this means is that although it is configurable to some degree, the majority of the decisions it makes about how your code should be formatted are automatic and built into the tool itself.

Though this may sound like a downside, we should consider the benefits of this.

Being consistent with coding style is significantly more important than the style you actually adopt. Leveraging the existing work done by professional developers of the past allows you to focus your attention on the code itself, which is where your attention really belongs.

Code formatters differ from linters in that they are exclusively concerned with the syntax and appearance of the code on your screen, rather than the quality of the code itself.

Another key difference is that linters are foremost concerned with identifying errors and communicating them, not fixing them for you (some exceptions for simple issues).

A formatter's primary function is handling those fixes and updating your code automatically so you don't have to.

Of course one of the best ways to learn how a formatter works is to use it!

Prerequisites

You will need to have Node.js installed on your machine and available from your terminal. Installing Node will automatically install npm as well, which is what you will use to install Babel.

Open up your terminal of choice. If you see version numbers when running the two commands below (your numbers will likely be different than this example) then you are ready to go:

node --version
> v15.5.0

npm --version
> 7.16.0

Initializing the Project

Let's start by initializing a new npm project. Run the following command to generate one:

npm init -y

The -y flag will automatically select default values for everything, which is appropriate in our example.

Installing Prettier

Run the following command in your project's root directory:

npm install prettier --save-dev

Next create a file called script.js with the following code (including the obvious formatting issues):

script.js

console.log(
"hello world"
)

if (true) { console.log('this always runs'); }

const exampleArray = [1,2,3,4,
     5,6,7,8
     ,9, 10]

Before we run Prettier, we can configure it by creating a .prettierrc.json file. This is optional, and if you don't create one Prettier will simply use its own opinionated defaults.

For the sake of learning we will create the file in the root of our project with some of the options described here

.prettierrc.json

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

The es5 value of trailingComma ensures that it will be included on code where it was valid as of ES5 (arrays and objects). Modern Javascript supports it in more places (function arguments for example), so if you are targeting modern browsers you can use a value of all. Third option is none.

The latter three config options should be self-explanatory.

Running Prettier

Run the following command:

npx prettier --write script.js

Your script.js file will be updated automatically with Prettier's formatting options applied.

script.js

console.log('hello world');

if (true) {
  console.log('this always runs');
}

const exampleArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

Ignoring Code

You may have some files in your project that you don't want to waste resources on auto-formatting. To handle these simply create a .prettierignore file with the name (or pattern) of files you wish to ignore:

.prettierignore

build
*.css

The above will ignore anything in the build directory and all CSS files in the project.

Also you may have code within files that you intentionally have formatted in a certain way that you don't want Prettier to overwrite. You can use a simple comment to keep Prettier for acting on that code like so:

// prettier-ignore
const exampleArray = [
  1,2,3,4,5
]

This works with any type of file that Prettier acts on, just use the appropriate type of comment. For HTML as example it would be <!-- prettier-ignore -->. Find the full list here.

Integration with ESLint

(If you are unfamiliar with linters and ESLint, check out Understanding the Modern Web Stack: ESLint)

If you are using ESLint you may have set up some linter rules that are based on formatting, or you might be extending existing configurations based on formatting.

For these formatting issues it's better to leave them to Prettier, since it will fix them automatically, you don't have to worry about your linter reporting errors or showing red lines for issues that are going to disappear anyway.

To automatically disable all ESLint rules that conflict with prettier you can use eslint-config-prettier as follows:

.eslintrc.json

{
  "extends": [
    ...
    "prettier"
  ]
}

Where the ... are the other configurations you are extending, and prettier coming last will overwrite.

Editor Integration (VS Code)

Like many modern development tools, you can integrate Prettier into your IDE and have it run automatically in certain conditions. The most popular of which is on save.

Our example will show how to add Prettier to VS Code. Begin by installing the Prettier VS Code extension.

Next we need to open VS Code's settings.json file. You can find it in the File > Preferences > Settings menu (or Code > Preferences > Settings on mac) there is a link within the settings menu to access settings.json directly.

You can also access it through the Command Palette with Ctrl + Shift + P and typing settings.json:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.formatOnSave": true
  }
}

The above config will set Prettier to automatically format all files it knows how to format (Windows Shift + Alt + F, Mac Shift + Option + F, Linux Ctrl + Shift + I). For Javascript files it will format them automatically when you save. For more fine grained customization options check the extension's documentation.

The Prettier extension will automatically use the version of prettier you have installed in your NPM project in your workspace folder. It will also use any .prettierrc.json and .prettierignore files it finds as the default config.

Automation and Hooks

You can implement Prettier into your CI workflow so that each member of your team has Prettier run automatically before code is committed. This is a great way to reduce the number of reporting changes with commands like git diff with merges and pull requests, since all code committed by all team members will match the same pattern.

There are a number fo ways to implement this, and the best option depends on your workflow. The specific details are beyond the scope of this tutorial but you can find all the details here.

Wrapping Up

You should now have a good understanding about what code formatters are, and how Prettier helps to handle code formatting for you so that you can focus on the code itself.

Please check out the other entries in this series! Feel free to leave a comment or question and share with others if you find any of them helpful:

• Running a Local Web Server

• ESLint

• Prettier

• Babel

• React & JSX

• Webpack

  • The Basics
  • Loaders, Optimizations & Bundle Analysis
  • DevServer, React & Typescript

For more tutorials like this, follow me @eagleson_alex on Twitter

Thanks for reading, and stay tuned!