Espacio de formato de código

Selecciona el lenguaje y aplica el formato de Prettier. Compara o copia el resultado; el editor no ejecuta el código.

Se ejecuta localmente en tu navegador
EDITOR LOCALMonaco 0.56.0Prettier 3.9.6No se sube nada
El código se formatea íntegramente en tu navegador. El editor y el formateador se alojan en VoriTools y no envían fragmentos a una API remota.
Fuente

El editor avanzado se carga solo en esta página. Si no puede iniciarse, el mismo formateador local sigue disponible en el campo alternativo.

Salida formateada

El formateo cambia los espacios y el diseño; conserva siempre una copia del proyecto antes de aplicar transformaciones amplias al código.

Cómo formatear código en el espacio de trabajo

El espacio de trabajo formatea ocho lenguajes —JavaScript, TypeScript, JSON, CSS, HTML, Markdown, YAML y GraphQL— con Prettier 3.9.6 ejecutándose dentro de la página. Elige el lenguaje, pon el código en el panel izquierdo y pulsa Formatear código; el panel derecho muestra el resultado.

El editor avanzado es Monaco 0.56.0 y se carga desde este sitio después de la página: el panel de texto plano funciona de inmediato y sigue funcionando si el editor no arranca. Entre ambos, la página sirve desde voritools.com unos 1,8 MB de archivos de editor y formateador, y nada de lo que pegas sale de tu equipo.

  1. Elige el lenguaje en el desplegable. La página se abre con un ejemplo en JavaScript; mientras no edites el campo, cambiar de lenguaje sustituye el ejemplo por uno del nuevo lenguaje, y Cargar ejemplo lo vuelve a cargar cuando quieras.
  2. Pega el código en el panel izquierdo. El panel de texto plano se puede usar antes de que termine de cargarse el editor avanzado, y lo que escribas allí pasa al editor cuando arranca.
  3. Pulsa Formatear código. Prettier se ejecuta en la página y el resultado con sangría aparece en el panel derecho; la línea de estado avisa cuando termina.
  4. Pulsa Copiar resultado para llevar el resultado al portapapeles, o Usar salida como fuente para devolverlo al panel izquierdo y dar otra pasada.
  5. Si el formato falla, el mensaje indica el motivo y el panel de salida se vacía, para que un resultado anterior no se confunda con el nuevo.

Lenguajes, valores por defecto y límites

Los ocho lenguajes y el analizador de cada uno

JavaScript y TypeScript pasan por los analizadores Babel y TypeScript, así que el JSX y la sintaxis de tipos se conservan y los genéricos como <T,> siguen funcionando. JSON, CSS, HTML, Markdown, YAML y GraphQL tienen su propio analizador: las etiquetas HTML sin cerrar se cierran, por ejemplo, y una regla CSS minificada se imprime con una declaración por línea. Cada lenguaje tiene un ejemplo en Cargar ejemplo.

No hay panel de opciones, así que se usan los valores por defecto de Prettier: sangría de dos espacios, comillas dobles y punto y coma en JavaScript y TypeScript, comas finales en construcciones multilínea y un ancho de impresión de 80 columnas. La página solo cambia espacios y diseño; no ejecuta el código, no instala dependencias ni lee el .prettierrc del proyecto, así que el resultado puede diferir del que produce un script del proyecto con opciones propias.

Qué acepta la vista JSON y qué deja intacto

La vista JSON es el analizador JSON de Prettier, no un validador estricto de la RFC 8259. Medido en esta página: un documento con cadenas entre comillas simples, claves sin comillas, una coma final, un comentario //, un número hexadecimal o Infinity se formatea sin error. Las comillas simples, las claves sin comillas y las comas finales se reescriben en la salida; los comentarios, 0x10 e Infinity se mantienen tal cual.

Por eso un documento puede formatearse aquí sin problemas y ser rechazado en otro sitio: {"a":1} // note y {"a":Infinity} vuelven con el comentario y con el valor Infinity intactos. Antes de llevar el resultado a una API, un archivo de configuración u otro lenguaje, compruébalo con la página Formateador JSON, que rechaza comentarios y comas finales.

Qué se queda en local y dónde están los límites

Prettier y el editor se sirven desde este sitio, y el formato se aplica en el navegador: la página no envía a ningún lado ni el código ni el resultado, y sigue funcionando cuando se cae la red. Si el editor no puede arrancar, el mismo formateador sigue disponible en el panel de texto plano.

Como el trabajo ocurre en la pestaña, los archivos grandes están limitados por la memoria del dispositivo: un archivo JavaScript de 112 KB se formateó aquí en unos 0,2 segundos, mientras que uno de muchos megabytes puede congelar la pestaña. Mantén el archivo bajo control de versiones antes de sustituirlo por la salida: el formateador reescribe la sintaxis como la imprime Prettier, no como estaba escrita.

Herramientas recientes: