Formateador y minificador de JavaScript

¿Qué es un formateador de JavaScript?#

Un formateador de JavaScript toma código difícil de leer —salida minificada de un bundler, un fragmento colapsado copiado de un chat, o simplemente un archivo editado por cinco personas con cinco hábitos de sangría distintos— y lo reescribe para que la estructura sea visible. La sangría coincide con el anidamiento, los operadores reciben un espaciado consistente y las sentencias terminan donde esperas. Un buen formateador también hace lo contrario: eliminar todo lo no esencial cuando necesitas el payload más pequeño posible.

Esta página hace ambos trabajos, y es honesta sobre cómo funciona cada uno. Formatear se basa en la build standalone de Prettier con el analizador Babel, el mismo motor que muchos equipos ejecutan en su editor al guardar, así la salida de aquí coincide con la que produciría tu proyecto. Minificar es deliberadamente conservador: elimina comentarios y colapsa espacios en blanco manteniendo todos los saltos de línea, así la inserción automática de punto y coma (ASI) nunca se rompe. No es un minificador a nivel de tokens como esbuild o terser: no renombra variables, no elimina código muerto ni altera nombres de propiedades. Eso hace que sea seguro devolver el resultado directamente a un motor de JS, pero es la herramienta equivocada para encoger un bundle de producción. Conocer la diferencia es la clave para usarla bien.

Cómo usarlo#

1. Pega tu JavaScript en el panel JavaScript de la izquierda, o pulsa Ejemplo para cargar un ejemplo breve.
2. Elige un estilo de Sangría en la barra de herramientas: 2, 4 o tab. Dos espacios es el valor por defecto casi universal en proyectos modernos; elige tab solo si vas a pegar el resultado en un editor configurado para tabuladores.
3. Pulsa una acción:
   • Formatear: reimprime el código a través de Prettier con la sangría elegida. Los puntos y coma se emiten por defecto, igualando el comportamiento estándar de Prettier.
   • Minificar: elimina los comentarios de línea // y los de bloque /* */, colapsa las secuencias de espacios y tabuladores y recorta el espacio en blanco final de cada línea. Los saltos de línea se conservan a propósito.
4. Lee el resultado en el panel de Salida a la derecha. Usa Copiar en la cabecera de salida para llevártelo. Limpiar vacía ambos paneles.

Si Formatear no puede analizar tu entrada (un corchete perdido, un literal de plantilla sin terminar), la barra de estado muestra el mensaje de error de Prettier en lugar de producir una salida rota, así arreglas el problema real en vez de perseguir un reformateo engañoso.

Características principales#

• Motor Prettier de verdad. Formatear ejecuta la build standalone de Prettier con los plugins de Babel + estree, no un embellecedor casero. Lo que obtienes aquí es lo que produce prettier --write.
• Minificado seguro frente a ASI. Los saltos de línea se conservan durante el minificado, así una línea que dependía de la inserción automática de punto y coma sigue funcionando. Eliminar los saltos de línea a ciegas es justo cómo los «minificadores» caseros introducen fallos.
• Consciente de cadenas, regex y plantillas. El eliminador de comentarios sabe distinguir // dentro de una cadena de un comentario de línea real, y / como división del inicio de un literal regex, así nunca muerde tu código.
• Dos paneles, listos para copiar. Entrada y salida lado a lado; la salida es de solo lectura con copiado en un clic.
• Se ejecuta por completo en tu navegador. No hay backend ni subida. Prettier va empaquetado en la página y se carga bajo demanda, así el script sigue cumpliendo una política de seguridad de contenidos estricta de solo self.

Ejemplo detallado#

Una función copiada de un gist antiguo, con comentarios y sangría inconsistente:

Entrada:

function fetchUser(id){/*legacy: returns null when missing*/
  const url="https://example.com/users/"+id
    const opts={method:"GET",cache:"no-store"}
return fetch(url,opts).then(r=>r.json())}

Pulsa Formatear con 2 espacios:

function fetchUser(id) {
  /*legacy: returns null when missing*/
  const url = "https://example.com/users/" + id;
  const opts = { method: "GET", cache: "no-store" };
  return fetch(url, opts).then((r) => r.json());
}

Prettier arregla la sangría torcida, espacia los operadores de forma consistente y añade puntos y coma, pero deja el comentario de bloque exactamente donde estaba. Ahora pulsa Minificar sobre la entrada original:

function fetchUser(id){
const url="https://example.com/users/"+id
const opts={method:"GET",cache:"no-store"}
return fetch(url,opts).then(r=>r.json())}

El comentario ha desaparecido, la sangría extra se ha ido, pero cada sentencia sigue en su propia línea. Fíjate en lo que no ocurrió: fetchUser no se acortó, "GET" no se transformó, la función flecha conservó su lista de parámetros. Es una compresión legible, segura para pegar de vuelta en una etiqueta script, no el mangueo agresivo que haría un bundler en tiempo de build.

Preguntas frecuentes#

¿Por qué Minificar no renombra variables ni encoge mi bundle?#

Porque hacerlo correctamente requiere una pasada completa de análisis y generación de código (análisis de ámbito, seguimiento de propiedades, detección de efectos secundarios). El minificado de esta herramienta es intencionadamente un escáner: es rápido, ligero de dependencias y demostrablemente incapaz de cambiar el comportamiento en tiempo de ejecución. Para un bundle de producción, ejecuta un bundler real sin conexión; usa esta página para limpiezas rápidas, pegar en un documento o preparar un fragmento que otra persona va a leer.

¿El minificador elimina los comentarios dentro de cadenas?#

No. El escáner recorre el fuente carácter a carácter y vigila si está dentro de una cadena con comilla simple, comilla doble, un literal de plantilla o un literal regex. Un // que aparece dentro de cualquiera de ellos se trata como texto y se deja intacto; solo se eliminan los comentarios reales.

¿Gestiona TypeScript o JSX?#

La ruta de Formatear usa el analizador Babel, que acepta JSX. Las anotaciones de tipo de TypeScript y la sintaxis específica de .ts/.tsx no están activadas aquí: si las necesitas, esta herramienta reportará un error de análisis en lugar de producir una salida equivocada en silencio. Reserva esta página para JavaScript plano.

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

No. Todo se ejecuta en la pestaña que estás mirando. Prettier va empaquetado con la página y se importa bajo demanda; tu texto fuente se analiza en memoria y nunca se envía por la red.