Formateador de JavaScript

Cómo embellecer JavaScript o TypeScript

1. Pega tu código en el recuadro de arriba, una única línea minificada, un fragmento desordenado copiado de un bundle, o un archivo TypeScript con tipos.
2. Deja Lenguaje en Detección automática (o elige JavaScript / TypeScript), luego ajusta tu estilo: Sangría (espacios o tabulaciones), Tamaño de sangría, Longitud máxima de línea, si terminar las sentencias con punto y coma, y comillas simples o dobles.
3. Pulsa el botón Formateador de JavaScript y el código formateado aparece al instante debajo, con nueva sangría y espaciado consistente. Si el código tiene un error de sintaxis genuino, obtienes un mensaje claro con la línea y columna en lugar de una salida ilegible.
4. Pulsa Copiar al portapapeles para llevarte el resultado, o pega código nuevo y ejecútalo de nuevo.

Sin instalación, sin paso de compilación, sin editor que abrir, solo pega y lee.

Por qué formatear JavaScript

El código sacado de un bundle de producción, copiado del panel de Fuentes de un navegador, pegado de un hilo de Slack, o generado por una herramienta suele ser un único bloque denso y sin sangrar, cada sentencia apretada sin ninguna estructura visual. Leerlo, revisarlo en un pull request, o averiguar dónde termina una función y empieza la siguiente significa forzar la vista sobre un muro de texto. Volver a sangrarlo a mano es lento y fácil de equivocar sutilmente.

Esta herramienta toma ese mismo código y lo organiza como lo escribirías a mano: sangría consistente, una sentencia por línea, bloques y cuerpos de función con un nivel más de sangría, líneas largas partidas al ancho que elijas. Usa Prettier, el mismo formateador opinado que se ejecuta en editores y pipelines de CI en toda la industria, así que el resultado coincide con lo que la mayoría de los proyectos de JavaScript y TypeScript ya esperan.

Embellecer código minificado: qué puede y qué no puede restaurar

Embellecer JavaScript minificado restaura todo lo relativo a su formato, los saltos de línea, la sangría y el espaciado que un minificador eliminó para ahorrar bytes vuelven por completo, y de repente el código es legible de nuevo. Eso es genuinamente útil para depurar un script de terceros o entender un bundle.

Ten clara la limitación, eso sí: un minificador también renombra las variables a nombres cortos sin sentido (a, b, c) y borra todos los comentarios, y esa información se perdió de forma permanente. Ningún formateador puede recuperar los nombres originales de las variables, los comentarios originales, ni la estructura original del archivo, porque ya no existen en el código que estás pegando. Así que esta herramienta hace legible el código minificado, no reconstruye el código fuente original.

Privado, porque el código sin publicar nunca sale de tu dispositivo

El JavaScript o TypeScript que un desarrollador pega en una herramienta web es a menudo de lo más sensible que maneja, puede contener claves de API, URLs internas, funciones sin publicar, o lógica de negocio propietaria. Muchos sitios de “formateador de JS online gratis” en realidad envían el contenido pegado a un backend de todas formas. Esta herramienta ejecuta todo el paso de formateo usando Prettier cargado una vez en tu propia pestaña del navegador (una descarga única desde este sitio, nunca un CDN de terceros), nada se transmite, registra ni almacena, y funciona igual sin conexión una vez cargada.

Usos habituales

• Desminificar un script de un bundle o del panel de Fuentes de un navegador para poder leerlo y depurarlo de verdad.
• Reformatear un fragmento desordenado o mal sangrado antes de pegarlo en un pull request, un gist o documentación.
• Normalizar un archivo al estilo de un equipo (2 o 4 espacios, punto y coma sí o no, comillas simples o dobles) con un clic.
• Limpiar TypeScript con anotaciones de tipo, interfaces y enums de la misma forma que limpiarías JavaScript normal.
• Formatear un payload JSON incrustado en tu código, consulta el compañero Formateador y Validador de JSON si parte de lo que estás mirando es JSON en lugar de JS.
• Comparar dos versiones de un archivo para ver exactamente qué cambió, embellece ambas primero, luego usa el Comparador de Textos para que la comparación muestre cambios reales, no ruido de espacios en blanco.