¿Odias los anuncios? Ir Sin publicidad Hoy 

Hogar › Generadores › Generador de configuración de Prettier

Compartir en Facebook Compartir en X Compartir en LinkedIn Compartir via correo electrónico

Copiar link

Generador de configuración de Prettier

DatosDesarrollador

ANUNCIO · ¿ELIMINAR?

APORTE

Proceso automático Lado cliente

Alternar ancho Entrar/Salir de pantalla completa

Formato de salida

JSON is the most common; pick a JS format if you need dynamic config or per-environment switches.

Core Options

printWidth

Line length the printer will wrap on. Prettier default: 80.

tabWidth

Number of spaces per indentation level. Prettier default: 2.

useTabs — indent with tabs instead of spaces

semi — print semicolons at end of statements

singleQuote — use single quotes instead of double

quoteProps

Change when object property names are quoted.

trailingComma

Print trailing commas in multi-line constructs.

bracketSpacing — spaces inside object literals { foo }

bracketSameLine — keep > of multi-line HTML/JSX on last line

arrowParens

Parentheses around a sole arrow-function parameter.

endOfLine

Line ending style for written files.

JSX

jsxSingleQuote — use single quotes in JSX attributes

singleAttributePerLine — one HTML/JSX attribute per line

Markdown & HTML

proseWrap

How Prettier handles markdown text wrapping.

htmlWhitespaceSensitivity

How Prettier treats whitespace in HTML.

Per-Language Overrides

Add an overrides block to tweak settings for specific file types.

Markdown (*.md, *.mdx) — proseWrap: always, printWidth: 100

HTML (*.html) — printWidth: 120, singleAttributePerLine: true

YAML (*.yml, *.yaml) — tabWidth: 2, singleQuote: false

JSON (*.json) — printWidth: 200, trailingComma: none

Opciones de salida

Include descriptive header comment (JS/YAML formats only)

Also generate a .prettierignore template

PROD.

Lado cliente

Alternar ancho Entrar/Salir de pantalla completa

Configuración generada

.prettierignore

ANUNCIO · ¿ELIMINAR?

Relacionadas

Algunas otras herramientas similares a Generador de configuración de Prettier que te pueda resultar útil.

Calculadora de Promedio de Costo en Dólares (DCA)

DatosDesarrollador

Generador de configuración de ESLint

DatosDesarrollador

Tasa de Abandono y Calculadora de Retención

DatosDesarrollador

Guía

Generador de configuración de Prettier

Build a correct Prettier configuration without hunting through the docs. Pick every formatting option from a checklist, add per-language overrides for Markdown, HTML, YAML and JSON, and export the result as .prettierrc.json, .prettierrc.yaml, an ES module, a CommonJS module, or a ready-to-paste "prettier" key for package.json. A matching .prettierignore template is generated alongside it so your repository is ready to format on the first commit.

Cómo Usar

Elige un formato de salida — JSON for the simplest shareable file, YAML for human-friendly editing, a JS module when you need conditional logic, or the package.json key when you want one less file in the repo.
Configura el core options: line width, tab width, semicolons, quote style, trailing commas, bracket spacing, arrow-function parens, and end-of-line style.
Tune the JSX block if your codebase uses React, and the Markdown & HTML block for prose-wrapping and whitespace handling.
Enable any per-language overrides to apply different rules to specific file types — for example, a wider printWidth for JSON, or single-attribute-per-line for HTML.
Haz clic en Copiar o Descargar on the generated config. Drop it at the root of your project and run npx prettier --write ..

Características

Every official Prettier option — printWidth, tabWidth, useTabs, semi, singleQuote, quoteProps, jsxSingleQuote, trailingComma, bracketSpacing, bracketSameLine, arrowParens, endOfLine, proseWrap, htmlWhitespaceSensitivity, singleAttributePerLine.
Five output formats — JSON, YAML, ESM (.mjs), CommonJS (.cjs), and a package.json fragment.
Per-language override blocks for Markdown, HTML, YAML, and JSON with sensible defaults you can copy as-is or tweak.
Auto-generated .prettierignore template covering build output, dependencies, lock files, minified assets, and common framework cache folders.
JSDoc @type annotation on JS module outputs so editors light up with autocomplete and type checking.
Previsualización en tiempo real — every change updates the output immediately, so you can A/B compare option combinations in seconds.

 Preguntas frecuentes

Why does Prettier deliberately have so few options?

Prettier's design goal is to end style debates by being opinionated. Each option that exists was added reluctantly, because consensus on the 'right' default was impossible. The team explicitly resists new options to keep configs portable and reviews predictable across projects. That is why something like 'spaces around keywords' is not configurable — Prettier treats formatting choices as commodity decisions, not personal expression.
What is the difference between trailingComma 'es5' and 'all'?

'es5' adds trailing commas where ECMAScript 5 allowed them — arrays and objects — but not in function parameters or calls. 'all' also adds them to function parameter lists and call sites, which is valid in ES2017+ and gives cleaner git diffs when arguments are added or removed. 'all' is the current Prettier default and the recommended choice for any project that targets modern JS or transpiles.
How does Prettier interact with ESLint?

Prettier handles formatting; ESLint handles correctness. They overlap on stylistic rules like quotes and semicolons, which causes conflicts where ESLint reports issues that Prettier just rewrites. The fix is eslint-config-prettier — a sharable config that disables every ESLint rule Prettier already controls. Run Prettier first to format, then ESLint to catch bugs. Plugins like eslint-plugin-prettier that run Prettier as a lint rule are no longer recommended because they slow down ESLint and obscure error sources.
What does proseWrap do in Markdown files?

'preserve' keeps your existing line breaks untouched. 'always' hard-wraps prose at printWidth so the source is readable in any editor, which works well for documentation repos. 'never' joins wrapped paragraphs into single lines, which is the right choice for files that will be edited by tools or rendered in environments where line breaks would show as separate paragraphs. The default is 'preserve' because Markdown line endings can change semantics in some flavors.
When should I use a JS config over JSON?

Use JSON when the config is static and shared across the team — it is the simplest, most portable form. Use a JS config when you need to import shared rules from a package, swap options based on an environment variable, derive overrides from glob lists in code, or use TypeScript types via the JSDoc @type import. JS configs are slower to load because Prettier has to execute them, but the cost is invisible at editor save speeds.