Formateador de JavaScript (JavaScript Beautifier)

Pega JavaScript minificado o desordenado y obtén código limpio con una sangría coherente, o compáctalo en una versión minificada. Elige la sangría, el estilo de llaves y el ajuste de línea. Tu código se queda en tu navegador.

Última actualización: 31 de octubre de 2026

Cómo usar Formateador de JavaScript (JavaScript Beautifier)

1. Pega tu código en el cuadro de la izquierda o pulsa Subir .js para abrir un archivo.
2. Elige las opciones: tamaño de sangría, estilo de llaves, líneas en blanco y ajuste de línea. Marca JSX para componentes de React.
3. Pulsa Embellecer. El código formateado aparece a la derecha y se actualiza mientras editas.
4. O pulsa Minificar para eliminar comentarios y espacios en blanco y ver cuántos bytes ahorras.
5. Copia el resultado o descárgalo como archivo .js.

Comparación de estilos de llaves

La misma función formateada con cada estilo de llaves:

if (ok) {
    run();
} else {
    stop();
}

if (ok)
{
    run();
}
else
{
    stop();
}

if (ok) {
    run();
}
else {
    stop();
}

Collapse, preserve inline funciona como collapse, pero deja en una sola línea los bloques cortos como { x: 1, y: 2 } o if (a) { b(); } cuando los escribiste así.

Qué elimina el minificador y qué conserva

• Se elimina: los comentarios de línea, los comentarios de bloque (excepto los comentarios de licencia /*! si la opción está activada), la sangría, las líneas en blanco y los espacios que no son necesarios entre tokens.
• Se conserva tal cual: el contenido de las cadenas, los template literals (incluidas las expresiones ${…} anidadas) y los literales de expresiones regulares como /\/\*.*\*\//g.
• Se conserva por seguridad: un salto de línea siempre que la inserción automática de punto y coma pueda depender de él, por ejemplo después de return, break, throw y yield, alrededor de ++ y --, y entre dos instrucciones escritas sin punto y coma. Se mantiene un espacio entre tokens que de otro modo se fusionarían, como a - -b o 1 .toString().
• No se hace: renombrar variables, eliminar código muerto ni reescribir expresiones. Para eso se necesita un minificador completo basado en un parser, como Terser, esbuild o SWC, que normalmente ahorran otro 20 a 40 por ciento.

Leer código minificado: consejos prácticos

• Primero embellece el código y luego usa la búsqueda del navegador para encontrar literales de cadena, como mensajes de error o URL, que sobreviven intactos a la minificación.
• Los nombres de una sola letra como e, t y n suelen ser parámetros de función renombrados por el minificador. Renómbralos en tu copia a medida que descubras qué hacen.
• Patrones como !0 y !1 significan true y false, void 0 significa undefined, y a && b() es una forma compacta de if (a) b().
• Si hay un comentario //# sourceMappingURL=, es posible que el código fuente original esté disponible en las herramientas para desarrolladores del navegador, lo cual es mucho mejor que cualquier formateador.

¿Qué ajustes corresponden a las guías de estilo populares?

En un proyecto de equipo, los ajustes importan menos que aplicarlos en todas partes. Una vez elegido un estilo, un formateador en tu editor o un hook de pre-commit mantiene todos los archivos coherentes automáticamente.

Preguntas frecuentes

Herramientas relacionadas

Ver todas las de Formateadores y validadores de código →