Formateador y minificador de código
Formatea o minifica HTML, CSS, JavaScript y SQL, con el lenguaje detectado automáticamente, todo en tu navegador.
Formateador de código - formatee o minifique HTML, CSS, JavaScript y SQL
Pegue código que le llegó en una sola línea, o código listo para publicar, y conviértalo en lo que necesita: bien sangrado y legible, o minificado al mínimo de bytes. El formateador trabaja con HTML, CSS, JavaScript y SQL, reconoce cuál de ellos ha pegado y lo hace todo en su navegador, así que el código fuente, las consultas con nombres de tablas y los fragmentos de un proyecto de cliente nunca salen de su dispositivo.
Formatear es para las personas: revisar un pull request, leer un bundle minificado, depurar una consulta que alguien escribió en una sola línea larga. Minificar es para las máquinas: los archivos más pequeños cargan antes y gastan menos ancho de banda. Una sola herramienta cubre las dos direcciones.
Cómo se usa
- Pegue su código. Lenguaje está en Detectar automáticamente; elija HTML, CSS, JavaScript o SQL si la detección se equivoca.
- Pulse Formatear para sangrarlo, o Minificar para comprimirlo.
- Ajuste Sangría a 2 espacios, 4 espacios o tabuladores y, para SQL, elija el Dialecto SQL y cómo se escriben las Palabras clave.
- Pulse Copiar o Descargar. La línea bajo la herramienta muestra el tamaño antes y después, y cuánto ahorró la minificación.
Qué usa cada lenguaje
| Lenguaje | Formatear | Minificar |
|---|---|---|
| HTML | js-beautify: etiquetas anidadas sangradas, etiquetas en línea en su misma línea | Se eliminan los comentarios y los espacios entre elementos de bloque; pre, textarea, script y style quedan intactos |
| CSS | js-beautify: una declaración por línea | Se eliminan comentarios y espacios, y se conservan las cadenas y los espacios que los valores necesitan, como en 0 auto y calc(100% - 32px) |
| JavaScript | js-beautify: llaves, bloques y llamadas encadenadas sangrados | Terser: analiza el código, elimina lo que sobra y acorta los nombres de las variables locales |
| SQL | sql-formatter: cada cláusula en su propia línea, según el dialecto | Se eliminan los comentarios y los espacios fuera de las comillas se reducen a uno solo |
Las tres bibliotecas son de código abierto y solo se cargan la primera vez que usa su lenguaje, de modo que la página en sí sigue siendo ligera.
Formatear SQL
Una consulta larga escrita en una sola línea cuesta revisarla. El formateador de SQL coloca SELECT, FROM, WHERE, GROUP BY y cada JOIN en su propia línea y sangra debajo las columnas y las condiciones. Los dialectos importan porque las bases de datos no coinciden en la sintaxis: los nombres entre acentos graves son de MySQL, los corchetes de SQL Server y las conversiones con :: de PostgreSQL. Elija el dialecto que usa entre SQL estándar, MySQL, MariaDB, PostgreSQL, SQLite, SQL Server, Oracle PL/SQL, BigQuery y Snowflake. Las Palabras clave pueden escribirse en MAYÚSCULAS, en minúsculas o Tal como están; los nombres de sus tablas y columnas nunca se modifican.
Minificar sin riesgos
El código minificado tiene que comportarse exactamente igual que el original, y la forma segura de garantizarlo es entender el código en lugar de borrar caracteres a ciegas. Por eso el JavaScript lo minifica Terser, que primero lo convierte en un árbol sintáctico; si el código tiene un error de sintaxis, obtiene la línea y la columna en lugar de un resultado roto. El minificador de CSS conserva los espacios que tienen significado, y el de HTML deja un espacio entre elementos en línea como <span>a</span> <span>b</span>, porque quitarlo uniría dos palabras en la página.
Minificar no sustituye a la compresión en el servidor. Gzip o Brotli suelen reducir los archivos de texto un 70% o más además de la minificación, y ambas cosas se complementan bien.
Usos habituales
- Leer un archivo minificado de una biblioteca de terceros o de un bundle de producción mientras depura.
- Limpiar el HTML que exporta un editor de emails o un CMS antes de editarlo a mano.
- Revisar una consulta copiada de un log, de una línea de depuración del ORM o del mensaje de chat de un compañero.
- Reducir un fragmento de CSS o JavaScript antes de incrustarlo en una página o en una plantilla de email.
Herramientas relacionadas
Para JSON, el formateador de JSON lo valida y lo sangra, y el Conversor JSON lo transforma en YAML, CSV o XML. Para ver exactamente qué cambió al formatear, pegue el antes y el después en Comparar textos. Para una tarea concreta, las páginas de tareas abren esta herramienta ya preparada: formateador de HTML, formateador de SQL, minificador de CSS, minificador de JavaScript y embellecedor de JavaScript.