Prettier Config Generator

Your team just adopted Prettier but can’t agree on tabs vs spaces, single vs double quotes, trailing commas, and print width. You need to generate a .prettierrc file with the team’s agreed settings — without reading through 30 config options in the Prettier docs to figure out the exact key names and valid values.

Why This Generator (Not the ESLint Config Generator)

PureDevTools has an ESLint Config Generator for linting rules. This tool generates Prettier formatting configuration — printWidth, tabWidth, useTabs, semi, singleQuote, trailingComma, bracketSpacing, arrowParens, and more — with visual toggles and output as JSON, YAML, or JavaScript. Prettier handles formatting; ESLint handles code quality.

What Is Prettier?

Prettier is an opinionated code formatter for JavaScript, TypeScript, CSS, HTML, Markdown, JSON, YAML, and more. Instead of debating spacing, quote style, or trailing commas in code reviews, you let Prettier enforce a consistent style automatically on every save.

A .prettierrc config file (or prettier.config.js) tells Prettier which options to apply across your whole project. Committing this file ensures every team member and every CI run formats code the same way.

How to Use This Tool

1. Adjust settings — Tweak each option in the controls panel. All options update the preview in real time.
2. Choose output format — Select JSON (.prettierrc), YAML (.prettierrc.yml), or JavaScript (prettier.config.js).
3. Copy the config — Click the Copy button to copy the generated file contents to your clipboard.
4. Add to your project — Place the file in your project root alongside package.json.
5. Install Prettier — Run npm install --save-dev prettier (or pnpm add -D prettier).

No data is sent to any server. All generation happens entirely in your browser.

Configuration Options Explained

Print Width

The printWidth option tells Prettier to try to wrap lines that exceed this character count. It is a soft limit — Prettier will not break things like string literals or template expressions that would make the code incorrect.

Tab Width & Use Tabs

tabWidth controls how many spaces to use per indentation level when useTabs is false. When useTabs is true, the tabWidth value is still used to compute the visual width of a tab character.

Semicolons

When semi is true (default), Prettier adds a semicolon at the end of every statement. When false, Prettier removes semicolons except when they are necessary to avoid ASI (Automatic Semicolon Insertion) issues.

Quotes

// singleQuote: false (default)
const msg = "hello";

// singleQuote: true
const msg = 'hello';

Trailing Commas

Trailing commas produce cleaner git diff output because adding a new item to a list only touches one line.

Bracket Spacing

When bracketSpacing is true (default), Prettier prints spaces inside object literal curly braces:

// bracketSpacing: true
{ foo: bar }

// bracketSpacing: false
{foo: bar}

Bracket Same Line

Controls whether the closing > of a multi-line JSX element is placed on the last line or on its own line.

// bracketSameLine: false (default)
<Button
  long="prop"
  another="prop"
>

// bracketSameLine: true
<Button
  long="prop"
  another="prop">

Arrow Function Parentheses

End of Line

Use lf for most projects. If your team works on Windows, you can set endOfLine: "auto" and let Git’s core.autocrlf handle the conversion.

Prose Wrap

Controls line wrapping in Markdown files.

HTML Whitespace Sensitivity

Single Attribute Per Line

When enabled, Prettier puts every JSX/HTML attribute on its own line when a tag is broken across multiple lines. This improves readability of components with many props.

Output Formats

JSON (.prettierrc)

The simplest format, supported by all Prettier versions:

{
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "all"
}

YAML (.prettierrc.yml)

More readable for large configs, also widely supported:

printWidth: 100
singleQuote: true
trailingComma: "all"

JavaScript (prettier.config.js)

Offers the most flexibility, including comments and conditional logic:

/** @type {import("prettier").Config} */
export default {
  printWidth: 100,
  singleQuote: true,
  trailingComma: "all",
};

Integrating Prettier

With npm scripts

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

With VS Code

Install the Prettier - Code formatter extension, then add to .vscode/settings.json:

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

Ignore files

Create a .prettierignore file (same syntax as .gitignore) to exclude files from formatting:

node_modules
dist
build
*.min.js

With ESLint

Use eslint-config-prettier to disable ESLint rules that conflict with Prettier:

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

Then extend it in your ESLint config:

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

Frequently Asked Questions

What is the difference between .prettierrc, .prettierrc.json, and prettier.config.js? They all configure Prettier. .prettierrc is auto-detected as JSON or YAML. .prettierrc.json explicitly marks it as JSON. prettier.config.js uses an ES module export and supports comments and dynamic logic.

Does Prettier override my .editorconfig? Prettier respects .editorconfig for some options (indent style, indent size, line endings) unless you explicitly override them in .prettierrc. If both exist, the Prettier config takes precedence for the options it specifies.

How do I run Prettier only on staged files? Use lint-staged with husky to run Prettier as a pre-commit hook only on files you are committing.

Should I commit .prettierrc to version control? Yes. Committing the config file ensures everyone on the team and all CI systems use the same formatting rules. This prevents style-only diffs from polluting your git history.

What is the difference between trailingComma: "all" and "es5"? "all" adds trailing commas to function parameters in addition to objects and arrays. "es5" only adds them where ES5 is valid (no function params). Since Prettier v3, "all" is the new default.

Is my configuration data sent to a server? No. All config generation happens entirely in your browser. Nothing is transmitted to any server and nothing is tracked.