.prettierrc

What is a .prettierrc file?

Prettier's config — opinionated code formatting rules. Tells Prettier how to format JavaScript, TypeScript, CSS, JSON, and Markdown.

Safe format
Type Code
By James Long (Prettier)
MIME application/json

Drop any file to identify it

No upload. No signup. No sending your file halfway across the internet.
We tell you what it is, right here in your browser.

What is it

Prettier is an opinionated code formatter — feed it source code, it gives you formatted source code with no debate about style. The .prettierrc file is its config: a small JSON or YAML object setting maybe a dozen knobs (`tabWidth`, `singleQuote`, `printWidth`, `trailingComma`, `semi`). Prettier deliberately resists adding more — the appeal is exactly that there's nothing to argue about beyond the few essentials.

Format variants — .prettierrc, .prettierrc.json, .prettierrc.js, .prettierrc.yaml, .prettierrc.toml. Prettier auto-detects which based on the contents. The bare .prettierrc holds JSON or YAML; the auto-detection occasionally surprises people, so most teams pick an explicit extension for clarity. A typical .prettierrc.json is five lines: tab width, semicolons, single quotes, trailing comma, print width.

Prettier pairs with ESLint via `eslint-config-prettier` — a config that disables every ESLint rule that conflicts with Prettier's formatting. The division of labour is clean: Prettier handles formatting (whitespace, line breaks, quote style), ESLint handles code quality (unused variables, undefined references, accessibility issues). CI integration is `prettier --check .`, and editor integrations format on save in VS Code, IntelliJ, Vim, Emacs, and pretty much everything else.

Technical details
Full Name
.prettierrc
MIME Type
application/json
Developer
James Long (Prettier)
Magic Bytes
N/A
Safety
.prettierrc is a known, safe format.
What opens it
Any text editor
FREE All
VS Code
FREE All

* Prettier extension provides format-on-save

FAQ
Do I need both Prettier and ESLint?
Yes, in most cases. They solve different problems — Prettier formats code (whitespace, line breaks, quote style), ESLint catches code quality issues (unused variables, undefined references, accessibility violations). Use `eslint-config-prettier` to disable ESLint's formatting rules so the two don't fight each other.
What's the difference between .prettierrc and .editorconfig?
.editorconfig is a cross-tool, cross-language convention for basic editor settings (indent, charset, line endings). Prettier reads .editorconfig as a fallback, so you don't have to duplicate basic settings in .prettierrc. Use both: .editorconfig for basics, .prettierrc for Prettier-specific rules like quote style and trailing commas.
Related formats