UTILS.
100% en el navegador
🎨

Embellecedor / Formateador de JavaScript

Formatea JavaScript y JSON minificado o desordenado con sangría, espaciado y saltos de línea consistentes — un formateador hecho a mano que se ejecuta totalmente en el navegador.

— la salida aparece aquí —

Acerca de esta herramienta

El Embellecedor de JavaScript reformatea JavaScript y JSON minificado, en una sola línea o con sangría inconsistente en código fuente limpio y legible con sangría y espaciado uniformes. Es útil para leer una biblioteca empaquetada, ordenar un fragmento copiado o inspeccionar un blob JSON. Todo ocurre en tu navegador — el código solo se reformatea como texto, nunca se ejecuta, así que no hay eval, ni new Function, y nada se sube.

El formateador es un tokenizador escrito a mano, no un truco de regex: escanea el código fuente en tokens saltando correctamente los interiores de cadenas, literales de plantilla, expresiones regulares y comentarios de línea/bloque, de modo que las comillas y barras dentro de ellos nunca se confunden con estructura. Una heurística clásica de lookbehind distingue un operador de división de un literal de expresión regular. El flujo de tokens se vuelve a emitir con saltos de línea después de '{', '[' y ';', líneas con sangría reducida antes de '}' y ']', un elemento por línea dentro de literales de objeto y array, y un solo espacio alrededor de operadores y después de palabras clave.

Elige una sangría de 2 espacios, 4 espacios o una tabulación, y un estilo de llaves: collapse mantiene la llave de apertura en la misma línea (K&R / 1TBS), mientras que expand la mueve a su propia línea (Allman). Como la herramienta preserva el contenido de cadenas y regex byte por byte, el código reformateado es semánticamente idéntico a la entrada. Copia el resultado directamente en tu editor.

Preguntas frecuentes

¿Ejecuta o evalúa mi código?
No. El embellecedor solo tokeniza y vuelve a emitir tu código fuente como texto. Nunca llama a eval ni a new Function y nunca ejecuta el código, así que pegar JavaScript no confiable o propietario es seguro. Todo el trabajo permanece en tu navegador.
¿Funciona también con JSON?
Sí. JSON es un subconjunto de la sintaxis de JavaScript, así que pegar un objeto o array JSON minificado lo reformatea en una forma con sangría, con una clave por línea. Las cadenas, números y estructuras anidadas se formatean de la misma manera que en JavaScript.
¿Cuál es la diferencia entre los estilos de llaves?
Collapse (K&R / 1TBS) mantiene la llave de apertura en la misma línea que la sentencia, p. ej. 'if (x) {'. Expand (Allman) pone la llave de apertura en su propia línea debajo de la sentencia. Ambos producen código idéntico y válido — solo difiere la disposición.
¿Cambiará lo que hace mi código?
No. Solo cambian los espacios en blanco, la sangría y los saltos de línea. El contenido de las cadenas, literales de plantilla y expresiones regulares se preserva exactamente, así que la salida reformateada es funcionalmente idéntica al código fuente original.

Más herramientas