Skip to main content
iotools.cloudiotools.cloud

Prettier Config Generator

Generate a Prettier configuration file — JSON (.prettierrc.json), YAML (.prettierrc.yaml), a JS module (prettier.config.mjs/cjs), or a package.json "prettier" key — from core options (printWidth, tabWidth, quotes, semicolons, trailing commas), JSX and Markdown/HTML options, and per-language overrides.

Input

JSON is the most common; pick a JS format if you need dynamic config or per-environment switches.

Core Options

Line length the printer will wrap on. Prettier default: 80.

Number of spaces per indentation level. Prettier default: 2.

Change when object property names are quoted.

Print trailing commas in multi-line constructs.

Parentheses around a sole arrow-function parameter.

Line ending style for written files.

JSX

Markdown & HTML

How Prettier handles markdown text wrapping.

How Prettier treats whitespace in HTML.

Per-Language Overrides

Add an <code>overrides</code> block to tweak settings for specific file types.

Output Options

Output

Generated Config
.prettierignore

Populated when "Also generate a .prettierignore template" is checked.

Was this helpful?

Guides

The Prettier Config Generator builds a ready-to-use Prettier configuration file from a set of toggles and dropdowns — no need to remember option names or the exact shape Prettier expects. Pick your formatting preferences and an output format, then copy the generated file straight into your project.

What it does

Prettier is an opinionated code formatter, but its defaults don't fit every team — line width, quote style, semicolons, and trailing commas are all things projects commonly override. This tool assembles a complete config for you. It supports:

  • Five output formats — JSON (.prettierrc.json), YAML (.prettierrc.yaml), a JS module in ESM (prettier.config.mjs) or CommonJS (prettier.config.cjs), or a "prettier" key fragment ready to paste into package.json.
  • Core options — printWidth, tabWidth, useTabs, semi, singleQuote, quoteProps, trailingComma, bracketSpacing, bracketSameLine, arrowParens, and endOfLine.
  • JSX options — jsxSingleQuote and singleAttributePerLine.
  • Markdown & HTML options — proseWrap and htmlWhitespaceSensitivity.
  • Per-language overrides — one-click presets that add an overrides block for Markdown/MDX (wider prose wrapping), HTML (wider lines, one attribute per line), YAML (two-space indent), and JSON (very wide lines, no trailing commas).

It can also add a descriptive header comment (JS and YAML formats only — JSON stays strict, comment-free JSON) and a companion .prettierignore template covering the usual build output, dependency, and lockfile noise.

How to use it

  1. Choose your output format (JSON is the most common; pick a JS module if you need conditional logic or per-environment config).
  2. Set the core options — line width, indentation, quotes, semicolons, and trailing commas.
  3. Adjust JSX and Markdown/HTML options if your project uses them.
  4. Toggle any per-language overrides you want.
  5. Copy the generated config or download it, and drop it into your project root.

The output updates instantly as you change any option.

Which output format should I pick?

JSON (.prettierrc.json) is the simplest and most widely recognized by editors and tools. Reach for a JS module (prettier.config.mjs/.cjs) only if you need to compute options dynamically — for example, switching printWidth based on an environment variable. YAML is a matter of taste if your project already standardizes on YAML for other config files.

Do I need a separate .prettierignore?

It's optional but recommended — without one, Prettier will format build output, lockfiles, and vendored code, which is usually unwanted and can be slow on large directories. The generated template excludes the common offenders; adjust it to match your project's actual output directories.

Will this override my ESLint rules?

No — Prettier only handles formatting (whitespace, quotes, line breaks). If you also use ESLint, pair it with eslint-config-prettier to disable any ESLint rules that would conflict with Prettier's formatting, rather than trying to keep both in sync manually.

Privacy

This generator runs entirely in your browser. Your selections are never uploaded, logged, or stored — the configuration is assembled locally from the options you choose, and nothing leaves your device.

prettierformatterconfigjavascripttypescriptcode styledeveloper tools

Love the tools? Lose the ads.

One payment clears every ad from your account, for good. No subscription, no tracking.

Remove ads