Embellecedor de código: formatea 26 lenguajes en tu navegador, sin subir nada
Pegaste el código de salida de un minificador y es una línea que cruza la pantalla. O copiaste un prettifier de una documentación y trae tabs en lugar de los espacios que necesita tu proyecto. O simplemente es código de un compañero que "no usa formateador" y tiene su propia filosofía de sangrado.
Este embellecedor de código hace lo que hace el botón "Format Document" de VS Code: coge código fuente feo, apretado o desordenado y lo devuelve bien formateado, con resaltado de sintaxis a la derecha.
Soporta 26 lenguajes, y 21 ya cuentan con formateadores reales: no solo un arreglo de sangrado, sino un reformateo completo. JavaScript, TypeScript, JSX, TSX, HTML, CSS, SCSS, LESS, JSON, YAML, Markdown y GraphQL pasan por Prettier 3+. C / C++ / Java / C#: el **clang-format** original compilado a WebAssembly: el mismo motor que usan VS Code y Google. Go: el canónico gofmt, en WASM. Python: **Ruff** (compatible con Black, el mismo motor que ejecuta `ruff format` en terminal). Bash: shfmt en WASM. PHP: **Mago** en WASM. SQL: sql-formatter (palabras clave en MAYÚSCULAS, JOIN bien cortados). XML: xml-formatter, respeta la estructura del DOM. Solo Rust, Kotlin, Swift y Ruby se quedan en la pasada cosmética (indentador consciente de llaves para lenguajes `{}`, espacios puros para Ruby): sus formateadores completos (rustfmt, ktlint, swift-format) necesitan un toolchain que simplemente no existe en el navegador.
Tres modos para tres necesidades distintas: Gentle usa Prettier y solo rompe líneas cuando superan el ancho elegido (100 por defecto). Aggressive usa js-beautify para JS/HTML/CSS: cada sentencia en su línea, cadenas de métodos partidas, todo expandido. Cosmetic-only es nuestra propia implementación de ~50 líneas: convierte tabs ↔ espacios, normaliza el ancho de sangrado, recorta espacios al final y normaliza CRLF → LF.
Todo se ejecuta localmente en tu navegador. El código nunca sale de tu equipo: sin subidas, sin telemetría, sin logs del lado del servidor. Puedes cortar internet a mitad de sesión y la herramienta sigue funcionando (tras el primer formateo, las librerías quedan en cache).
Cómo se usa
- Elige un lenguaje en el desplegable superior izquierdo o deja Auto: highlight.js lo intuye en cada cambio de entrada. Auto reconoce los 26 lenguajes soportados, así que no confundirá SQL con Python.
- Elige un modo: Gentle (predeterminado, rompe solo líneas demasiado anchas), Aggressive (todo en su propia línea, solo JS/HTML/CSS), Cosmetic-only (reescribe sangría + recorta espacios, funciona en todas partes).
- Pega tu código en el panel izquierdo o pulsa "Subir archivo": aceptamos hasta 5 MB. Todas las extensiones habituales (.js, .py, .go, .rs, .java, ...): al subir detectamos el lenguaje por la extensión automáticamente.
- Pulsa Format. El primer clic tarda un momento: las librerías (Prettier, Shiki, highlight.js, js-beautify) cargan bajo demanda ("Cargando formateador..."). Los siguientes son instantáneos porque viven en la cache del navegador.
- A la derecha tienes una vista previa con resaltado de sintaxis (con Shiki, las mismas gramáticas TextMate que usa VS Code). Puedes Copiar, Descargar como archivo (extensión según el lenguaje) o Abrir en una pestaña (útil para salidas largas).
- Hay un icono de rueda (ajustes): ancho de sangrado (tab / 2 espacios / 4 espacios), longitud máxima de línea (80/100/120), comillas (simples / dobles), punto y coma (sí/no), comas finales (all / es5 / none).
- La mayoría de lenguajes ahora obtiene un reformateo completo en el navegador: C / C++ / Java / C# vía clang-format (WASM), Go vía gofmt (WASM), Python vía Ruff (WASM, compatible Black), Bash vía shfmt (WASM), PHP vía Mago (WASM), además de SQL (sql-formatter) y XML (xml-formatter). Los formateadores completos cargan bajo demanda al primer clic (~80-300 kB WASM por lenguaje, cacheado después). Rust, Kotlin, Swift, Ruby siguen recibiendo el banner amarillo y el modo Cosmetic-only.
- Si tu código tiene un error de sintaxis (p. ej. paréntesis sin cerrar), el panel derecho muestra el mensaje de error exacto con línea y columna: el mismo diagnóstico que daría el Prettier real en terminal.
Cuándo te resulta útil
Seis situaciones comunes en las que este formateador de código te ahorra trabajo manual:
- Embellecer un archivo de producción minificado. Abriste DevTools, encontraste `app.min.js` y es una línea kilométrica. Pega, modo Aggressive y obtienes un código legible: no el original completo (las variables siguen siendo `_a`, `_b`), pero al menos ves la estructura.
- Limpiar la PR de un compañero. Pegó código que "funciona" pero usa sangrado de 6 espacios, mezcla tabs y espacios y deja 4 líneas en blanco entre funciones. Modo Gentle + 2 espacios + Prettier: la code review deja de gritar por el whitespace.
- Convertir tabs a espacios (o al revés). Tu `.editorconfig` dice 2 espacios, pero el código del becario usa tabs. Cosmetic-only + 2 espacios hace la conversión en un clic, sin tocar la estructura.
- Comprobación rápida de JSON o YAML. Pegaste un YAML de GitHub Actions y CI grita que no es válido: pega, Gentle, Prettier te devuelve el error con línea y columna. Más rápido que leer la spec de YAML.
- Embellecer código copiado de un PDF. Transcribiste un ejemplo de un libro o doc PDF y al pegar perdiste el sangrado (los PDFs no copian whitespace de forma fiable). Pega, Gentle, Prettier reconstruye la estructura a partir de puntos y comas y llaves.
- Conversión CRLF → LF en Windows. Un archivo de Windows abierto en Mac/Linux tiene `^M` al final de cada línea y git se queja. Cosmetic-only normaliza los finales de línea a LF, dejando el resto sin tocar.