Format your code with Prettier

Prettier is an opinionated code formatter. It reads your code and prints it again using one consistent style.

This removes formatting debates from a project. You can focus on what the code does.

Prettier supports JavaScript, TypeScript, JSX, JSON, CSS, GraphQL, Markdown, YAML, and many other formats. Plugins add support for more languages.

The official Prettier documentation lists the supported languages and plugins.

Install Prettier

Install Prettier locally and save an exact version:

npm install --save-dev --save-exact prettier

Using a local exact version keeps editors, local commands, and CI on the same formatter release. This matters because a Prettier update can change the generated formatting.

Create a .prettierrc file to mark the project as using Prettier:

{}

You can add a .prettierignore file for generated files and folders that should not be formatted:

dist
coverage

Prettier also follows a .gitignore file in the directory where you run it.

The official installation guide recommends this local setup.

Format code

Format the whole project with:

npx prettier . --write

Format one file with:

npx prettier src/app.js --write

Use --check in CI to report unformatted files without changing them:

npx prettier . --check

I also recommend enabling the official Prettier extension in your editor and formatting on save. The editor should use the project’s local Prettier version.

Configure Prettier

Prettier deliberately has few options. Common choices include:

• tab width
• single or double quotes
• print width
• trailing commas

For example:

{
  "singleQuote": true,
  "semi": false
}

Most formatting decisions still belong to Prettier. That is the point.

For a quick one-off format without installing anything, I built a free code beautifier that prettifies or minifies HTML, CSS, and JavaScript in the browser.

Prettier and ESLint

ESLint finds suspicious code and enforces code-quality rules. Prettier formats code.

Use each tool for its own job. If ESLint has stylistic rules that conflict with Prettier, eslint-config-prettier turns those rules off:

npm install --save-dev eslint-config-prettier

Prettier’s linter integration guide recommends running Prettier directly instead of running it as an ESLint rule.

Related posts about devtool: