Prettier Config Generator

Next

Choose values for ten common Prettier options and copy the resulting configuration. The generator outputs JSON, YAML or a CommonJS JavaScript file; it does not inspect a project, validate the configuration with Prettier or add plugins and overrides.

How to generate the configuration

  1. 1

    Set the layout

    Choose print width, tab width, tabs or spaces, semicolons and quote style.

  2. 2

    Set syntax details

    Choose trailing commas, bracket spacing, arrow parentheses, line endings and JSX quotes.

  3. 3

    Choose a file format

    Generate .prettierrc.json, .prettierrc.yaml or a CommonJS .prettierrc.js using module.exports.

  4. 4

    Copy and check it

    Save the output in your project and run npx prettier --check . with your installed Prettier version.

Options this generator includes

Option Available values
printWidth 40–200
tabWidth 1–8
useTabs, semi, bracketSpacing, jsxSingleQuote true or false
singleQuote true or false
trailingComma none, es5 or all
arrowParens always or avoid
endOfLine lf, crlf, cr or auto

The number controls are clamped to the ranges shown. The other controls only expose the listed values. These are useful everyday settings, not every option supported by Prettier.

Output formats

  • JSON produces a JSON object suitable for .prettierrc.json.
  • YAML produces key-value lines suitable for .prettierrc.yaml.
  • JavaScript wraps the same object in module.exports = { ... };, suitable for a CommonJS .prettierrc.js setup.

Prettier supports other configuration filenames and module formats too. This generator creates only the three outputs displayed above. It does not run Prettier, so check the copied file with the version installed in your project.

Data handling

The controls are server fields, so option values are sent to the server while the page updates. In the two-step view, they can also appear in the page URL. A Prettier configuration normally contains no secrets, but do not place sensitive data in these fields or in a shared URL.

Frequently Asked Questions

No. It generates the ten options shown in the form. Add any other supported settings manually after checking the documentation for your installed version.

No. It creates configuration text but does not run Prettier. Save the file and run npx prettier --check . in your project.

No. The output is one flat object. Add overrides or plugin-specific options manually if your project needs them.

That is the CommonJS form generated by this tool. If your project expects an ES module configuration, adapt the export and filename for that setup.

Related Tools

Tool available in other languages