Prettierrc Generator
Set the Prettier options you care about with checkboxes and dropdowns, watch the JSON rebuild on every change, and copy or download a .prettierrc that lists only the settings that differ from Prettier's own defaults. Because matching values are dropped, a config left at every default produces an empty object, and the file stays short enough to read at a glance.
How to generate a .prettierrc
- Set Print width and Tab width, and pick Quote props, Trailing comma, Arrow parens and End of line from the menus.
- Toggle the Semicolons, Single quotes, Use tabs and Bracket spacing checkboxes as needed.
- Watch the .prettierrc preview update, showing only the options that differ from the defaults.
- Click Copy to copy the JSON, or Download to save it as a .prettierrc file.
- Place the file at the root of your project, or paste the object under a prettier key in package.json.
Examples
Single quotes, no semicolons, wider lines
printWidth 100, Semicolons off, Single quotes on
{
"printWidth": 100,
"semi": false,
"singleQuote": true
}Indent with 4-wide tabs
tabWidth 4, Use tabs on
{
"tabWidth": 4,
"useTabs": true
}Everything left at the defaults
no options changed
{}Frequently asked questions
Why does the output only show some options?
The generator writes a minimal config by comparing each setting against Prettier's documented default and keeping only the ones that differ. That keeps the file short, makes intent obvious in code review, and means you inherit any future default automatically for options you never touched.
What if I keep every setting at its default?
The output is an empty object, which is a completely valid .prettierrc. Prettier then formats using all of its built-in rules. It is a fine way to signal that a project uses stock Prettier on purpose rather than by omission.
Which options can I set here?
Print width, tab width, use tabs, semicolons, single quotes, quote props, trailing comma, bracket spacing, arrow parens and end of line. These cover the formatting choices most teams argue about; less common options can be added by hand to the generated file afterwards.
Can I use this JSON in package.json instead?
Yes. Copy the object and set it as the value of a prettier key in package.json, or save it as .prettierrc, .prettierrc.json or a prettier.config file. Prettier reads any of these locations, so pick whichever fits your project layout.
What does trailing comma all mean?
It tells Prettier to add trailing commas wherever the syntax allows, including the last function parameter. It is the default in Prettier 3 and is safe in modern JavaScript and TypeScript. Choose es5 for older targets or none to omit them entirely.
What is the difference between the quote props options?
as-needed quotes object keys only when required, consistent quotes every key in an object if any one of them needs quoting, and preserve leaves your quoting exactly as written. as-needed is the default and produces the cleanest output for most code.
Does the generated file validate my settings?
The tool checks types as you go: print width must be a positive number, tab width cannot be negative, and each dropdown only offers valid values, so the JSON it produces is always a well-formed Prettier config you can drop straight in.
Can I download the file directly?
Yes. The Download button saves the current preview as a file named .prettierrc with a JSON content type, so you can add it to your repository without copying and pasting into a new file.
Is my configuration private?
Yes. The config is built entirely in your browser by a small pure function, and nothing is uploaded or stored. You can generate a .prettierrc offline once the page has loaded.
Learn more
- Minimal Prettier Config Explained
Why a short .prettierrc beats a long one, what each exposed option controls, and how to place the file so Prettier and your editor both find it.
Related tools
EditorConfig Generator
Generate a .editorconfig file online. Set indent style, size, line endings, charset and per-file overrides, then copy the result. Free and private.
ESLint Config Generator
Generate an ESLint config for JavaScript or TypeScript with React, Vue or Node. Pick a style, set semi, quotes and indent, then copy or download.
tsconfig.json Generator
Generate a tsconfig.json for Node, Browser, React, Next.js or a library. Pick a preset, toggle strict, paths and source maps, then copy or download.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
ASCII Table
Full ASCII table for all 128 codes with decimal, hex, octal and binary values, character names and descriptions. Search by code, hex or character.
Aspect Ratio Box Generator
Generate CSS for a responsive aspect-ratio container. Use the modern aspect-ratio property or the padding-top fallback, then copy the ready code.