Frequently Asked Questions

Prettier Config Generator is a free, interactive web tool that lets you visually configure every Prettier option and instantly copy the resulting .prettierrc file. No manual editing required.

Prettier is an opinionated code formatter that enforces a consistent style across your codebase. It removes all original styling and re-prints your code with a uniform format, eliminating style debates in code reviews.

A .prettierrc file is a configuration file placed at the root of your project that tells Prettier how to format your code. It controls options like indentation, quote style, and line width.

Select the Prettier options you want on the main page. Your configuration updates in real-time in the sidebar. Click "Copy Config" to copy the JSON to your clipboard, then paste it into a .prettierrc file at the root of your project.

Yes, completely free. There is no signup, no account required, and no usage limits. The tool is also open source on GitHub.

Yes. This tool includes every officially supported Prettier option, with descriptions and default values shown for each one so you can make informed choices.

Click the "Copy Config" button in the sidebar on desktop, or tap the floating action button on mobile. Paste the copied JSON content into a new file named .prettierrc at the root of your project directory.

All three are valid ways to configure Prettier. .prettierrc supports JSON or YAML. prettier.config.js is a JavaScript module and allows dynamic configuration. The prettier key in package.json keeps everything in one file. The functionality is identical — it is a matter of preference.

Yes. Prettier has built-in support for TypeScript, JSX/TSX (React), Vue single-file components, and many other formats. You may need to install additional plugins for some frameworks.

Install the "Prettier - Code formatter" extension from the VS Code marketplace. Then add "editor.defaultFormatter": "esbenp.prettier-vscode" and "editor.formatOnSave": true to your VS Code settings.

Run npx prettier --write . in your project root. This formats all supported files. Add prettier as a dev dependency with npm install --save-dev prettier for consistent results across your team.

Prettier supports JavaScript, TypeScript, JSX, TSX, CSS, SCSS, Less, HTML, Vue, Angular, JSON, YAML, Markdown, and more. It can also be extended with plugins for additional languages.

Create a .prettierignore file in your project root, using the same syntax as .gitignore. Files and directories listed there will be skipped by Prettier.

Yes. Install eslint-config-prettier to disable ESLint formatting rules that conflict with Prettier. Run Prettier for formatting and ESLint for code quality rules — they complement each other perfectly.

printWidth tells Prettier the line length it should try to fit code within. It defaults to 80. This is a soft target — Prettier will exceed it if breaking the line would make the code less readable.

singleQuote controls whether Prettier uses single quotes in JavaScript/TypeScript strings. jsxSingleQuote specifically controls JSX attribute strings. You can set them independently.

Use the search bar at the top of the page to filter Prettier options by name, description, or keyword. Results update instantly as you type.

Yes. Click the theme toggle button in the header to switch between light mode, dark mode, and system preference. Your choice is saved automatically.

Prettier defaults include: printWidth: 80, tabWidth: 2, useTabs: false, semi: true, singleQuote: false, trailingComma: "all", bracketSpacing: true, and arrowParens: "always".

Open an issue or pull request on the GitHub repository. The project welcomes contributions of all kinds, including new features, bug fixes, and translation improvements.

You can pick any Prettier 3.x release from the version dropdown — 3.0 through 3.6 plus "latest". The selected version's bundle is loaded on demand from jsDelivr, so the options list always matches that release's actual schema.

TypeScript, JavaScript, Flow, CSS, SCSS, Less, HTML, Vue, Angular templates, JSON, JSON5, JSON with comments, Markdown, MDX, YAML, and GraphQL. The parser is auto-detected from the input, but you can override it with the dropdown.

Click the share button and the current Prettier version, selected options, code, and parser override are LZ-compressed into the URL hash, then copied to your clipboard. Opening that link restores the exact same configuration. Nothing is sent to a server — everything stays in the browser.

It shows how many AI tokens your input and output would cost under the selected model. GPT-4o / GPT-4 / GPT-3.5 use the official BPE tokenizers for an exact count; Claude, Gemini, Llama, and Mistral use a character-based approximation prefixed with "~".

Yes. Your Prettier version, option selections, and split-view / tokenizer preferences are saved to localStorage, so a reload restores everything. A shareable URL hash takes precedence if one is present when you open the page.

When Prettier's parser can't parse your input — usually because the chosen parser doesn't match the code (e.g. CSS picked but you pasted JSX) — the error message appears in a red strip above the diff. Switch the parser to match your code and the error clears.

Yes. The Preview tab has its own parser dropdown next to the diff toggle, and each parser comes with a purpose-built sample — CSS, SCSS, Less, HTML, Vue, Angular, JSON / JSON5 / JSONC, Markdown, MDX, YAML, GraphQL, plus TypeScript / JS. Switching parsers re-formats the matching sample under your current options, so language-specific options like proseWrap, htmlWhitespaceSensitivity, and vueIndentScriptAndStyle have a place to demonstrate their effect. Your choice persists across reloads.