Prettier Config Builder

Build a Prettier config (printWidth, tabWidth, semi, quotes, trailingComma), preview it on sample code, and export JSON, YAML, package.json or JS.

Width & indentation

printWidthtabWidthuseTabs

Punctuation & style

trailingCommaarrowParensendOfLineproseWrapquotePropshtmlWhitespaceSensitivity

Output format

Sample code

Edit to see how your settings affect different patterns.

.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",
  "embeddedLanguageFormatting": "auto",
  "quoteProps": "as-needed",
  "htmlWhitespaceSensitivity": "css",
  "singleAttributePerLine": false
}

Live preview (formatted)24 lines

import { useState, useEffect, useCallback } from "react";

function Counter({ initial = 0, step = 1, onChange }) {
  const [count, setCount] = useState(initial);
  useEffect(() => { onChange?.(count); }, [count, onChange]);
  const increment = useCallback(() => setCount((c) => c + step), [step]);
  const items = [
    "apple",
    "banana",
    "cherry",
    "date",
    "elderberry",
    "fig",
    "grape"
  ];
  return (
    <div className={count > 10 ? "high" : "low"}>
      <button onClick={increment}>+{step}</button>
      <span>{count}</span>
      {items.map((it) => <li key={it}>{it}</li>)}
    </div>
  );
}
export default Counter;

Updated October 2, 2026. Provided as is. Check the output before you rely on it in production.

How to use Prettier Config Builder

1

Set print width and indentation

Adjust printWidth, tabWidth, and useTabs. The live preview reflows the sample code instantly so you can see how lines break under your chosen width.
2

Configure quotes and semicolons

Toggle semi, singleQuote, jsxSingleQuote, bracketSpacing, and bracketSameLine. The preview rewrites string literals and JSX brackets as you flip each option.
3

Pick punctuation rules

Choose trailingComma (all, es5, none), arrowParens, endOfLine, proseWrap, quoteProps, and htmlWhitespaceSensitivity. Each affects how Prettier reformats specific syntax.
4

Edit the sample code

Replace the default React snippet with your own code to see how your settings handle real patterns from your codebase, including JSX, arrays, and arrow functions.
5

Choose output format and copy

Pick .prettierrc (JSON), YAML, package.json field, or prettier.config.js (ESM). Copy the file and commit it to your project root.

Questions and answers

What is Prettier Config Builder?

Prettier is an opinionated code formatter whose few options, such as printWidth, semi, singleQuote and trailingComma, live in a .prettierrc or similar file. This builder sets those options, previews their effect on sample code and exports .prettierrc JSON, .prettierrc.yaml, a package.json field or prettier.config.js.

How accurate is the live preview?

The preview implements Prettier-compatible transforms for quotes, semicolons, indentation, trailing commas, arrow parens, line endings, and basic line-width reflow. It mirrors the most-asked-about behaviors.

Which output formats are supported?

Four: .prettierrc (JSON), .prettierrc.yaml, a prettier field inside package.json, and prettier.config.js (ESM with type annotation). Pick the one that matches your repo conventions.

Does it send my data to a server?

No. The formatter and config builder both run in your browser. Your sample code and chosen options never leave the page.

Should I use trailingComma all or es5?

Use all if you target modern environments; it produces the cleanest diffs and is Prettier 3's default. Use es5 only if you must support old transpiler targets that reject trailing commas in function calls.

For AI agents: how to call this tool

Machine-readable contract, endpoints and examples. Humans can ignore this section.

Best Path For Builders

Browser workflow

Runs instantly in the browser with private local processing and copy/export-ready output.

Browser Workflow

This tool is optimized for instant in-browser execution with local data handling. Run it here and copy/export the output directly.

/prettier-config-builder/

For automation planning, fetch the canonical contract at /api/tool/prettier-config-builder.json.

Prettier Config Builder