Formatear JSON, CSS, JavaScript o HTML minificado es una tarea recurrente cuando depuras una respuesta de API, revisas un tema de WordPress o heredas un fichero sin indentar. Este formateador y minificador funciona por completo en tu navegador: ni el código ni las credenciales que pueda contener salen de tu equipo.
Formatear frente a minificar
Formatear (o embellecer) reintroduce saltos de línea e indentación para que la estructura sea legible; no cambia la semántica. Minificar hace lo contrario: elimina comentarios y espacios innecesarios para reducir bytes servidos. En un pipeline moderno la minificación la hace el bundler (esbuild, Vite, Terser, cssnano) con optimizaciones adicionales como el renombrado de variables; esta herramienta cubre el caso puntual: un archivo suelto, un snippet pegado en un ticket o una comparación rápida de tamaños.
JSON: por qué falla el parseo
El formateo de JSON usa JSON.parse y JSON.stringify, así que cualquier error de sintaxis se detecta al instante con su posición. Las causas más habituales son la coma final antes de un cierre ({"a":1,}, válida en JavaScript pero no en JSON), las comillas simples en lugar de dobles, las claves sin comillas, los comentarios (JSON no los admite; lo que usan tsconfig o VS Code es JSONC) y los valores NaN, Infinity o undefined, que no existen en el estándar.
CSS, JavaScript y HTML: cómo se indenta
Para CSS y JavaScript el formateo recorre el código carácter a carácter respetando cadenas, plantillas y comentarios, y aumenta un nivel de indentación con cada { y lo reduce con cada }, cortando línea tras cada ;. Para HTML se indenta según la apertura y cierre de etiquetas, tratando correctamente las etiquetas vacías (img, br, input, meta, link) que no incrementan nivel. Es un formateo estructural, no un reformateo de estilo completo tipo Prettier: no reordena atributos ni fuerza longitud máxima de línea.
Cuándo usar una herramienta online y cuándo el repositorio
Para un fichero puntual o un fragmento pegado en un chat, una herramienta cliente como esta es lo más rápido. Para un proyecto, la decisión de estilo debe vivir en el repositorio: Prettier con un .prettierrc, un hook de pre-commit y comprobación en CI, de forma que el formato sea determinista para todo el equipo y no genere diffs de ruido. Y nunca pegues código con secretos en formateadores que procesen en servidor.
Casos de uso comunes
- Leer la respuesta JSON de una API que llega en una sola línea.
- Revisar un CSS o JS minificado heredado sin sourcemap.
- Comparar cuánto pesa un archivo antes y después de minificar.
- Indentar un fragmento HTML pegado desde un correo o CMS.
Buenas prácticas
- Valida el JSON antes de formatearlo si viene de una fuente externa.
- Para producción, minifica con el bundler, no a mano.
- Fija 2 espacios en JSON/JS/CSS y respeta la convención del proyecto.