Resultados del mismo código con las opciones actuales
La comparación usa el mismo archivo y mide bytes UTF-8. Formatear añade espacios para facilitar la lectura; minificar aplica transformaciones. Conserva y prueba la fuente original.
| Versión | Bytes UTF-8 | Uso |
|---|---|---|
| Entrada | 103 | Fuente compacta del ejemplo |
| Prettier | 120 | Lectura y revisión |
| Terser | 89 | Versión minificada en modo Script |
¿Cuándo formatear y cuándo minificar JavaScript?
Formatear facilita la lectura y la revisión de código. Minificar reduce caracteres mediante transformaciones y puede cambiar nombres locales. Una salida formateada puede ocupar más bytes que la entrada. Ninguna operación comprueba que la lógica de negocio sea correcta ni sustituye las pruebas del programa.
Elige la operación y el contexto del archivo
Usa Formatear JavaScript para revisar una fuente y Minificar JavaScript para preparar una versión compacta. Script y módulo ES cambian las suposiciones de Terser. Selecciona módulo ES solo para código que se use como módulo y verifica sus exportaciones en el destino.
¿Cómo se utiliza?
- Pega el código o carga el ejemplo. La entrada JavaScript admite hasta 2 MB.
- Selecciona Formatear o Minificar. Para minificar, elige Script o módulo ES según el uso real.
- Ejecuta, revisa la salida y prueba el archivo en su entorno. Copia el resultado o descárgalo como .js.
Ejemplo real de entrada y salida
La misma función, legible y compacta
Entrada
const tools=["HTML","JavaScript"];function findTool(name){return tools.find((tool)=>tool===name)??null}Salida
Formatear:
const tools = ['HTML', 'JavaScript'];
function findTool(name) {
return tools.find((tool) => tool === name) ?? null;
}
Minificar:
const tools=["HTML","JavaScript"];function findTool(o){return tools.find(n=>n===o)??null}En este ejemplo concreto, la entrada ocupa 103 bytes UTF-8, el formato 120 y la minificación 89. Son resultados del ejemplo con las opciones actuales, no una tasa de compresión general.
Errores frecuentes y soluciones
| Síntoma | Causa probable | Solución |
|---|---|---|
| Se informa de un error de sintaxis | Puede haber comillas, llaves o paréntesis sin cerrar, o sintaxis que requiere otro analizador. | Revisa la línea y columna indicadas. Para anotaciones de tipos, utiliza el formateador TypeScript en lugar de asumir que este analizador las admite. |
| La salida minificada elimina o cambia código | Terser comprime y cambia nombres según las suposiciones de Script o módulo ES. | Confirma el contexto elegido y prueba el archivo. Conserva el original; no uses la minificación como prueba de equivalencia de toda la aplicación. |
| El archivo formateado es más grande | Los saltos de línea y la sangría añaden caracteres para mejorar la lectura. | Usa el modo minificar cuando necesites una versión compacta y mide los bytes del resultado real. |
Análisis de sintaxis, no verificación del programa
La herramienta no ejecuta el JavaScript que pegas ni valida dependencias, permisos o lógica de negocio. El modo módulo ES afecta a la minificación; no convierte un Script en módulo. La aceptación del analizador no demuestra que un archivo sea seguro o compatible con todos los navegadores.
Estándares y referencias de implementación
- Prettier: opciones oficiales (opens in a new tab)Reglas de formato y opciones de impresión.
- Terser: opciones de minificación (opens in a new tab)Compresión, cambio de nombres y modo módulo.
Formateador JavaScript — FAQ
¿Se envía mi código a un servidor?
No. Prettier y Terser procesan la entrada en el navegador; la copia y la preparación de la descarga también son locales.
¿Formatear corrige errores de lógica?
No. Puede detectar sintaxis que no se puede analizar, pero no ejecuta pruebas ni conoce el comportamiento esperado de tu aplicación.
¿Qué cambia al seleccionar módulo ES?
Terser aplica su modo de módulo durante la minificación. Selecciónalo para un archivo que realmente se cargue como módulo y comprueba las exportaciones y efectos secundarios.
¿La minificación sirve para ocultar secretos?
No. Un archivo JavaScript entregado al navegador sigue siendo accesible. No incluyas claves privadas ni secretos de servidor en el código cliente.
¿Qué cambió?
Interfaz y explicaciones en español; comparación reproducible de formato y minificación y límites de sintaxis, módulos y tamaño.