Embellecedor de HTML

Qué hace esta herramienta

Toma HTML minificado, generado o escrito a prisa y lo devuelve con una estructura legible: cada elemento en su nivel de indentación, atributos ordenados y bloques separados. Admite HTML y plantillas de Vue, y formatea también el CSS y el JavaScript que vayan incrustados.

Es el inverso del minificador de HTML.

Formatea lo que hay dentro, no solo las etiquetas

Es la diferencia con los formateadores simples. El contenido de una etiqueta <style> se formatea con el analizador de CSS, y el de un <script> con el de JavaScript. No se quedan como bloques de texto pegados.

Por eso esta herramienta descarga algo más que las otras dos del catálogo: necesita los tres analizadores a la vez.

El espacio en blanco en HTML sí se ve

Esta es la advertencia importante, y casi nadie la hace.

En HTML, el espacio en blanco entre elementos en línea no es decorativo: se renderiza. Si tienes

<a href="/a">Uno</a><a href="/b">Dos</a>

y lo separas en dos líneas, el navegador dibuja un espacio entre los dos enlaces que antes no estaba. Lo mismo con span, button o img puestos en fila.

Prettier conoce el problema y protege esos casos, pero si tu maquetación depende de que no haya ni un espacio entre etiquetas, compara antes de sustituir el archivo. Es el único escenario en el que formatear puede cambiar lo que se ve.

Con elementos de bloque —div, p, section, li— no hay riesgo: el espacio entre ellos se colapsa y no afecta.

Vue sí, Blade y Twig no

Vue funciona: elige ese dialecto y entenderá la estructura de un componente de archivo único, con sus bloques template, script y style, formateando cada uno como corresponde.

Blade, Twig, Handlebars y compañía no están soportados. Sus etiquetas de control (@if, {% for %}, {{#each}}) se intercalan con el HTML de una forma que el analizador no admite, y el archivo se rechaza como error de sintaxis. Para esas plantillas usa el formateador de tu editor, que sí conoce la sintaxis del motor.

Cuándo se usa

• Leer el HTML de una página en producción cuando el servidor lo sirve minificado en una sola línea.
• Ordenar la salida de un generador o de un constructor visual, que suele venir con indentación errática.
• Revisar una plantilla de correo, donde el HTML de tablas anidadas es especialmente difícil de seguir sin formato.
• Preparar un fragmento para documentación, para que se lea bien en el ejemplo.

Sobre el formateador

Usa Prettier (licencia MIT) compilado para navegador. Puedes ajustar la indentación —dos espacios, cuatro o tabulaciones— y el ancho máximo de línea, que en HTML decide cuándo un elemento con muchos atributos los reparte en varias líneas.