Formateador y minificador de JavaScript

Formatea un script para leerlo o minifícalo para publicarlo. Los motores — Prettier 3.9.6 para el formato y Terser 5.44.0 para la minificación — se sirven desde este sitio y se ejecutan en el navegador: el fragmento no sale de la página.

Se ejecuta localmente en tu navegador

Cómo formatear y minificar JavaScript en el navegador

Format reescribe un fragmento para que una persona lo lea; Minify lo reescribe para que el servidor envíe menos bytes. El formato lo hace Prettier 3.9.6 y la minificación Terser 5.44.0, ambos servidos desde el directorio /static/vendor de este sitio y trabajando solo con el texto de tu pestaña.

El selector de sangría pertenece solo a Format: tabulador, 2, 4 u 8 espacios, con 4 por defecto. Formatear deja el programa intacto: cambia comillas, espacios y saltos de línea. Minificar además comprime expresiones y acorta nombres locales, así que el resultado hay que probarlo como cualquier código reescrito.

  1. Pega el script en el cuadro. El marcado también vale: si el primer carácter visible es <, lo recibe el formateador de HTML de la página.
  2. Elige la sangría — tabulador, 2, 4 u 8 espacios — y pulsa Format para obtener código legible.
  3. Pulsa Minify para la versión compacta. La línea bajo el resultado indica el tamaño, por ejemplo «128 → 77 caracteres · 40 % menos».
  4. Copia el resultado con Copy y vacía el cuadro con Clear. Si el script no se puede analizar, el mensaje del motor sustituye al resultado e indica la línea y la columna.

Qué motor ejecuta cada botón y qué cambia en el código

Qué cambia Format en un fragmento

Prettier analiza el script y lo vuelve a imprimir con un estilo fijo: las cadenas quedan entre comillas dobles, los puntos y coma que faltaban se añaden, se aplica la sangría elegida y las líneas de más de 80 columnas se parten. Una función de 300 sentencias volvió sentencia por sentencia, comentarios incluidos: solo cambió la disposición.

Al imprimir a través de un analizador, el resultado es predecible también fuera de la página: lo que aquí se formatea también se analiza en Node.js o en un empaquetador, y lo que falla falla allí por el mismo motivo. Los errores son los del analizador, como «Unexpected token (1:8)» con la línea señalada, que es lo que devuelve const x: number = 1: al analizador babel le falta el complemento de TypeScript.

Qué cambia Minify y qué conviene volver a probar

Terser hace una pasada de compresión y acorta nombres dentro de las funciones; los nombres de nivel superior se conservan, así que una función exportada mantiene el nombre que importan otros módulos. Los comentarios se eliminan salvo los carteles que empiezan por /*! o contienen @license. La plegadura de constantes llega más lejos: una función de 300 líneas que sumaba 299 constantes volvió como «function longName(n,e){return n+e+299}», 11.534 caracteres reducidos a 38.

Por eso el código minificado ya no es el que escribiste. El contenido de cadenas y plantillas se conserva, los campos privados de clase, el encadenamiento opcional y los literales BigInt sobreviven al proceso, y una plantilla sin sustituciones puede volver como cadena normal. Ejecuta el archivo minificado una vez antes de publicarlo; la línea de tamaño muestra qué aportó la pasada.

Sintaxis moderna y límites de los analizadores

El formato entiende JSX, la línea shebang, los atributos de importación como import data from "./d.json" with { type: "json" } y el await de nivel superior. La minificación analiza primero como script clásico y reintenta como módulo ES si falla, de modo que import, export y el await de nivel superior se minifican, mientras que construcciones como with, propias del modo no estricto, siguen la ruta de script. Si fallan los dos intentos se muestra el mensaje del intento que llegó más lejos en el archivo.

Dos límites conviene conocerlos antes de pegar. Las anotaciones de TypeScript no entran en el análisis, así que const x: number = 1 termina en error de sintaxis en lugar de una línea formateada. Y Terser no analiza JSX: un componente JSX se formatea pero se niega a minificarse, con «Unexpected token: operator (<) (line 1, column 19)» señalando la primera etiqueta; minifica el build ya transpilado.

Descargas, velocidad y privacidad

La primera pulsación de Format descarga tres archivos de este sitio — Prettier standalone y los complementos babel y estree, unos 600 KB —, y la primera de Minify descarga el paquete de Terser, cerca de 1 MB. Después responde la caché del navegador: las siguientes pulsaciones no hacen ninguna petición y la página sigue funcionando con la red desconectada.

Un módulo de 68 KB con 500 funciones exportadas se formateó en unos 250 ms y se minificó en unos 230 ms en Chrome de escritorio. Nada de lo que pegas se sube: las únicas peticiones de la herramienta son sus propios archivos de motor, y el texto, el árbol sintáctico y el resultado se quedan en la pestaña.

Herramientas recientes: