What is Prettier and why do I need a config file?

Prettier is an opinionated code formatter that enforces consistent style across your codebase. A .prettierrc config file lets you override Prettier's defaults to match your team's style preferences — things like single vs double quotes, semicolons, print width, and more.

Which Prettier config format should I use?

All formats are equivalent and Prettier reads them all. JSON (.prettierrc) is the most common and easiest to read. YAML (.prettierrc.yml) is more concise. JavaScript module (prettier.config.js) is best when you need dynamic config, comments, or want to extend another config.

What is the difference between trailingComma 'all', 'es5', and 'none'?

'all' adds trailing commas everywhere valid in ES5+ including function parameters (requires Node 8+). 'es5' adds trailing commas only where valid in ES5 (objects, arrays). 'none' removes all trailing commas. The default is 'all' in Prettier v3+.

What does 'printWidth' do in Prettier?

printWidth tells Prettier the line length where it will try to wrap code. It's not a hard limit — Prettier may exceed it for things like long strings that can't be broken. The default is 80 characters, which works well for most projects.

How do I add this config to my project?

Download the generated file and place it at the root of your project (same level as package.json). If you chose JSON format, name it .prettierrc or .prettierrc.json. For YAML, use .prettierrc.yml. For JavaScript, use prettier.config.js. Prettier will automatically pick it up.

Is this tool free to use?

Yes, this tool is completely free and open source. Everything runs in your browser — no account needed, no data is sent to any server.

Free Prettier Configuration Tool

Generate Your Perfect
Prettier Config

Stop hand-editing .prettierrc files. Configure all Prettier formatting options visually and get a production-ready config file in seconds.

⚙️

All Options Covered

Configure print width, tabs, quotes, semicolons, trailing commas, JSX, arrow functions, and more.

📄

Multiple Output Formats

Export as JSON (.prettierrc), YAML (.prettierrc.yml), or JavaScript module (prettier.config.js).

🔒

100% Client-Side

Everything runs in your browser. No data is ever sent to a server. Instant, private, and secure.

Configuration

Indentation

Print Width

Wrap lines longer than this many characters

Use Tabs

Indent with tabs instead of spaces

Tab Width

Number of spaces per indentation level

Quotes & Semicolons

Semicolons

Add a semicolon at the end of every statement

Single Quotes

Use single quotes instead of double quotes

JSX Single Quotes

Use single quotes in JSX attributes

Trailing Commas & Brackets

Trailing Commas

Where to add trailing commas in multi-line code

Bracket Spacing

Print spaces between brackets in object literals: { foo: bar }

Bracket Same Line

Put the > of a JSX element on the last line instead of a new line

Functions & Formatting

Arrow Function Parens

Include parentheses around sole arrow function parameters

End of Line

Line ending characters to use

Prose Wrap

Wrap markdown prose at the print width

Output

.prettierrc

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "jsxSingleQuote": false,
  "trailingComma": "all",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "endOfLine": "lf",
  "proseWrap": "preserve"
}

Place the downloaded file at the root of your project alongside package.json

Frequently Asked Questions

Everything you need to know about Prettier Config Generator.

Generate Your PerfectPrettier Config