How to Use 'Prettier' to Auto-Format Messy Code

What Prettier Actually Does

Prettier is an opinionated code formatter — it doesn't just fix indentation, it re-parses your code into an abstract syntax tree and reprints it according to a fixed, consistent set of rules, regardless of how it was originally written. That "opinionated" part matters: unlike a linter, there are almost no configuration knobs for style preferences, which is intentional. The whole point is to end debates over tabs vs. spaces, single vs. double quotes, and line-wrapping in code review, because there's nothing left to debate — the formatter decides, consistently, every time. It supports JavaScript, TypeScript, JSX, HTML, CSS, SCSS, LESS, JSON, Markdown, YAML, GraphQL, and more.

Installing Prettier

Install it as a dev dependency in your project rather than relying only on the editor extension — this ensures everyone on the team, and your CI pipeline, uses the exact same version and config:

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

Create an empty config file so tools (and the VS Code extension) recognize the project uses Prettier:

echo {}> .prettierrc.json

Configuring Formatting Rules

Prettier's defaults are sensible and most teams barely touch them, but you can override a handful of settings in .prettierrc.json:

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "printWidth": 100,
  "arrowParens": "always"
}

• semi — whether to add trailing semicolons.
• singleQuote — use single quotes instead of the default double quotes for strings.
• trailingComma — controls trailing commas in multi-line arrays/objects/function calls ("es5", "none", or "all").
• tabWidth — number of spaces per indentation level.
• printWidth — the line length Prettier tries to wrap at (default 80).
• arrowParens — whether single arrow-function arguments get wrapped in parentheses.

Excluding Files

Create a .prettierignore file (same syntax as .gitignore) so Prettier skips build output, dependencies, and generated files:

node_modules
dist
build
coverage
*.min.js
package-lock.json

Formatting on Save in VS Code

1. Install the official Prettier - Code formatter extension from the VS Code Marketplace (extension ID: esbenp.prettier-vscode).
2. Open (or create) .vscode/settings.json in your project root and add:

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

Now every time you save a supported file, VS Code runs it through Prettier automatically before writing to disk. Because this config lives in .vscode/settings.json and gets committed to the repo, every team member gets the same behavior the moment they open the project — no per-person setup required beyond installing the extension.

Running Prettier From the Command Line

Useful for formatting an entire codebase in one pass, or for CI checks:

npx prettier --write .

--write reformats files in place. To check formatting without modifying anything — the mode you want in a CI pipeline, failing the build if anything isn't formatted — use --check instead:

npx prettier --check .

Adding Format Scripts to package.json

{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

Now npm run format formats the whole project, and npm run format:check can be wired into a pre-commit hook or CI step.

Combining Prettier With ESLint

ESLint and Prettier solve different problems — ESLint catches bugs and enforces code-quality rules (unused variables, unreachable code, hook dependency arrays), while Prettier only handles formatting. Running both without coordination can cause them to fight over formatting-related rules ESLint also happens to check. Install eslint-config-prettier to turn off exactly those conflicting ESLint formatting rules and let Prettier own formatting entirely:

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

Then add "prettier" as the last entry in your ESLint config's extends array so it overrides earlier rules:

{
  "extends": ["eslint:recommended", "prettier"]
}

Enforcing It With a Pre-Commit Hook

To stop unformatted code from ever reaching a commit, pair Prettier with husky and lint-staged so it only reformats the files you actually changed, not the whole repo, on every commit:

npm install --save-dev husky lint-staged
npx husky init

Add to package.json:

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx,json,css,md}": "prettier --write"
  }
}

And put this line in the generated .husky/pre-commit file:

npx lint-staged

Wrap-Up

The setup above — a committed .prettierrc.json, format-on-save in VS Code, and a pre-commit hook — means formatting stops being something anyone has to think about or argue over in code review. Code goes in messy, comes out consistent, automatically, at every save and every commit.