Formatting with Prettier

Formatting is about how your code looks: indentation, line length, quote style, trailing commas, and so on. It has nothing to do with correctness. You could write perfectly valid code that looks like a mess, and a formatter’s job is to fix that. Prettier is the standard formatter in the ecosystem. It is opinionated, meaning it makes most style decisions for you so your team does not have to argue about them.

Linting vs. Formatting

People often confuse linting and formatting. They serve different purposes:

Concern Tool Example
Code quality and bugs ESLint Catching unused variables, enforcing ===
Code style and appearance Prettier Indentation, quote style, line breaks

ESLint checks whether the code is correct. Prettier checks whether the code is formatted consistently. You want both, but they handle different things.

Setting Up Prettier

Install Prettier as a dev dependency:

npm install --save-dev prettier

That is it. Prettier works out of the box with sensible defaults.

Configuring Prettier with .prettierrc

The defaults are good, but you can customize Prettier by creating a .prettierrc file in your project root:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80,
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

Common Prettier Options

Here are the options you will encounter most often:

Option Default Description
semi true Add semicolons at end of statements
singleQuote false Use single quotes instead of double
tabWidth 2 Number of spaces per indentation level
useTabs false Indent with tabs instead of spaces
trailingComma "all" Add trailing commas where valid in ES5+
printWidth 80 Wrap lines that exceed this length
bracketSpacing true Spaces inside object literal braces
arrowParens "always" Parentheses around a single arrow function parameter

Running Prettier

Run Prettier from the command line with npx:

npx prettier --write src/       # format all files in src/
npx prettier --check src/       # check if files are formatted (useful in CI)
npx prettier --write src/app.js # format a specific file

The --write flag rewrites files in place. The --check flag only reports whether files are formatted correctly. It does not change them. This is useful in CI pipelines where you want to fail the build if someone forgot to format their code.

Add these as npm scripts:

{
  "scripts": {
    "format": "prettier --write src/",
    "format:check": "prettier --check src/"
  }
}

Ignoring Files with .prettierignore

Some files should not be formatted. Create a .prettierignore file:

node_modules/
dist/
build/
package-lock.json

Prettier already ignores node_modules by default, but it is good practice to be explicit about what you want excluded.

Prettier is Not a Linter

Prettier does not catch bugs. It will format code that uses == instead of ===, or code with unused variables. You still need ESLint for that. In the next section, we will look at how to make ESLint and Prettier work together without conflicting.