Developer Tools

Prettier Config Generator

Build a .prettierrc, prettier.config.mjs, or package.json prettier block in your browser. All Prettier 3 options, presets, plugins, live preview.

Quick presets

Apply a known config. You can tweak any option afterwards.

Generated file

Drop into .prettierrc at the root of your project.

{
}

Live preview

Sample code rendered with your indent, quote, semicolon, and trailing-comma choices.

import { createUser, deleteUser } from "./users";

const config = {
  name: "Zero Signup Tools",
  retries: 3,
  tags: ["fast", "free", "offline",],
};

async function main() {
  const user = await createUser({
    email: "hi@example.com",
    role: "admin",
  },);

  return user;
};

main();

The preview shows visible options only. Prettier itself applies every option (object wrapping, line wrapping, JSX, HTML, and more) when it formats a real file.

Summary

Non-default options

Plugins enabled

Overrides

Indent style

2 spaces

Quotes

double

Print width

80 cols

Every option matches a Prettier default. Either pick a preset, tweak an option, or enable Include defaults in output to write a file with explicit values.

Option reference

Every option above is documented here with its Prettier default and the current value in your config.

Option	Default	Current	Description
printWidth	80	80	Line length Prettier tries to wrap at. The default is 80.
tabWidth	2	2	Number of spaces per indentation level. The default is 2.
useTabs	false	false	Indent with tabs instead of spaces. The default is false.
semi	true	true	Add a semicolon at the end of every statement. The default is true.
singleQuote	false	false	Use single quotes instead of double quotes. The default is false.
quoteProps	as-needed	as-needed	When to quote object properties. as-needed, consistent, or preserve.
jsxSingleQuote	false	false	Use single quotes in JSX. The default is false (double quotes).
trailingComma	all	all	Trailing commas where valid. all (Prettier 3 default), es5, or none.
bracketSpacing	true	true	Spaces between brackets in object literals. The default is true.
bracketSameLine	false	false	Put > of a multi-line element at the end of the last line. Default false.
arrowParens	always	always	Always include parens around a single arrow function param. Default always.
objectWrap	preserve	preserve	How to wrap object literals: preserve keeps user breaks, collapse merges.
endOfLine	lf	lf	Line ending used when saving. lf is recommended for all platforms.
embeddedLanguageFormatting	auto	auto	Format code in template literals (auto) or leave alone (off).
singleAttributePerLine	false	false	One HTML / JSX attribute per line. The default is false.
proseWrap	preserve	preserve	How to wrap prose in markdown: preserve, always, or never.
htmlWhitespaceSensitivity	css	css	Whitespace sensitivity for HTML files. css respects display values.
vueIndentScriptAndStyle	false	false	Indent <script> and <style> in .vue files. The default is false.
experimentalTernaries	false	false	Use Prettier 3.1's experimental nested-ternary formatting.

How to use

Pick a preset (Prettier defaults, Standard, Airbnb, Tailwind, React + Vite, Next.js, legacy Prettier 2, or hard tabs) or start from defaults and tune each option.
Edit the Core formatting group to set printWidth, tabWidth, useTabs, semi, singleQuote, jsxSingleQuote, trailingComma, and arrowParens.
Enable any plugins you use (Tailwind class sorter, sort imports, organize imports, package.json field order, Prisma, Svelte, Astro). The plugins array and install command update automatically.
Optionally turn on per-file overrides for Markdown, YAML, or JSON to apply different rules to those files.
Pick the output format that matches your project (.prettierrc, .prettierrc.json, .prettierrc.json5, prettier.config.mjs, prettier.config.cjs, package.json key, .prettierignore, or VS Code settings) and click Copy file or Download.
Run the matching install command at the bottom (npm, pnpm, yarn, or bun) to install Prettier and the plugins you enabled.

About this tool

Prettier Config Generator builds a Prettier 3 configuration file from a short set of preset choices and explicit toggles for every documented option. Outputs are available in eight ready-to-paste formats: .prettierrc (JSON), .prettierrc.json (JSON), .prettierrc.json5 (JSONC with inline option descriptions so the file is self-documenting), prettier.config.mjs (ESM with a typed @type {import("prettier").Config} JSDoc comment), prettier.config.cjs (CommonJS), a package.json "prettier" key block, a .prettierignore starter that covers the directories Prettier should skip on every standard JS / TS / Next / Astro / SvelteKit project, and a .vscode/settings.json snippet that wires up format-on-save with the Prettier extension. Only non-default options are written so the file stays minimal and self-documenting, which is what the Prettier docs recommend; an Include defaults switch flips the file to a fully explicit form when needed. Every Prettier 3 option is covered: printWidth, tabWidth, useTabs, semi, singleQuote, jsxSingleQuote, quoteProps, trailingComma, bracketSpacing, bracketSameLine, arrowParens, endOfLine, embeddedLanguageFormatting, singleAttributePerLine, proseWrap, htmlWhitespaceSensitivity, vueIndentScriptAndStyle, experimentalTernaries, and the 3.5 objectWrap option. Quick presets seed common configs: Prettier defaults, JavaScript Standard style (single quote, no semi, no trailing comma), Airbnb-flavored (single quote, semi, all trailing commas, 100 columns), Tailwind project (defaults plus prettier-plugin-tailwindcss), React + Vite, Next.js, the legacy Prettier 2 trailingComma es5 style, and a hard-tabs setup. Plugin toggles add prettier-plugin-tailwindcss (the most popular class sorter), @ianvs/prettier-plugin-sort-imports, prettier-plugin-organize-imports, prettier-plugin-packagejson, prettier-plugin-prisma, prettier-plugin-svelte, and prettier-plugin-astro to the plugins array and update the install command at the bottom. Per-file overrides for *.md, *.{yml,yaml}, and *.json are one click each. A live preview panel renders a short JS sample with your indent style, quote style, semicolons, and trailing-comma rules applied, so you can see the impact of the four most visible options before you paste the file into your project. The reference table at the bottom lists every option with its documented default, your current value, and a one-line description so it doubles as a quick Prettier docs lookup. Install commands cover npm, pnpm, yarn, and bun and include any plugins you enabled. Everything runs locally in your browser; the options you pick, the plugins you enable, and the files you download never leave the page.

Free to use. Works in your browser. No signup, no login.

Related tools

Prettier Config Generator

How to use

About this tool

You may also like

EditorConfig Generator

TSConfig Generator

Gitignore Generator

Tailwind Class Sorter

JSON Formatter

CSS Formatter