Formateador y minificador de código

¿Qué es Formateador y minificador de código?

Un formateador y minificador de código en línea y gratuito que embellece o minifica HTML, CSS y JavaScript sin salir nunca de tu navegador. Elige el lenguaje y luego selecciona Embellecer para volver a indentar código desordenado o en una sola línea con sangría de 2 espacios, 4 espacios o tabulación, o Minificar para comprimirlo. El embellecido está impulsado por js-beautify; la minificación de JavaScript usa Terser para ofuscar nombres y reducir el tamaño, mientras que CSS y HTML se compactan eliminando comentarios y colapsando espacios redundantes. Los desarrolladores web lo usan para ordenar código de terceros minificado y hacerlo legible, reducir hojas de estilo y scripts antes de desplegar, y limpiar fragmentos pegados desde la salida de compilación.

Cómo usar Formateador y minificador de código

1. Elige el lenguaje de tu código: HTML, CSS o JS.
2. Elige la acción: Embellecer para formatear o Minificar para comprimir.
3. Para Embellecer, elige la sangría: 2 espacios, 4 espacios o Tabulación.
4. Pega o escribe tu código en el cuadro de entrada: la salida se actualiza automáticamente.
5. Usa el botón Copiar para llevarte el resultado, o haz clic en Limpiar para vaciar la entrada y empezar de nuevo.

Ejemplos

a{color:red;font-weight:bold}

a {
  color: red;
  font-weight: bold
}

function add(first, second) {
  return first + second;
}

function add(n,d){return n+d}

<ul>
  <li>One</li>
  <li>Two</li>
</ul>

<ul><li>One</li><li>Two</li></ul>

Preguntas frecuentes

¿Se sube mi código a un servidor?

No. El embellecido y la minificación ocurren todos localmente en tu navegador: js-beautify y Terser se cargan como scripts y se ejecutan en tu dispositivo. Tu código nunca sale de tu máquina, y la herramienta sigue funcionando sin conexión.

¿Qué lenguajes y acciones se admiten?

Tres lenguajes - HTML, CSS y JavaScript - cada uno con dos acciones: Embellecer (formatear con la sangría elegida) y Minificar (comprimir). JavaScript se minifica con Terser, mientras que CSS y HTML se compactan eliminando comentarios y colapsando espacios.

¿Qué sangría puedo elegir?

Al embellecer puedes volver a indentar con 2 espacios, 4 espacios o un carácter de tabulación. La sangría solo se aplica al Embellecer; Minificar elimina los espacios e ignora ese ajuste.

¿Por qué al minificar mi JavaScript apareció un error?

Terser analiza tu JavaScript antes de minificar, así que un error de sintaxis lo detiene y el mensaje se muestra encima de la salida. Corrige el punto indicado - a menudo un corchete o cadena sin cerrar, o un token suelto - y el resultado se reconstruye automáticamente.

¿La salida se actualiza sola?

Sí. El resultado se reconstruye cada vez que cambias la entrada, el lenguaje, la acción o la sangría, así que nunca tienes que pulsar un botón para formatear: solo copia la salida cuando se vea bien.