# Format your code with Prettier

> Learn how Prettier keeps code formatting consistent, how to install and run it, configure projects, check files in CI, and use it alongside ESLint.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2018-03-08 | Updated: 2026-07-18 | Topics: [DevTools](https://flaviocopes.com/tags/devtool/) | Canonical: https://flaviocopes.com/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 logo](https://flaviocopes.com/images/prettier/logo.png)

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

The [official Prettier documentation](https://prettier.io/docs/) lists the supported languages and plugins.

## Install Prettier

Install Prettier locally and save an exact version:

```bash
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:

```json
{}
```

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

```text
dist
coverage
```

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

The [official installation guide](https://prettier.io/docs/install.html) recommends this local setup.

## Format code

Format the whole project with:

```bash
npx prettier . --write
```

Format one file with:

```bash
npx prettier src/app.js --write
```

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

```bash
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:

```json
{
  "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](https://flaviocopes.com/tools/code-beautifier/) that prettifies or minifies HTML, CSS, and JavaScript in the browser.

## Prettier and ESLint

[ESLint](https://flaviocopes.com/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:

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

Prettier's [linter integration guide](https://prettier.io/docs/integrating-with-linters/) recommends running Prettier directly instead of running it as an ESLint rule.