Home › Developer Tools › Prettier Config Generator
Prettier Config Generator
Choose your Prettier options with switches and menus, see the effect on real code as you change them, and copy a ready-to-commit .prettierrc. Only the options you change are written, so the file stays short and readable.
Last updated:
Options and defaults match Prettier 3.x.
Options
Config file
Live preview
Formatted with your options loading…
Edit the input code
npm install --save-dev --save-exact prettiernpx prettier . --write
Advertisement
Advertisement
How to use the Prettier Config Generator
- Start from a preset or keep the Prettier defaults.
- Change the options you care about, such as semi, singleQuote, printWidth or trailingComma. Changed options are highlighted.
- Watch the preview: the sample code is reformatted instantly. Pick another language or paste your own code.
- Choose the file format (.prettierrc JSON is the most common) and copy or download it.
- Save it in your project root, install Prettier and run
npx prettier . --write.
What the most-changed options do
| Option | Default output | Changed output |
|---|---|---|
semi: false | const a = 1; | const a = 1 |
singleQuote: true | import x from "x"; | import x from 'x'; |
trailingComma: "es5" | commas after the last item of arrays, objects and multi-line parameters | no comma after the last function parameter or argument |
bracketSpacing: false | { a: 1 } | {a: 1} |
arrowParens: "avoid" | (x) => x * 2 | x => x * 2 |
quoteProps: "consistent" | { name: 1, "max-retries": 3 } | { "name": 1, "max-retries": 3 } |
bracketSameLine: true | closing > of a long JSX tag on its own line | > at the end of the last attribute line |
objectWrap: "collapse" | an object stays expanded if you put a line break after { | the object is joined onto one line whenever it fits |
Tips for adding Prettier to a project
- Pin the version with
npm install --save-dev --save-exact prettier; different versions can format code slightly differently, which causes noisy diffs. - Add a .prettierignore for build output and generated files such as
dist/,coverage/and lock files. Prettier also respects .gitignore by default. - Use overrides for file types that need different settings, for example
"overrides": [{ "files": "*.md", "options": { "proseWrap": "always" } }]. - Keep editors in sync: Prettier reads indentation, line endings and max_line_length from .editorconfig when its own config does not set them. Create one with the EditorConfig Generator.
- Pair it with a linter: the ESLint Config Generator can add eslint-config-prettier so the two tools never fight.
Frequently asked questions
Where do I put the Prettier config file?
Save it in the root of your project, next to package.json. Prettier searches upward from each file it formats and uses the first config it finds: a "prettier" key in package.json, .prettierrc (JSON or YAML), .prettierrc.json, .prettierrc.yaml, .prettierrc.toml, or prettier.config.js / .mjs / .cjs.
What are Prettier's default options?
printWidth 80, tabWidth 2, useTabs false, semi true, singleQuote false, quoteProps as-needed, jsxSingleQuote false, trailingComma all, bracketSpacing true, objectWrap preserve, bracketSameLine false, arrowParens always, proseWrap preserve, htmlWhitespaceSensitivity css, endOfLine lf and embeddedLanguageFormatting auto.
Why did my trailing commas change after upgrading to Prettier 3?
Prettier 3.0 changed the default of trailingComma from es5 to all, so commas are now also added after the last function parameter and argument when they are split over several lines. Set trailingComma to es5 to keep the old behaviour.
Should I include default values in my config?
It is not required. Writing only the options you change keeps the file short and lets your project pick up improved defaults in future versions. Untick Only options that differ from defaults if your team prefers every value written out.
Does printWidth force every line to be that long or shorter?
No. printWidth is a target, not a hard limit. Prettier tries to fit code within it, but long strings, URLs or deeply nested expressions can still exceed it, and short code is never stretched to fill the line.
How do Prettier and ESLint work together?
Use Prettier for formatting and ESLint for code quality. Install eslint-config-prettier and add it last in your ESLint config to turn off ESLint rules that would conflict with Prettier's formatting.
Is my code uploaded?
No. The config is generated in your browser, and the preview runs the Prettier library locally in the page. If the library cannot be downloaded, a built-in preview of the sample code is shown instead.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.
Related tools
ESLint Config GeneratorGenerate a flat eslint.config.js for JavaScript, TypeScript, React or Node with rule presets.EditorConfig GeneratorBuild an .editorconfig with indent, charset, line endings and trim rules per file pattern.TypeScript FormatterFormat TypeScript and TSX code with Prettier: width, tabs, semicolons and quotes options.JavaScript BeautifierFormat and beautify messy or minified JavaScript, or minify it.QR Code GeneratorMake QR codes for links, Wi-Fi, email and more.Barcode GeneratorCreate Code 128, EAN-13, UPC-A, EAN-8, Code 39 and ITF-14 barcodes as PNG or SVG.UUID GeneratorGenerate UUID v4 and v7 / GUIDs in bulk and copy or download them.Schema Markup Generator (JSON-LD)Create JSON-LD structured data for FAQ, Product, Article and more.Htaccess & Nginx Redirect GeneratorBuild 301 redirects for .htaccess, Nginx and Netlify or Cloudflare _redirects.Fake Data GeneratorGenerate mock data as JSON, CSV or SQL.Random String GeneratorGenerate secure random strings and tokens in bulk with any length and character set.API Key GeneratorCreate secure API keys and secrets with prefixes, checksums and SHA-256 hashes for storage.MIME Type LookupFind the MIME type for any file extension, or the extensions for a MIME type, in 400+ entries.Cron Expression GeneratorBuild crontab schedules visually, read them in plain English and see the next run times.URL Slug GeneratorTurn titles into clean, SEO-friendly URL slugs: accents, stop words, separators and bulk lines.JSON Schema GeneratorTurn sample JSON into a draft 2020-12 JSON Schema with types, required fields and formats.Gitignore GeneratorBuild a .gitignore from 50+ templates for languages, frameworks, IDEs and OS, merged and deduped.License GeneratorCreate a LICENSE file for MIT, Apache, GPL, BSD, ISC, MPL or Unlicense with your name and year.ULID GeneratorGenerate sortable ULIDs and UUID v7 in bulk, monotonic option, and decode their timestamps.Htpasswd GeneratorCreate .htpasswd entries with bcrypt, APR1-MD5 or SHA-1 for Apache and Nginx basic auth.Placeholder Image GeneratorCreate placeholder images in any size, color and text as PNG, JPG, WebP, SVG or data URI.Ads.txt GeneratorCreate or validate ads.txt and app-ads.txt files: seller lines, cert IDs and variables.Docker Run to Compose ConverterConvert docker run commands to docker-compose.yml, or a compose file back to docker run.Dockerfile GeneratorGenerate a production Dockerfile and .dockerignore for Node, Python, Go or a static nginx site.HTML Boilerplate GeneratorTick the options you need and get a clean HTML5 starter template with meta, OG tags and CSS reset.JSON to Zod SchemaInfer a Zod (or Yup) schema from sample JSON with optional, nullable and z.infer types.Linux Commands Cheat SheetSearchable Linux and bash command reference with flags explained, examples and copy buttons.LLMs.txt GeneratorBuild an llms.txt file for AI crawlers: summary and link sections, import from your sitemap.Nano ID GeneratorGenerate secure Nano IDs with custom alphabet, length and count, plus a collision calculator.Nginx Config GeneratorBuild an nginx server block: static site, SPA, reverse proxy or PHP, with SSL, gzip and redirects.OpenAPI / Swagger ViewerView OpenAPI 2/3 JSON or YAML as interactive API docs with validation and an endpoint list.package.json GeneratorFill a form and get a valid, npm-ready package.json with scripts, dependencies and checks.PKCE Code Challenge GeneratorGenerate an OAuth 2.0 PKCE code_verifier and S256 code_challenge, build auth URLs, verify pairs.README GeneratorFill in a form and get a polished README.md with badges, install, usage and license, live preview.Regex GeneratorBuild regular expressions visually from blocks or presets (email, date, phone) and test them live.Commit Message GeneratorBuild Conventional Commit messages with type, scope, body, breaking change and issue refs.Database Schema DesignerDesign tables and relationships visually, then export SQL for MySQL, PostgreSQL or SQLite.Docker Compose GeneratorBuild a docker-compose.yml with a form: services, ports, volumes, env, healthchecks and presets.Systemd Service File GeneratorCreate a systemd .service unit with ExecStart, user, restart policy, environment and hardening.tsconfig.json GeneratorBuild a tsconfig.json with target, module, strict checks and path aliases, each option explained.Access Log AnalyzerAnalyze Apache and Nginx access logs: top URLs, IPs, status codes, bots and traffic charts.Regex String GeneratorGenerate random test strings that match any regular expression, checked against the real regex.ASCII Table GeneratorTurn CSV or pasted cells into plain-text tables: MySQL, Markdown, Unicode box and reST styles.Dummy File GeneratorCreate test files of an exact size in KB, MB or GB with zeros, random bytes or text.FFmpeg Command GeneratorPick a task and options, get the exact ffmpeg command with every flag explained.Folder Tree GeneratorTurn a local folder or an indented list into an ASCII directory tree for your README.GitHub Actions Workflow GeneratorBuild a GitHub Actions CI workflow: triggers, matrix, caching, tests, Pages or Docker deploy.Kubernetes YAML GeneratorGenerate Deployment, Service, Ingress, ConfigMap, Secret and HPA manifests with safe defaults.Markdown TOC GeneratorGenerate a linked table of contents from Markdown headings with GitHub-style anchors.OpenAPI EditorEdit OpenAPI/Swagger YAML or JSON side by side with live API docs, validation and download.OpenAPI ValidatorValidate OpenAPI 3.0/3.1 and Swagger 2.0 specs: schema errors, broken $refs, line numbers.Pivot Table MakerBuild pivot tables from CSV or Excel by drag and drop: sum, count, average, charts, export.SQL Query BuilderBuild SELECT queries visually: joins, filters, GROUP BY, ORDER BY and LIMIT, as clean SQL.Truth Table GeneratorType a logic expression and get its full truth table, minterms and canonical DNF/CNF.TypeScript PlaygroundWrite TypeScript with live type checking, see the compiled JavaScript and run it in your browser.Article Schema GeneratorCreate Article, BlogPosting or NewsArticle JSON-LD with headline, authors, dates and images.Event Schema GeneratorCreate Event JSON-LD with dates, venue or online location, tickets, organizer and performers.Google Search Query BuilderBuild advanced Google searches with site:, filetype:, intitle:, exact phrases and date operators.HowTo Schema GeneratorCreate HowTo JSON-LD with steps, tools, supplies, total time and cost, then copy it.Htaccess GeneratorBuild an Apache .htaccess file: HTTPS, www, gzip, caching, error pages, IP blocks, hotlinks.HTML Email Template BuilderDrag and drop blocks to build a responsive, table-based HTML email with inline styles.Organization Schema GeneratorCreate Organization JSON-LD with logo, URL, contact points, address and social profiles.PIN GeneratorGenerate random 4, 6 or 8-digit PINs that avoid sequences, repeats, dates and common PINs.Product Schema GeneratorBuild Product JSON-LD with price, availability, brand, GTIN, ratings and reviews.Question Keyword GeneratorFind the questions people ask about a topic, grouped by who, what, why, how, can and more.Recipe Schema GeneratorCreate Recipe JSON-LD with ingredients, steps, prep and cook times, nutrition and ratings.Security Headers GeneratorPick HSTS, CSP, frame, referrer and permissions options and get Apache, Nginx, Netlify or Cloudflare config.SKU GeneratorBuild consistent SKUs from brand, category, size and color, then export every variant as CSV.