Cambia entre formatear y minificar en cualquier momento; el resultado se actualiza mientras escribes. Ordena HTML, CSS y JavaScript desordenados, o redúcelos para un sitio web más rápido. Se ejecuta en tu navegador y es gratis y privado.
Cómo formatear o minificar código
- Elige Formatear o Minificar.
- Elige el lenguaje: HTML, CSS o JavaScript.
- Para dar formato, elige la sangría: 2 espacios, 4 espacios o Tab.
- Pega tu código en el cuadro de entrada o pulsa Ejemplo para ver cómo funciona.
- Lee el resultado en Formateado y luego pulsa Copiar.
- Borrar vacía la entrada.
Qué hace formatear
Formatear solo cambia los espacios en blanco. CSS recibe una declaración por línea, reglas separadas por una línea en blanco y consultas de medios y reglas anidadas con sangría. JavaScript se vuelve a sangrar según sus llaves con una sentencia por línea, mientras que las cadenas, los template literals, las expresiones regulares y los encabezados for (;;) se dejan exactamente como están escritos. HTML se sangra según el anidamiento, con los elementos en línea en la misma línea que su texto para que la página se vea igual, y los bloques <script> y <style> en línea se formatean con los formateadores de JavaScript y CSS.
Qué hace minificar
Minificar elimina los comentarios y todos los espacios que el navegador no necesita. Los comentarios que empiezan por /*! se conservan, porque suelen contener una licencia. JavaScript conserva un salto de línea donde la inserción automática de punto y coma depende de él, así que el código escrito sin punto y coma sigue funcionando. Los nombres no se acortan y no se reescribe ningún código, así que el resultado se comporta exactamente como el original. En HTML, el contenido de pre y textarea nunca se toca, y los espacios entre elementos en línea se conservan como un solo espacio para que las palabras no se peguen.
Límites que conviene conocer
El formateador lee el código con un tokenizador real y no con buscar y reemplazar, pero no lo analiza por completo, así que no detectará todos los errores de sintaxis. Cuando encuentra un problema, como una cadena, un comentario o un paréntesis sin cerrar, te dice la línea. No se admiten TypeScript, JSX ni lenguajes de plantillas. Minificar HTML elimina los huecos entre elementos de bloque como los elementos de lista; si un diseño depende de ese espacio entre elementos inline-block, revísalo tras minificar.
Consejos
- Conserva tu archivo original. El código minificado es difícil de leer y editar, así que minifica una copia para publicar.
- Prueba tu página tras minificar, sobre todo si el diseño depende de los espacios entre elementos.
- Usa el formato para leer código que no escribiste tú, como un fragmento copiado o un archivo comprimido.
- Elige la misma sangría que usa tu equipo para que los cambios sean pequeños.
- Compara el antes y el después con el comparador de diferencias.
Quién lo usa
Estudiantes que aprenden a leer código, freelancers que ordenan el sitio de un cliente y pequeños negocios que reducen el peso de sus páginas para ganar velocidad. Para archivos JSON usa las herramientas JSON.
Privado por diseño
Tu código se formatea en esta página, en tu navegador. No se sube nada, así que es seguro para trabajo privado o sin publicar.
Preguntas
¿Minificar romperá mi código?
Solo quita comentarios y espacios innecesarios y no reescribe tu código, así que el comportamiento sigue igual. Prueba siempre el resultado.
¿Admite TypeScript o JSX?
No. Se admiten HTML, CSS y JavaScript.
¿Por qué se conservó un comentario?
Los comentarios que empiezan por /*! se conservan porque suelen contener una licencia.