Embellecedor de JavaScript en línea para código web más limpio

Introducción

El código JavaScript que fue minificado para producción, o que simplemente se escribió a las apuradas sin prestarle atención al formato, puede resultar realmente difícil de leer: sin sangría uniforme, con varias instrucciones apretadas en una misma línea y bloques que no se distinguen unos de otros a simple vista. Embellecer ese código lo reformatea — le agrega sangría, saltos de línea entre instrucciones y un espaciado parejo — sin cambiar lo que hace. La lógica, los nombres de las variables y el comportamiento quedan exactamente iguales; lo único que cambia es cómo se ve en pantalla. Para quien está aprendiendo a leer JavaScript y no solo a escribirlo, esta diferencia pesa: el mismo script puede parecer intimidante en una sola línea densa y volverse completamente accesible apenas se abre en instrucciones y bloques bien sangrados.

Cómo da formato esta herramienta a su código

La herramienta recorre el código pegado parte por parte y reconoce cadenas de texto, comentarios, corchetes y operadores como elementos distintos, en lugar de insertar saltos de línea buscando patrones en el texto. Eso es lo que le permite distinguir correctamente entre una / que abre un comentario, otra que forma parte de una expresión regular y otra que indica una división, algo que un formateador puramente textual haría mal. Reconstruye la sangría de manera uniforme (tres espacios por nivel de anidamiento) e inserta sus propios saltos de línea según la estructura del código, de modo que cada instrucción y cada bloque quedan en su propia línea. Los comentarios no se eliminan: se conservan y se reformatean junto con el código, así que la explicación de una función o un encabezado de licencia siguen estando en el resultado.

Los punto y coma se reacomodan donde están; no se agregan ni se quitan. JavaScript permite que una instrucción termine sin punto y coma en muchos casos — la especificación oficial del lenguaje cubre ese hueco automáticamente mediante una regla llamada inserción automática de punto y coma — y hay programadores que escriben así a propósito. Esta herramienta no toma partido por ninguno de los dos estilos: si su código original no lleva punto y coma, el resultado formateado tampoco los va a llevar; si los lleva, quedan exactamente donde estaban, apenas reacomodados alrededor de los nuevos saltos de línea y la nueva sangría. Conviene tenerlo presente si usa la herramienta para enseñar o entender cómo terminan las instrucciones en JavaScript, porque nunca va a "corregir" un estilo para convertirlo en el otro.

Qué conviene saber antes de usarla

Hay dos cosas que vale la pena tener en cuenta antes de pegar código real acá:

• Las líneas en blanco no se conservan. El formateador decide dónde van los saltos de línea según la estructura del propio código, no según dónde usted haya dejado líneas en blanco al pegarlo. Si usaba esas líneas para separar visualmente las secciones de un script, esa separación no necesariamente sobrevive al formateo; la lógica y todas las instrucciones van a seguir ahí, pero sin su agrupación original.
• Las plantillas de cadena (texto entre acentos graves) no se reconocen como cadenas. El JavaScript moderno permite armar cadenas con acentos graves y expresiones incrustadas, como `Hello, ${name}`. El formateador de esta herramienta no trata el texto delimitado por acentos graves igual que al texto entre comillas normales, así que el código que depende de plantillas de cadena puede salir mal formateado en esas partes. Si un script las usa, revise con atención ese tramo del resultado después de embellecerlo, o dele formato al resto del script y deje esas líneas tal como estaban.

Ninguno de los dos casos cambia lo que hace su código original: usted siempre trabaja sobre lo que pegó, y nada se modifica salvo que copie el resultado formateado de vuelta a su proyecto.

Cuándo es esta la herramienta indicada

• Leer el script minificado de otra persona. Mirar el JavaScript de un sitio público desde las herramientas de desarrollo del navegador suele mostrar un archivo denso y sin formato; pegarlo acá y embellecerlo permite estudiar de verdad cómo funciona, un uso genuino de alfabetización digital y no un simple paso de limpieza.
• Revisar el código que entregó un alumno. Un script que llega sin un formato consistente se lee y se corrige más lento; embellecerlo primero hace que corregirlo y comentarlo sea mucho más rápido y sencillo.
• Ordenar su propio código antes de entregar un trabajo. Un formato consistente le facilita al docente — o a usted mismo dentro de unos meses — seguir la lógica.
• Preparar un ejemplo de código para una clase. Una función escrita rápido mientras se planifica la clase suele quedar densa y difícil de seguir en el proyector; embellecerla antes deja un código limpio y parejamente sangrado, mucho más fácil de leer para el curso desde el fondo del aula.

Para código que depende mucho de las plantillas de cadena, o para una base de código moderna y grande donde necesite una salida correcta garantizada, el formateador integrado de un editor de código es una opción más confiable — vea la limitación de más arriba. Esta herramienta rinde mejor con scripts del tamaño habitual en el aula.

Ejemplo

Un alumno encuentra en un sitio de tutoriales un script interactivo corto, minificado en una sola línea densa, y quiere entender cómo funciona antes de adaptarlo a su propio proyecto. Al pegarlo en esta herramienta, el script se despliega en instrucciones y bloques bien sangrados, y ahí sí se puede leer la lógica — qué función se ejecuta con qué evento, dónde empieza y dónde termina un bucle — en vez de recorrer con la vista una línea de código sin cortes.

Preguntas frecuentes

¿Embellecer el código cambia cómo se ejecuta?

No. Solo cambia el formato — la sangría, los saltos de línea y el espaciado —; la lógica y el comportamiento siguen siendo los mismos.

¿Se conservan mis comentarios?

Sí. Los comentarios, incluidos los encabezados de licencia, se conservan y se reformatean junto con el resto del código.

¿Maneja bien las plantillas de cadena (texto entre acentos graves)?

No de forma confiable. El código que usa `like this ${example}` puede salir mal formateado en esas partes — revise ese tramo del resultado o deje esas líneas sin formatear.

¿Mi código se guarda en algún lado?

No. El código pegado se procesa para producir el resultado formateado y después no se almacena; solo queda registrado que la herramienta fue usada, no el código en sí.

¿Agrega o quita punto y coma?

No. Los punto y coma quedan exactamente como aparecen en su código original, apenas reacomodados alrededor de los nuevos saltos de línea y la nueva sangría; si su código no lleva ninguno, el resultado tampoco va a llevarlos.

¿Puedo embellecer varios scripts a la vez?

Pegue y embellezca un script por vez. Si necesita darles formato juntos, combine antes los archivos, o repita el proceso con cada uno.

¿Qué herramientas relacionadas puedo usar?

Use CSS Beautifier o HTML Beauty para dar formato a otros tipos de código, o CSS Minifier cuando ya esté listo para comprimir CSS para producción.