Formateador y Embellecedor de Código
Formatee, embellezca e inspeccione código fuente en más de 15 lenguajes con detección automática de sintaxis, reglas configurables de sangría y comillas, y comparador diff línea por línea.
Todo el formateo se procesa de forma 100% local en su navegador: el código fuente nunca se envía a ningún servidor externo.
Cómo Formatear Código Online
- Pegue su código fuente o consulta SQL en el editor de entrada, o arrastre un archivo desde su equipo local.
- Verifique la etiqueta de lenguaje detectado automáticamente en la barra de herramientas, o seleccione manualmente el lenguaje deseado.
- Ajuste los parámetros de formateo: tamaño de sangría (2 espacios, 4 espacios o tabuladores), longitud de línea, estilo de comillas, puntos y coma y comas finales.
- Inspeccione las diferencias en la pestaña Diferencias (Diff), copie el resultado formateado al portapapeles o descárguelo como archivo de código fuente.
Comparativas Prácticas de Formateo
Evaluaciones interactivas de antes y después a través de distintos modelos sintácticos:
JavaScript: Manejador asíncrono minificado → Código estructurado ES6+
Original (Minificado en una sola línea)
const fetchUserData=async(userId)=>{try{const res=await fetch(`/api/users/${userId}`);if(!res.ok)throw new Error('Network error');const data=await res.json();return{id:data.id,name:data.name,roles:data.roles.filter(r=>r.active)};}catch(err){console.error('Fetch failure:',err);return null;}};Resultado formateado (2 espacios, comas finales)
const fetchUserData = async (userId) => {
try {
const res = await fetch(`/api/users/${userId}`);
if (!res.ok) throw new Error('Network error');
const data = await res.json();
return {
id: data.id,
name: data.name,
roles: data.roles.filter((r) => r.active),
};
} catch (err) {
console.error('Fetch failure:', err);
return null;
}
};Motores de Lenguaje y Modelos Gramaticales Compatibles
El formateador selecciona analizadores y tokenizadores léxicos específicos para garantizar la preservación de la semántica de cada lenguaje durante el embellecimiento.
| Familia de Lenguajes | Lenguajes Compatibles | Motor de Análisis | Mecanismos de Formateo y Seguridad |
|---|---|---|---|
| ECMAScript y Scripts Web | JavaScript (ES2024, JSX), TypeScript | Tokenizador léxico y motor de sangría dinámica (js-beautify) | Niveles de sangría flexibles, inserción o supresión de puntos y coma, normalización de comillas, ajuste de línea y alineación de bloques |
| Datos Estructurados y Serialización | JSON | Analizador sintáctico estricto RFC 8259 y serializador recursivo | Comillas dobles obligatorias en claves, prohibición de comas finales, alineación estructural clave-valor y validación sintáctica |
| Hojas de Estilo y Preprocesadores | CSS, SCSS, Less | Tokenizador de bloques de declaraciones | Estructuración jerárquica de selectores, espaciado tras dos puntos en propiedades, formateo de variables CSS y delimitación con punto y coma |
| Consultas de Bases de Datos Relacionales | SQL (ANSI, MySQL, PostgreSQL, SQLite, T-SQL) | Analizador recursivo dirigido por cláusulas | Saltos de línea en cláusulas principales (SELECT, FROM, WHERE, GROUP BY), sangría en JOINs y alineación vertical de operadores |
| Lenguajes de Sangría Significativa | Python | Escáner léxico con pila de sangría sensible a bloques | Normalización de sangría a 4 espacios según PEP 8, preservación estricta de ámbitos con dos puntos y recorte de espacios finales |
| Marcado y Documentación Técnica | HTML5, Markdown | Embellecedor de jerarquía DOM HTML y normalizador de Markdown | Anidamiento de etiquetas HTML, seguridad en elementos vacíos/autocerrados, aislamiento de bloques de código cercados y sangría de listas |
| Lenguajes Compilados y de Sistemas | Java, C#, C++, Go, PHP | Embellecedor de sintaxis y ámbitos de estilo C | Equilibrio de llaves simétricas, sangría de sentencias de control de flujo y espaciado de métodos y clases |
Reglas de Formateo y Decisiones de Ingeniería
Las opciones de formateo influyen directamente en la mantenibilidad del código, la estabilidad del historial de Git blame y la semántica en tiempo de ejecución.
| Parámetro | Opciones | Comportamiento del Motor | Impacto Práctico y Estabilidad en Git |
|---|---|---|---|
| Sangría (Indentation) | 2 espacios / 4 espacios / Tabuladores | Reconstruye los espacios en blanco iniciales de cada línea según la profundidad del ámbito léxico evaluado. | 2 espacios es el estándar general en JS/TS/HTML (ahorra espacio horizontal en devoluciones de llamada anidadas). 4 espacios es la norma en Python (PEP 8), Java y C++. Los tabuladores desacoplan el ancho visual del peso en bytes, permitiendo que cada desarrollador elija el tamaño en su editor. |
| Longitud de línea (Print Width) | 80 / 100 / 120 caracteres | Aplica ajuste de línea suave (soft-wrap) a listas de argumentos, atributos y llamadas encadenadas cuando superan el umbral establecido. | 80 caracteres permite visualizar dos ficheros en paralelo en monitores 1080p y revisiones móviles. 100 y 120 caracteres evitan roturas artificiales de líneas en IDEs modernos de pantalla ancha. |
| Estilo de comillas (Quote Style) | Conservar / Simples (') / Dobles (") | Normaliza de forma segura los delimitadores de cadenas literales. Omite la conversión si la comilla de destino requiere escapar caracteres internos. | Las comillas simples predominan en TypeScript y el ecosistema frontend para alternar limpiamente con atributos HTML; las comillas dobles son obligatorias en JSON (RFC 8259) y el estándar común en Python y lenguajes C-like. |
| Puntos y coma (Semicolons) | Conservar / Insertar siempre / Eliminar | Inserta puntos y coma al término de sentencias o los suprime cuando la gramática ECMAScript garantiza que es seguro. | Los puntos y coma explícitos eliminan fallos inesperados de Inserción Automática de Punto y Coma (ASI) en líneas que inician con `(`, `[`, `/` o plantillas literales. El código sin punto y coma reduce ruido visual y cumple guías como StandardJS. |
| Comas finales (Trailing Commas) | Conservar / Ninguna / Estándar ES5 / Todas (ES2017+) | Añade o limpia comas tras el último elemento en arrays, objetos, parámetros de funciones e importaciones multilínea. | Las comas finales producen diffs limpios en Git: incorporar un nuevo elemento modifica solo 1 línea en lugar de 2, protegiendo el historial de git blame. «Todas» abarca argumentos de funciones (ES2017+); «ES5» se limita a literales de objeto y array. |
Arquitectura Interna: Impresión Basada en AST vs. Embellecimiento de Flujo de Tokens
Transformación por Flujo de Tokens y Preservación de Contexto
A diferencia de los compiladores que descartan comentarios y espacios en blanco, los formateadores basados en flujo de tokens analizan secuencialmente cada unidad léxica. La profundidad de sangría se computa mediante contadores incrementados ante delimitadores de apertura ({, (, [) y decrementados ante los correspondientes símbolos de cierre.
Este enfoque preserva las decisiones estructurales intencionadas del desarrollador —como líneas en blanco estratégicas entre bloques de lógica, anotaciones JSDoc y sugerencias para optimizadores SQL— sin reescribir árboles de expresiones.
Garantías de Seguridad y Normalización de Comillas
Al normalizar delimitadores de cadenas, el motor inspecciona si el contenido interno contiene caracteres en conflicto con la comilla objetivo. Una cadena con comillas dobles que contiene un apóstrofe literal (como "it's valid") nunca se forzará a comillas simples a menos que el carácter pueda escaparse de forma limpia sin generar ruido de barras invertidas.
En formatos de datos estrictos como JSON, se aplica una validación previa integral bajo la especificación RFC 8259, asegurando que cualquier entrada malformada emita un mensaje de error descriptivo con número de línea y columna en lugar de serializarse como una estructura corrupta.
Aplicaciones de Ingeniería en Entornos de Producción
- Desofuscación y Diagnóstico de Bundles de Producción: Al depurar incidencias críticas reportadas por plataformas como Sentry o Datadog donde los Source Maps no están disponibles o tienen desfases, el código minificado colapsa en una sola línea. Reformatear el fragmento desempaqueta el flujo de control, expande ternarios y permite correlacionar columnas de error con variables lógicas.
- Saneamiento y Optimización de Consultas SQL de ORMs: Los registradores de consultas ORM (Prisma, TypeORM, Hibernate) emiten consultas relacionales complejas con múltiples JOINs en una sola línea continua. Embellecerlas reconstruye las cláusulas relacionales (FROM, WHERE, GROUP BY, HAVING), facilitando la lectura antes de ejecutar planes EXPLAIN ANALYZE.
- Revisión Previa al Commit (Pre-Commit) y Validación Diff LCS: Antes de registrar código en Git, procesar fragmentos externos o generados por inteligencia artificial a través del formateador y alternar a la pestaña Diff resalta con precisión qué líneas se han modificado. Esto asegura que no se introduzcan alteraciones de lógica involuntarias ni eliminaciones imprevistas en las pull requests.
- Normalización de Documentación Técnica y Especificaciones RFC: Pegar código desde diversas fuentes en wikis internas, documentación de APIs OpenAPI o RFCs técnicos con frecuencia introduce sangrías mixtas y estilos de comillas incoherentes. Ajustar los fragmentos a un ancho de línea y sangría uniformes garantiza una presentación profesional y coherente.
Frequently Asked Questions
¿Cuál es la diferencia técnica entre formatear código y minificar código?
El formateo (embellecimiento) y la minificación son procesos inversos. Un formateador analiza tokens léxicos para insertar sangrías estructuradas, saltos de línea estandarizados y espacios coherentes, logrando que el código fuente sea legible, mantenible y auditable por desarrolladores. En contraposición, un minificador suprime comentarios, elimina espacios prescindibles y acorta identificadores para reducir el tamaño en bytes transmitido a través de la red.
¿Puede el formateo de código minificado recuperar los nombres originales de las variables?
El formateo desempaqueta expresiones comprimidas, alinea llaves e introduce saltos de línea legibles, permitiendo inspeccionar el flujo de ejecución durante sesiones de depuración en producción. Sin embargo, no puede reconstruir los identificadores originales que fueron renombrados u ofuscados (mangled) por empaquetadores como Terser o esbuild; recuperar los nombres originales requiere cargar los archivos de mapas de origen correspondientes (.map).
Tabuladores frente a espacios: ¿qué tipo de sangría conviene seleccionar?
Los espacios (2 o 4) proporcionan una consistencia visual inmutable en cualquier entorno, garantizando que el código se visualice idéntico en visores de diff de Git, herramientas de revisión de código y terminales. 2 espacios es la norma en JavaScript, TypeScript y HTML; 4 espacios es el estándar oficial en Python (PEP 8), Java y C++. Los tabuladores ofrecen mayor accesibilidad: cada desarrollador puede configurar el ancho de visualización del tabulador en su editor sin alterar el código fuente, y ahorran bytes de almacenamiento.
¿Qué son los riesgos de Inserción Automática de Punto y Coma (ASI) en JavaScript y cómo protege esta opción al código?
Los motores de JavaScript insertan virtualmente puntos y coma en los límites de sentencias. Sin embargo, la regla ASI falla cuando una línea comienza con caracteres como `[`, `(`, `/`, `+`, `-` o comillas invertidas, provocando que el intérprete evalúe la línea como un argumento o índice de la expresión anterior (por ejemplo, `return\n{ estado: true }` devuelve undefined). Configurar «Insertar siempre» finaliza explícitamente las sentencias para neutralizar estos errores de ejecución, mientras que «Eliminar» las suprime cumpliendo la guía StandardJS.
¿Por qué las directrices modernas de código recomiendan comas finales en estructuras multilínea?
En arrays, objetos literales, importaciones y argumentos multilínea, incorporar un nuevo elemento sin coma final exige modificar dos líneas: colocar una coma en el elemento previo y escribir la nueva línea. Esto marca la línea anterior como editada en Git Diff y altera innecesariamente el historial de git blame. Activar comas finales asegura que cada adición o eliminación futura afecte con exactitud únicamente a la línea involucrada.
¿Puede el formateo de código fuente alterar la lógica o romper cadenas literales?
No. El motor de formateo trata las cadenas, plantillas literales y expresiones regulares como tokens atómicos e inmutables. La conversión de estilo de comillas solo tiene lugar cuando los caracteres internos no colisionan con el delimitador de destino, evitando errores sintácticos. La semántica del código, las vinculaciones de variables y la precedencia aritmética se conservan intactas.
¿Cómo ayuda la pestaña Diff a verificar los cambios antes de aplicarlos al proyecto?
La pestaña Diff ejecuta una comparación línea por línea basada en el algoritmo LCS (subsecuencia común más larga de Myers) entre la entrada en bruto y la salida embellecida. Resalta las líneas añadidas en verde y los espacios reestructurados en rojo, permitiendo a los ingenieros inspeccionar visualmente cada modificación estructural antes de copiar o confirmar los cambios en el control de versiones.
¿Cómo procesa el formateador archivos compuestos como HTML con JavaScript y CSS incrustados?
El formateador de HTML procesa el documento jerárquicamente: embellece la estructura de etiquetas DOM e identifica bloques `<script>` y `<style>`. El contenido interno de estas etiquetas se delega a sub-motores especializados en JavaScript y CSS, aplicándoles sangría en relación con la etiqueta contenedora antes de ensamblar el documento final unificado.