Formatear JavaScript

Cómo funciona

Cuando revisa el script de un sitio, busca un error o intenta entender código que copió de otro lado, el JavaScript suele llegar como una sola línea larga donde cientos de funciones van pegadas con puntos y coma. Péguelo en el panel izquierdo. En el derecho, cada instrucción queda en su propia línea; el cuerpo de las funciones, los bloques if/else y los ciclos llevan la sangría que eligió, y los objetos y arreglos se abren para que sus valores se lean. Usted decide si la llave de apertura se queda en la misma línea (if (a) {) o baja a la siguiente. Los espacios dentro de cadenas, plantillas literales (`...`) y expresiones regulares (/a{2}/) no se tocan: el código se comporta exactamente igual y solo cambia su presentación. Los nombres cortos que dejó un minificador (a, b, n) no vuelven, porque los nombres originales ya no están en el archivo, pero la estructura se vuelve legible. TypeScript y JSX suelen quedar bien; con las anotaciones de tipo no hay garantía. Si cambia ¿Qué quiere hacer? a Minificado, la herramienta hace lo contrario: quita espacios y comentarios y acorta los nombres locales; si el código no se puede leer, muestra la línea y la columna del problema.

Esta herramienta también se busca como formatear javascript, javascript formatter online, embellecer javascript, indentar javascript, js beautifier, formatear typescript.

¿Qué es JavaScript?

JavaScript es el lenguaje de programación que hace que las páginas web reaccionen: abrir un menú al tocar un botón, revisar un formulario antes de enviarlo, actualizar al momento el total de un carrito. El navegador lee el código sin fijarse en líneas ni espacios; los puntos y coma y las llaves separan las instrucciones. Por eso el mismo código puede ir con sangría legible o en una sola línea, y los sitios publicados suelen entregar esta segunda versión.

¿Qué es Beautifier?

Un beautifier (embellecedor o formateador) solo cambia cómo se ve el código, nunca lo que hace: añade saltos de línea, da sangría a los bloques y pone espacios alrededor de los operadores. A diferencia de herramientas de desarrollo como Prettier, no pide archivo de configuración ni instalación: se pega el código una vez y se toma el resultado. Esta página ejecuta la biblioteca libre js-beautify dentro de su navegador.

¿Qué diferencia hay entre formatear y minificar JavaScript?

Formatear ordena el código para las personas: añade saltos de línea y sangría y no cambia ningún nombre ni valor. Minificar comprime el código para el navegador: quita espacios y comentarios, reduce los nombres de variables locales a una letra y elimina el código sin uso. El formateo se puede deshacer por completo; al minificar se pierden para siempre los comentarios y los nombres originales, y formatear código minificado solo devuelve la estructura.

¿Formatear cambia el código?

En el modo con sangría, no: solo se añaden espacios, saltos de línea y sangría, y JavaScript los ignora. El código formateado funciona igual. Solo hay que cuidar las líneas sin punto y coma: JavaScript toma algunos saltos de línea como fin de instrucción, por eso el formateador nunca junta líneas existentes de una forma que cambie su significado.

La herramienta no ejecuta su código ni revisa su sintaxis; el código con errores también recibe sangría. Formatear tampoco recupera los nombres originales: si un minificador convirtió precioTotal en n, verá n en el código formateado. Solo un mapa de código fuente (source map), si el desarrollador publicó uno, permite volver al original.

¿Con sangría o minificado?

El código con sangría sirve para leer, buscar errores y trabajar en equipo. El código minificado sirve para publicar: cuanto más ligero llega el script al navegador, antes responde la página.

La opción Minificado hace una pasada estándar de terser: quita espacios y comentarios, acorta los nombres locales y elimina código muerto; los comentarios de licencia /*! se conservan. Para decidir usted si se acortan los nombres o se quitan las llamadas a console.log, y para ver una comparación de bytes antes y después, use la herramienta Minificar JavaScript.

• Leer el .min.js de otra persona → Con sangría
• Dejar su propio código con sangría uniforme → Con sangría
• Publicar → Minificado

Preguntas frecuentes

¿Cómo hago legible un JavaScript minificado?

Pegue el código en el panel izquierdo de esta página. Cada instrucción pasa a su propia línea y los bloques reciben sangría. Los nombres de variables acortados no vuelven, pero la estructura se vuelve legible. Copie el resultado o descárguelo como archivo .js.

¿Puedo formatear TypeScript o React (JSX)?

Casi siempre sí: las etiquetas JSX y la mayor parte de la escritura de TypeScript reciben bien la sangría. El formateador no entiende los tipos, eso sí; en definiciones de tipo complejas o genéricos (<T>) la sangría puede no ser la que espera. El significado del código nunca cambia, solo se mueven los espacios.

¿Formatear puede romper mi código?

No. En el modo con sangría solo se añaden espacios y saltos de línea; cadenas, plantillas literales y expresiones regulares quedan intactas. JavaScript ignora los espacios, así que el código funciona igual.

¿Mi código se envía a un servidor?

No. Tanto el formateo como la minificación se hacen en su navegador; su código no sale de esta página.