Playground de Prettier

¿Qué es el Playground de Prettier?

Prettier es un formateador de código opinado que reescribe tu código en un estilo único y consistente, para que dejes de discutir sobre el formato. Este playground empaqueta el formateador oficial de Prettier y sus analizadores de lenguaje y los ejecuta del lado del cliente. A diferencia de un embellecedor genérico, produce exactamente la salida reconocible de Prettier y expone las propias opciones de configuración de Prettier, reflejando el playground oficial de prettier.io sin ninguna configuración.

Cómo usar el Playground de Prettier

Formatear código con Prettier en tu navegador lleva segundos:

1. Elige el lenguaje que corresponde a tu código (JavaScript, TypeScript, JSON, CSS, SCSS, LESS, HTML o Markdown).
2. Pega o escribe tu código en el cuadro de entrada.
3. Ajusta las opciones de Prettier — ancho de línea, tamaño de la tabulación, punto y coma, comillas, comas finales y espacio entre llaves.
4. Lee el resultado formateado a la derecha y cópialo con un clic.

¿Qué opciones de Prettier puedo cambiar?

Puedes controlar las opciones que los desarrolladores más usan: printWidth (la longitud de línea que Prettier intenta no superar), tabWidth, useTabs (tabulaciones o espacios), semi (si añadir punto y coma), singleQuote (comillas simples o dobles), trailingComma (all, es5 o none) y bracketSpacing (espacios dentro de las llaves de los objetos). La salida se vuelve a formatear automáticamente cada vez que cambias una opción.

¿En qué se diferencia de un formateador común?

Los embellecedores genéricos reindentan el código, pero Prettier lo reimprime desde cero usando sus propias reglas, así que el resultado es consistente sin importar cómo se escribió la entrada. Esto significa que normaliza las comillas, ajusta las líneas largas al ancho que defines y aplica los valores predeterminados específicos de Prettier que otros formateadores no aplican. Si tu equipo usa Prettier, este playground muestra exactamente lo que Prettier produciría.

¿Mi código se sube a algún sitio?

No. Todo el motor de Prettier se ejecuta localmente en tu navegador usando JavaScript sin WebAssembly, así que tu código fuente nunca se envía ni se almacena en ningún servidor. Puedes formatear código propietario o sensible con total seguridad.

¿Por qué usar este Playground de Prettier?

• 100% gratis, sin anuncios, registro ni límites de uso.
• Ejecuta el formateador real de Prettier por completo en tu navegador — el código nunca se sube.
• Admite JavaScript, TypeScript, JSON, CSS, SCSS, LESS, HTML y Markdown.
• Opciones de Prettier editables en vivo: ancho de línea, tamaño de la tabulación, punto y coma, comillas, comas finales y espacio entre llaves.
• Produce exactamente la salida opinada de Prettier — la misma que ejecutar Prettier localmente.
• Mensajes de error amables cuando tu código tiene un error de sintaxis.

Preguntas frecuentes