Embellecedor de JavaScript
Un bundle minificado es una sola línea larga de variables renombradas y espacios en blanco eliminados: perfecto para desplegar, imposible de leer. Cuando necesitas entender un script de un proveedor, seguir qué hace un widget de terceros o simplemente ordenar código que pegaste, este formateador reconstruye la estructura. Analiza el JavaScript en un árbol de sintaxis y lo imprime de vuelta con indentación, saltos de línea y espaciado reales, de modo que la lógica que corría junta en una sola línea pasa a ser algo que de verdad puedes seguir. El comportamiento es idéntico; solo cambia el formato. Elige tu indentación, tus comillas y tu estilo de punto y coma, y todo se ejecuta localmente en tu navegador.
- Expande el JavaScript minificado o en una sola línea a código legible con la indentación y los saltos de línea adecuados
- Reformatea a partir de un árbol de sintaxis analizado, así el código se comporta exactamente igual que antes, solo que dispuesto con claridad
- Controla el ancho de indentación, el ancho de ajuste, los puntos y coma y las comillas simples o dobles para adaptarlo a tu proyecto
- Se ejecuta por completo en tu navegador, así los bundles, los scripts de proveedores y el código privado nunca salen de tu dispositivo
Resumen
Entender código que no escribiste, o que un empaquetador aplastó, empieza por ver su estructura. Esta herramienta restaura esa estructura sin cambiar lo que hace el código.
- 01
Reformateo basado en parser
El JavaScript se analiza en un árbol de sintaxis antes de imprimirse, así que la herramienta reformatea a partir de la estructura real en vez de adivinar dónde cortar las líneas. Por eso la indentación, los bloques y los límites de las sentencias caen siempre en el sitio correcto.
- 02
Estilo uniforme y determinista
La indentación, el espaciado, los saltos de línea y la posición de los corchetes siguen un mismo conjunto de reglas de principio a fin. La misma entrada produce siempre la misma salida, así el resultado es estable para leer, compartir y comparar con diff.
- 03
Opciones que encajan con tu proyecto
Elige dos espacios, cuatro espacios o tabuladores, ajusta el ancho de ajuste, decide si las sentencias terminan en punto y coma y escoge comillas simples o dobles, para que la salida se lea como ya lo hace tu base de código.
- 04
Sintaxis moderna admitida
Las funciones flecha, las clases, async y await, las plantillas de texto, la desestructuración, el encadenamiento opcional y el JavaScript moderno (sin JSX) se analizan y disponen correctamente, en lugar de tratarse como texto plano.
- 05
Recuento de líneas y bytes
El panel de salida muestra en cuántas líneas se expande el código formateado y su tamaño, una medida rápida de lo apretado que estaba el original.
- 06
Copiar, descargar o subir
Pega desde el portapapeles, abre un archivo .js del disco y luego copia el código formateado o guárdalo. Todo se queda en tu equipo y nunca llega a un servidor.
Cómo usarla
Pasa de un script apretado e ilegible a un JavaScript limpio y con un formato coherente en unos pocos pasos.
- 01
Pega tu JavaScript minificado o desordenado en el panel de entrada, o usa «Subir» para abrir un archivo .js del disco.
- 02
Configura el estilo de indentación y el ancho de ajuste, y elige si usar puntos y coma y comillas simples.
- 03
Consulta a la derecha el código formateado, dispuesto de nuevo con la indentación adecuada y una sentencia por línea, que se actualiza al cambiar las opciones.
- 04
Copia el resultado o descárgalo como archivo .js, y luego ábrelo en tu editor para leerlo, depurarlo o seguir trabajando en él.
Detalles
Los detalles que hacen que la salida formateada sea fiable y cómoda de usar.
- Basado en Prettier con el parser de Babel, así que el código se reformatea a partir de un árbol de sintaxis real y no por coincidencia de patrones.
- El formateo se ejecuta a medida que escribes y cambias las opciones, y el resultado se actualiza en el momento.
- Un error de sintaxis se informa en el sitio junto con su mensaje, en lugar de producir una salida a medio formatear o vacía.
- Tanto la entrada como el resultado formateado se muestran con resaltado de sintaxis de JavaScript completo, en temas claro y oscuro.
- No se sube ni se registra nada. El código que pegas se queda en tu navegador y desaparece cuando cierras la pestaña.
Casos de uso
Dónde compensa devolver el JavaScript apretado a código legible.
-
Leer un bundle minificado
Cuando la única copia disponible de un script es el archivo de producción minificado, formatéalo aquí para seguir el flujo de control y ver cómo encajan las piezas.
-
Inspeccionar un widget de terceros
Los fragmentos de analítica, los embeds y los SDK de proveedores se distribuyen minificados. Formatear uno te permite revisar qué toca antes de confiar en él en tu sitio.
-
Depurar código a partir de un stack trace
Un error de producción suele apuntar a una única línea apretada. Formatear ese archivo hace legible la lógica de alrededor para que encuentres la causa real.
-
Normalizar fragmentos pegados
El código copiado de la documentación, un foro o un chat llega con la indentación y las comillas mezcladas. Una sola pasada lo deja coherente con tu estilo.
-
Ordenar antes de un commit
Reformatea un borrador a las convenciones de indentación, comillas y puntos y coma de tu proyecto antes de que pase a revisión, sin montar toda una cadena de herramientas.
-
Compartir un ejemplo legible
Un fragmento con un formato coherente es mucho más fácil de explicar en un tutorial, una incidencia o una pull request que uno con espaciado improvisado.
Ver también
¿Toca desplegar en lugar de leer? El Minificador de JavaScript comprime el mismo código en la dirección contraria; y para las hojas de estilo, el Embellecedor de CSS dispone el CSS de la misma forma legible.
Formatear frente a minificar
Formatear y minificar mueven el mismo código en direcciones opuestas, y ambos solo cambian caracteres que el motor ignora. Uno devuelve los espacios en blanco que hacen legible el código; el otro los quita para ahorrar bytes.
-
Formatear no cambia el comportamiento
La indentación, los saltos de línea y el espaciado son invisibles para el motor de JavaScript. Reformatear solo reordena cómo se ve el código para una persona, nunca lo que calcula, así que un script formateado se ejecuta igual que el original.
-
Por qué los bundles son ilegibles
Un minificador elimina los espacios en blanco, acorta los nombres de las variables locales y agrupa todo en el menor número de líneas posible. El resultado es pequeño y rápido de descargar, pero una única línea densa donde ha desaparecido todo límite entre sentencias.
-
No restaura los nombres originales
Formatear devuelve la disposición, no el significado que se descartó. Las variables que un minificador renombró a a y b siguen igual, y los comentarios eliminados no vuelven. Obtienes una estructura legible, no el código fuente original del autor.
-
Idempotente y seguro para commitear
Formatear código ya formateado produce exactamente el mismo texto. Como la salida es determinista, ejecutarlo en cada guardado o en un hook previo al commit no crea en el historial cambios que sean solo ruido.
-
Es un lector, no un ejecutor
El formateador reordena texto; no ejecuta el script, no resuelve los import ni sigue lo que hace en tiempo de ejecución. Hace el código legible para que tú mismo lo leas y razones sobre él.
-
Formatea para leer, minifica para desplegar
El código legible pertenece a tu editor y a tu repositorio; el código minificado pertenece a producción. Esta herramienta es el lado de «leer» de ese par, la imagen especular de un minificador.
Buenas prácticas
Hábitos para sacar el máximo partido a formatear JavaScript.
- Usa el formateador para leer y revisar código desconocido o apretado, y conserva como fuente de verdad tu propio código legible.
- Fija un único estilo de indentación, comillas y puntos y coma para un proyecto, así los archivos formateados se comparan limpiamente entre sí con diff.
- Recuerda que formatear solo restaura la disposición: los nombres de variables minificados y los comentarios eliminados no vuelven.
- Para tu propia base de código, ejecuta un formateador desde tu editor o un hook previo al commit para que los archivos se mantengan coherentes sin pegar a mano.
- Trata un script de terceros formateado como una forma de leerlo, no como un reemplazo seguro de la versión que se te sirvió.
Limitaciones
Lo que hace esta herramienta y lo que deja para otros pasos.
- Reformatea una sola pieza de JavaScript. No ejecuta el código, no resuelve los import, no empaqueta módulos ni transpila sintaxis.
- Restaura la disposición, no la información. Los nombres de variables minificados siguen siendo cortos y los comentarios eliminados no vuelven.
- La sintaxis propia de TypeScript y JSX quedan fuera de lo que espera aquí el parser de JavaScript; formatéalos con una herramienta configurada para ellos.
- Un error de sintaxis detiene el formateo y se informa en lugar de sortearse, así que una entrada muy dañada no producirá una salida parcial.
Preguntas frecuentes
Preguntas frecuentes sobre formatear JavaScript y cuándo usarlo.
¿Formatear cambia lo que hace mi código?
No. Solo añade espacios en blanco, saltos de línea y un espaciado coherente, todo lo cual el motor de JavaScript ignora. Las sentencias, las expresiones y la lógica quedan intactas, así que el código formateado se comporta exactamente igual que lo que pegaste.
¿Puede desminificar un bundle y devolverlo al original?
Restaura una disposición legible, no el código fuente original. La indentación y los saltos de línea vuelven, pero las variables que un minificador renombró a una sola letra siguen renombradas, y los comentarios que eliminó ya no están. Obtienes código que puedes leer y seguir, no una copia byte a byte de lo que escribió el autor.
¿Qué opciones de formato puedo controlar?
Puedes indentar con dos espacios, cuatro espacios o tabuladores, fijar el ancho de ajuste en 80, 100 o 120 columnas, elegir si las sentencias terminan con punto y coma y preferir comillas simples o dobles para las cadenas.
¿Admite la sintaxis moderna de JavaScript?
Sí. Las funciones flecha, las clases, async y await, las plantillas de texto, la desestructuración, el spread y el encadenamiento opcional se analizan y formatean correctamente. TypeScript y JSX, en cambio, necesitan un parser configurado para ellos y quedan fuera del alcance aquí.
¿Es seguro pasar un script de terceros por él?
Formatearlo es seguro y ocurre por completo en tu navegador; el código nunca se ejecuta, solo se vuelve a disponer como texto. Trata el resultado como una forma de leer y auditar el script, no como un reemplazo verificado del archivo que se te sirvió originalmente.
¿Se sube mi código a algún sitio?
No. Todo se ejecuta en tu navegador. El JavaScript que pegas y cualquier archivo que abras se procesan localmente, nunca se transmiten ni se almacenan, y desaparecen cuando cierras la pestaña, así que los bundles y el código privado se quedan en tu dispositivo.
Herramientas relacionadas
Sigue con el resto del kit de herramientas de datos y formatos.