Embellecedor de JavaScript

Qué hace esta herramienta

Toma JavaScript minificado o mal formateado y lo devuelve legible: saltos de línea, indentación consistente y expresiones separadas. Admite JavaScript, TypeScript y JSX, cada uno con su propio analizador, y corre entero en tu navegador.

Es el inverso del minificador de JavaScript.

El límite que hay que entender antes de empezar

Formatear no deshace la minificación. Son dos cosas distintas y esta es la confusión más cara:

• Sí se recupera la estructura: dónde empieza y acaba cada función, qué está anidado dentro de qué, dónde está cada rama del condicional. Eso convierte un archivo ilegible en uno navegable.
• No se recuperan los nombres. Un minificador renombra calcularTotalPedido a n. Esa información no está en el archivo: se tiró al minificar. Ninguna herramienta la puede devolver, y desconfía de la que diga lo contrario.

Si necesitas el código real y no solo su forma, la vía es el sourcemap. Muchos bundles publican un .map junto al .js; con él, las herramientas de desarrollo del navegador te muestran el original con sus nombres. Búscalo antes de resignarte a leer variables de una letra.

Elige bien el dialecto

Los tres de arriba usan analizadores distintos y no son intercambiables:

• JavaScript para .js y .mjs normales.
• TypeScript cuando hay anotaciones de tipo, interfaces o genéricos. No es JavaScript válido, así que el analizador estándar lo rechaza.
• JSX cuando hay etiquetas dentro del código, como en React o Preact. Sin marcarlo, el <div> dentro de una función parece un operador menor-que y todo se rompe.

Las dos opciones que sí importan

Prettier es opinionado por diseño: casi no deja decidir, y ese es exactamente su valor —dos personas con el mismo archivo obtienen el mismo resultado, y el diff deja de llenarse de cambios de estilo.

Las dos preferencias que sí varían de verdad entre equipos están disponibles aquí:

• Comillas simples o dobles. Prettier usa dobles por defecto; buena parte del ecosistema JavaScript prefiere simples.
• Punto y coma. Ponerlos siempre o no ponerlos nunca. Ambas posturas son coherentes; lo que da problemas es mezclarlas.

Y el ancho máximo de línea, que decide cuándo una llamada larga se parte en varias líneas.

Cuándo se usa

• Leer el bundle de producción para entender por qué algo falla solo en el sitio publicado.
• Auditar un script de terceros antes de meterlo en una página, sobre todo si viene de un proveedor de analítica o de un widget incrustado.
• Normalizar el estilo de un archivo que han tocado varias personas antes de commitearlo.
• Arreglar un diff ilegible en el que alguien versionó el archivo minificado.

Sobre el formateador

Usa Prettier (licencia MIT) compilado para navegador. El analizador se descarga solo cuando eliges su dialecto, así que abrir esta página no baja el de TypeScript si no lo necesitas.