Formatear SQL, HTML y código minificado

Formatear código es reescribirlo con saltos de línea y sangría para poder leerlo, sin cambiar lo que hace. Con el formateador de SQL, el de HTML y el modo de embellecer de Minificar conviertes una consulta, una página o un script pegados en una línea en código ordenado, en tu navegador y sin subirlo a ningún servidor. Eso es útil cuando el código incluye nombres de tablas, rutas internas o datos de tu empresa.

SQL: del bloque ilegible a la consulta clara

Una consulta en una línea:

select u.id,u.name,count(o.id) as pedidos from users u left join orders o on o.user_id=u.id where u.active=1 and u.created_at>'2026-01-01' group by u.id,u.name order by pedidos desc

con el dialecto PostgreSQL, 2 espacios y palabras clave en mayúsculas, queda así:

SELECT
  u.id,
  u.name,
  count(o.id) AS pedidos
FROM
  users u
  LEFT JOIN orders o ON o.user_id = u.id
WHERE
  u.active = 1
  AND u.created_at > '2026-01-01'
GROUP BY
  u.id,
  u.name
ORDER BY
  pedidos DESC

Cada cláusula en su línea, las columnas una por renglón, y los operadores lógicos como AND al comienzo de la línea. Con eso se ve de un vistazo qué se une, qué se filtra y cómo se agrupa.

Las opciones del formateador de SQL

1. Dialecto: SQL estándar, MySQL, PostgreSQL, SQLite, BigQuery, MS SQL Server, MariaDB y Oracle PL/SQL. Elegir el correcto importa porque cada motor tiene funciones y comillas propias.
2. Indentación: 2 o 4 espacios.
3. Palabras clave: en MAYÚSCULAS, en minúsculas o tal como estaban.

La herramienta también puede hacer lo contrario, minificar la consulta, respetando los textos entre comillas y los comentarios, para que una línea con -- no se coma el resto de la consulta.

Un ejemplo de la tercera opción: con select, from y where en minúsculas, la opción de mayúsculas los vuelve SELECT, FROM y WHERE, la de minúsculas hace lo contrario y la de conservar deja cada palabra como la escribiste. Muchos equipos fijan una de las dos primeras en su guía de estilo para que todas las consultas de un repositorio se vean igual en las revisiones de código.

HTML: ordenar una página en una línea

El formateador de HTML usa Prettier para reindentar. Sus opciones: sangría de 2 o 4 espacios o tabulaciones, eliminar comentarios, abreviar las etiquetas autocerradas y un modo sensible a los espacios en blanco, activado por defecto. Ese modo respeta que, en HTML, un espacio entre dos elementos en línea (por ejemplo, entre un enlace y una palabra) puede ser parte del contenido. Si lo desactivas, el resultado puede quedar más limpio, pero podría cambiar cómo se ve el texto, así que compáralo antes de sustituir tu archivo.

Un fragmento típico, tal como sale de un editor visual o de una plantilla:

<div class="card"><h2>Título</h2><p>Texto con <a href="#">un enlace</a>, <strong>negrita</strong>.</p><ul><li>Uno</li><li>Dos</li></ul><img src="a.png" alt="x"/></div>

Con sangría de 2 espacios y el modo sensible a espacios activado, queda así:

<div class="card">
  <h2>Título</h2>
  <p>Texto con <a href="#">un enlace</a>, <strong>negrita</strong>.</p>
  <ul>
    <li>Uno</li>
    <li>Dos</li>
  </ul>
  <img src="a.png" alt="x" />
</div>

Los bloques (div, ul, li) se separan por líneas y los elementos en línea (a, strong) se quedan dentro de su párrafo, justo para no alterar los espacios del texto.

Desminificar JS, CSS y otros

Para código que alguien minificó, el modo Desminificar / Embellecer de Minificar lo reformatea con saltos de línea e indentación, y detecta el lenguaje automáticamente. La limitación que conviene tener presente la dice la propia herramienta: no recupera los comentarios ni los nombres de variables que el minificador eliminó o acortó. Si el código tenía contadorDeUsuarios y quedó como a, desminificar te devuelve a con buena sangría, no el nombre original. Para entender qué hace la minificación, mira qué es minificar código.

¿Cuándo conviene formatear?

• Para revisar una consulta que viene de un registro o de un ORM, escrita en una sola línea.
• Antes de comparar dos versiones de un archivo, para que la sangría no aparezca como cambio: mira qué cambió entre dos versiones de un texto.
• Al depurar HTML copiado de las herramientas de desarrollo del navegador.
• Para documentar una consulta en un ticket o un correo.

Errores frecuentes al formatear

• Elegir el dialecto equivocado. Si pegas una consulta de SQL Server, que escribe los nombres entre corchetes, con el dialecto de MySQL, el formateador puede no reconocer esas comillas ni algunas funciones. Cambia el dialecto antes de buscar un error en tu consulta.
• Formatear algo que no es SQL. Un bloque de procedimiento con sintaxis propia del motor se lee mejor con el dialecto de ese motor, por ejemplo Oracle PL/SQL.
• Sustituir un HTML sin comparar. Si apagas el modo sensible a espacios, revisa la página en el navegador: un espacio que desaparece entre un enlace y la palabra siguiente se nota.
• Esperar nombres originales al desminificar. Si necesitas los nombres reales, la salida correcta es el código fuente del proyecto o un mapa de fuentes (source map), no el archivo minificado.
• Pegar secretos. Aunque todo ocurra en tu navegador, borra contraseñas o tokens de la consulta antes de compartir el resultado en un ticket.

Qué no hace un formateador

No corrige errores de sintaxis ni valida que las tablas existan, no optimiza una consulta lenta ni arregla un HTML mal anidado. Solo cambia el aspecto. Si tu consulta tiene un error, el formateador puede avisar de que no la entiende, y entonces hay que arreglarla a mano.

Preguntas frecuentes

Herramientas relacionadas

• Formateador SQL: ocho dialectos, indentación y mayúsculas de palabras clave.
• Formateador HTML: reindenta con Prettier y opciones de espacios y comentarios.
• Minificar: reduce JS, CSS y HTML, y desminifica código.
• Formateador JSON: valida y da formato a JSON.

También te puede interesar: 13 herramientas para developers que respetan tu privacidad y JSON, YAML o XML: cuál elegir según el uso.