Prettier config generator
Pick printWidth, tabWidth, quotes, semicolons, trailing commas, line endings and plugins, then generate a .prettierrc (JSON) or prettier.config.js template with a live preview.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Formatting options
These map one-to-one to Prettier’s Options; the file updates as you change them.
Generated config
.prettierrcNone{
"printWidth": 100,
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"bracketSpacing": true,
"arrowParens": "always",
"endOfLine": "lf"
}
What this tool does
- Lock in one code style for a new frontend project: set printWidth, quotes, semicolons and trailing commas, then commit the generated .prettierrc.
- Settle team arguments about semicolons or quote style by showing the options side by side instead of relying on memory.
- Working with Tailwind or needing stable import order? Tick the plugin and get a config with the right plugins array without looking up package names.
- Switching between .prettierrc and prettier.config.js is one toggle, so you never maintain two copies of the same settings.
Example
Input
Output format .prettierrc (JSON), printWidth 100, singleQuote off (double quotes), prettier-plugin-tailwindcss ticked
Output
{
"printWidth": 100,
"tabWidth": 2,
"semi": true,
"singleQuote": false,
"trailingComma": "all",
"bracketSpacing": true,
"arrowParens": "always",
"endOfLine": "lf",
"plugins": [
"prettier-plugin-tailwindcss"
]
}Keys keep a fixed order so you can diff the result against an existing config line by line; plugin packages also show up under "Plugins to install".
Frequently asked questions
Should I use .prettierrc or prettier.config.js?
Use .prettierrc when you only change options — it is plain JSON that any language can read. Reach for prettier.config.js when you need comments, conditionals or computed values (for example a different printWidth per environment); this tool emits ESM, so mind the type field in package.json.
Why does the config not expose more indentation options?
Prettier only has useTabs and tabWidth for indentation — everything else about line breaking is Prettier’s own decision. That is exactly why its formatting rules clash with ESLint, and why the ESLint generator offers a Prettier compatibility switch.
Do I need Tailwind for prettier-plugin-tailwindcss?
Yes. The plugin only reorders class strings into Tailwind’s recommended order, so it does nothing in a project without Tailwind. On Tailwind v4 you also want tailwindStylesheet pointing at your entry CSS; the generated config only adds the plugins array, so add that path yourself.
Can I drop the output straight over my current file?
Yes, but be aware it replaces the whole file: hand-written overrides, parser or other fields will not survive. Compare the generated text with your current config before overwriting.
Is anything sent anywhere?
No. The page is entirely client side, the options live in browser memory only, a refresh restores the defaults, and nothing is written to your project.
Keywords：prettierprettier configprettierrccode formatter格式化配置prettier 配置代码风格tailwind prettier pluginimport 排序前端工程化