Cómo usar: Formateador de JavaScript
- Pega JavaScript (o JSON/JSX) en JavaScript de entrada, arrastra un archivo
.jso haz clic en Ejemplo. - Elige la sangría, un ancho de ajuste opcional y el estilo de llaves. La salida se actualiza al instante.
- Copia o descarga el resultado. Usa el modo Minificar para quitar comentarios y espacios de un script pequeño.
¿Qué es un formateador de JavaScript?
Un formateador de JavaScript (o embellecedor) vuelve a aplicar sangría al código y coloca sentencias, propiedades de objetos y bloques en líneas separadas. Su uso más común es desminificar paquetes de producción para poder leerlos al depurar, pero también sirve para ordenar un fragmento de Stack Overflow, un bookmarklet o código copiado de un chat. Esta herramienta usa js-beautify, que entiende la sintaxis moderna: funciones flecha, clases, plantillas literales, async/await, encadenamiento opcional, módulos ES y JSX.
Estilos de llaves
| Opción | Resultado |
|---|---|
| En la misma línea (K&R / “1TBS”) | if (ok) {: la convención de la mayoría de guías de estilo de JavaScript y de Prettier. |
| En la misma línea, mantener en línea | Igual que la anterior, pero los bloques cortos como { a: 1 } se quedan en una sola línea. |
| En la línea siguiente (Allman) | Las llaves de apertura van en su propia línea, habitual en proyectos de C#. |
| else en nueva línea | } y else en líneas separadas (estilo similar a Stroustrup). |
Embellecer no es desofuscar
Minificadores como Terser o esbuild renombran las variables locales a una sola letra (function(e,t){…}). Dar formato restaura la disposición del código, pero no puede recuperar los nombres originales ni los comentarios: esa información ya no existe. Si el sitio publica mapas de código fuente (//# sourceMappingURL=), las DevTools de tu navegador pueden mostrar los fuentes originales. El código ofuscado a propósito (arrays de cadenas, empaquetado con eval) sigue siendo difícil de leer aunque tenga formato.
Acerca del minificador
El modo Minificar es un minificador seguro de espacios y comentarios, no un compresor completo. Tokeniza bien tu código (cadenas, plantillas literales, expresiones regulares), elimina comentarios y espacios, pero mantiene un salto de línea cuando quitarlo podría cambiar la inserción automática de punto y coma, por ejemplo después de return o antes de ++. En cada resultado se hacen dos comprobaciones: la secuencia de tokens debe ser idéntica a la entrada y la salida debe seguir siendo analizable. Espera un ahorro del 20–40 %; para paquetes de producción, una herramienta de build como Terser o esbuild también renombra variables y elimina código muerto, con reducciones mucho mayores.
Problemas habituales
- “No se puede analizar como JavaScript puro”: aparece con TypeScript, JSX o un error de sintaxis real. El formateo sigue funcionando; minificar requiere JavaScript válido.
- JSON se formatea bien aquí, pero el Formateador de JSON también lo valida y señala el error exacto.
- ¿Quieres comparar un archivo antes y después de un cambio? Pega ambas versiones en el Comparador de diferencias.
También se busca como: formateador javascript, embellecer javascript, js beautifier, desminificar js, formatear código javascript, minificar javascript, formateador jsx, pretty print javascript.
Herramientas que combinan con: Formateador de JavaScript
- Código a Imagen — Pega un fragmento y obtén una captura de código pulida en segundos: resaltado de sintaxis para JavaScript, TypeScript, Python, CSS, HTML, JSON, SQL, Bash, Go y PHP, a elegir entre varios temas, un marco de ventana con el nombre del archivo, un fondo degradado o transparente, relleno y números de línea.
- Formateador HTML — Pega HTML minificado o desordenado y obtén HTML limpio y con sangría coherente, incluidos los bloques <style> y <script> incrustados.
- Formateador de CSS — Convierte una hoja de estilos minificada en CSS legible, con una propiedad por línea y bloques @media correctamente anidados.
- Probador de expresiones regulares — Escribe un patrón y observa cómo se resaltan las coincidencias en tiempo real en tu texto de prueba.
Preguntas frecuentes
¿Puede esta herramienta desminificar JavaScript de una web?
.min.js y se mostrará con un diseño legible. Los nombres de variables acortados por el minificador (como e, t, n) no se pueden restaurar, y los comentarios se pierden para siempre.