Formatear JavaScript

Subir

0 caracteres

Herramienta de formateo de código JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON en el navegador, con configuración detallada estilo Prettier, compresión y ofuscación Terser, editor CodeMirror integrado, vista previa en tiempo real, atajos de teclado, carga y descarga de archivos.

Relacionado

Minificador de JS

CSS Formatter

Formateador de JSX

Generador de Códigos QR/Códigos de Barras

Generador de código cURL

Ofuscador de JS

Casos de uso

Pegar código JS de terceros comprimido durante el desarrollo frontend para embellecerlo rápidamente y facilitar la lectura y depuración
Unificar el formato del código JavaScript/TypeScript antes de revisiones de equipo, eliminar diferencias de estilo en indentación, comillas, punto y coma, y concentrarse en la revisión de lógica
Al heredar proyectos legacy, formatear con un clic el código JS viejo con formato desordenado para comprender rápidamente la estructura y jerarquía lógica
Antes del despliegue en producción, usar Terser para comprimir y ofuscar código JavaScript, reducir el tamaño del archivo y mejorar la velocidad de carga de la página
Al escribir demos JS/JSX online, mantener el código ordenado con formateo en tiempo real para compartir fácilmente con colegas o la comunidad
Al aprender los efectos de cada opción de Prettier, previsualizar resultados de formateo ajustando opciones, entender parámetros como tabWidth, trailingComma, etc.
Procesar fragmentos de código copiados de plataformas como Stack Overflow, GitHub, reparar automáticamente problemas de indentación y saltos de línea
Al escribir archivos de configuración JSON, formatear automáticamente indentación y saltos de línea para evitar fallos de parseo por errores de comas o paréntesis
Al desarrollar páginas CSS/HTML, formatear código JS+CSS+HTML del mismo proyecto en un solo lugar para mantener un estilo unificado
Organizar rápidamente código JS de problemas de algoritmos antes de entrevistas, un formato estándar mejora la presentación del código

Cómo Usar

Abre la página de la herramienta de formateo JavaScript, puedes pegar código directamente en el área de edición izquierda, o hacer clic en el botón de carga para seleccionar archivos locales (soporta formatos .js/.ts/.jsx/.tsx/.css/.html/.json)
Selecciona el tipo de lenguaje correspondiente: la herramienta normalmente detecta automáticamente, si la detección no es precisa selecciona manualmente JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON en el desplegable de lenguajes
Configura las opciones de formateo: puedes elegir preajustes rápidos (default/modern/classic), o ajustar manualmente opciones de Prettier (ancho de indentación, tabulaciones/espacios, ancho de línea, punto y coma, comillas, coma final, paréntesis en flechas)
Si necesitas comprimir código, cambia al modo de compresión, configura opciones de Terser (si habilitar compress, si mangle nombres de variables, si comprimir variables de nivel superior), nivel de optimización CSS, opciones de compresión HTML
La herramienta procesa el código en tiempo real, el área de edición derecha muestra inmediatamente el resultado formateado o comprimido, la barra de estado inferior muestra estadísticas de caracteres, bytes y tasa de compresión en tiempo real
Usa atajos de teclado para mejorar la eficiencia: Ctrl+Shift+B activa formateo, Ctrl+Shift+M cambia modo de compresión, Ctrl+Shift+O abre archivo, Ctrl+Shift+D descarga resultado, Ctrl+Shift+K limpia editor
Cuando estés satisfecho haz clic en el botón de copiar para copiar el resultado al portapapeles, o haz clic en descargar para guardar como archivo local; también puedes hacer clic en compartir para generar un enlace URL con código y configuración para compartir con otros

Características

Soporte multi-lenguaje: formatea 7 lenguajes frontend comunes simultáneamente: JavaScript, TypeScript, JSX, TSX, CSS, HTML, JSON, procesa todo el código frontend en un solo lugar
Configuración detallada estilo Prettier: soporta opciones completas como tabWidth (2/4/8 espacios), useTabs (tabulaciones vs espacios), printWidth (ancho de línea), semi (punto y coma), singleQuote (comillas simples vs dobles), trailingComma (coma final), arrowParens (paréntesis en funciones flecha)
Función de minificación de código: integra el motor de compresión Terser, soporta opciones de nivel producción como compress (compresión), mangle (ofuscación de nombres), toplevel (compresión de variables de nivel superior)
Optimización específica para CSS: proporciona configuración de nivel de optimización CSS, soporta compresión CSS, eliminación de comentarios, eliminación de espacios y otros tratamientos específicos
Opciones de compresión HTML: soporta configuración HTML minify, puede colapsar espacios en blanco, eliminar comentarios, eliminar comillas de atributos, etc.
Procesamiento en tiempo real: formatea y previsualiza el código en tiempo real al escribir, no necesitas hacer clic en botones para ver el resultado del formateo
Editor CodeMirror: editor profesional CodeMirror integrado con resaltado de sintaxis, números de línea, coincidencia de paréntesis, plegado de código y experiencia de edición profesional
Carga y descarga de archivos: soporta carga directa de archivos locales .js/.ts/.jsx/.tsx/.css/.html/.json, después de formatear puedes descargar el archivo procesado con un clic
Enlaces para compartir: guarda código y configuración a través del hash de URL, genera un enlace para compartir con colegas y reproducir la escena de formateo actual
Historial: guarda automáticamente el historial de formateo en localStorage, puedes volver a versiones anteriores de código y configuración en cualquier momento
Atajos de teclado: soporta atajos como Ctrl+Shift+B para formatear, Ctrl+Shift+M para minificar, Ctrl+Shift+O para abrir archivo, Ctrl+Shift+D para descargar, Ctrl+Shift+K para limpiar
Preajustes rápidos: proporciona 3 preajustes de configuración rápida: default (por defecto), modern (moderno), classic (clásico), cambia entre estilos comunes con un clic
Estadísticas de caracteres: muestra en tiempo real la comparación de caracteres, bytes y tasa de compresión entre el código original y el procesado
Código de ejemplo: incluye códigos de ejemplo para cada lenguaje, haz clic para cargarlos y probar rápidamente las funciones

Preguntas Frecuentes

¿Cambiará la lógica del código JavaScript después de formatear?

No. El formateo solo ajusta contenido relacionado con el «formato» como espacios en blanco, indentación, saltos de línea, posición de paréntesis, estilo de comillas, se basa en transformación AST, la estructura AST del código antes y después del formateo es completamente idéntica, la lógica de ejecución es 100% igual. Mientras el código en sí sea sintácticamente correcto y pueda parsearse normalmente, el formateo no cambiará ningún comportamiento de ejecución, puedes usarlo con confianza. Pero la compresión (mangle), aunque tampoco cambia la lógica, requiere prestar atención a escenarios especiales como eval y exportaciones de variables globales, evitando configuraciones inadecuadas.

¿Qué hago si el resultado de la herramienta de formateo es diferente al de mi VS Code/Prettier local?

La lógica de formateo de esta herramienta intenta mantenerse consistente con el comportamiento oficial de Prettier. Si los resultados difieren, revisa las opciones de configuración: verifica que las opciones core tabWidth, useTabs, semi, singleQuote, trailingComma, arrowParens sean exactamente iguales en ambos lados. Además presta atención a diferencias de versión de Prettier — las configuraciones por defecto de Prettier 2/3 tienen diferencias sutiles (v3 por defecto trailingComma: all, v2 por defecto es5; desde v2 arrowParens por defecto always). Si tu proyecto local tiene archivo de configuración .prettierrc, ajusta las opciones en la web para que coincidan con las de ese archivo, los resultados de formateo serán iguales.

¿Se puede restaurar el código comprimido? ¿Se pueden recuperar los nombres de variables mangled?

El código formateado es completamente reversible — porque solo cambió el formato, todos los identificadores y lógica se conservan completamente, formatear de nuevo lo restaurará. Pero el código comprimido: la parte de eliminación de espacios y comentarios puede reformatearse para recuperar el diseño, pero mangle (ofuscación de nombres de variables) es irreversible — el nombre de variable con significado original userName se convirtió en a, este proceso es unidireccional, no se puede restaurar automáticamente al nombre original. Si necesitas depurar código comprimido en producción, debes configurar la generación de archivos Source Map, mediante Source Map mapear de vuelta a las posiciones del código fuente. ¡Así que antes de comprimir asegúrate de conservar el código fuente original sin comprimir!

¿Qué navegadores soporta? ¿Se puede usar en teléfonos móviles?

Esta herramienta soporta todos los navegadores modernos: las últimas versiones de Chrome, Firefox, Safari, Edge funcionan correctamente. IE no es soportado (actualmente nadie usa IE para desarrollar). El diseño responsivo se adapta a pantallas de móvil, pero la edición de código en pantallas pequeñas tiene una experiencia regular, se recomienda usar en navegadores de escritorio para mayor eficiencia en pantallas grandes. Todos los cálculos de formateo y compresión se ejecutan localmente en el navegador, no es necesario subir código a servidores, el código nunca sale de tu navegador, es seguro y confiable.

¿Por qué cierto código no se puede formatear y muestra error de parseo?

La herramienta de formateo primero necesita parsear el código en AST para funcionar, si el código tiene errores sintácticos (paréntesis no coincidentes, cadenas sin cerrar, palabras clave mal escritas, comas sobrantes, etc.), el parser no puede entender la estructura del código y reporta error. Por favor revisa primero los errores sintácticos del código: mira si hay mensajes de error en la consola, si el editor tiene líneas onduladas rojas indicando la posición del error, después de reparar los errores sintácticos podrás formatear normalmente. Además asegúrate de seleccionar el modo de lenguaje correcto, no selecciones JS normal para código JSX/TSX.

¿Mi código se subirá al servidor? ¿Es seguro el código?

No. Todo el formateo, compresión y resaltado de sintaxis se ejecuta completamente en tu navegador local mediante JavaScript, el código no se envía a ningún servidor, se procesa completamente en tu dispositivo. Puedes probar desconectando la red: después de desconectar la herramienta sigue funcionando correctamente. La función de enlaces para compartir codifica el código y la configuración en el hash de la URL, al hacer clic en compartir solo genera una URL, el código no se sube — pero si envías el enlace a otras personas, al abrir el enlace podrán ver tu código, así que no compartas código sensible mediante enlaces.

¿Se pueden formatear componentes de un solo archivo Vue (.vue)? ¿Qué hay de Svelte?

Actualmente el soporte multi-lenguaje de esta herramienta incluye JS/TS/JSX/TSX/CSS/HTML/JSON, los archivos de un solo archivo (SFC) de Vue con <template>/<script>/<style> y componentes Svelte no se soportan para formateo directo completo, pero puedes copiar separadamente la parte script (JS/TS), la parte style (CSS) y la parte template (HTML) seleccionando el lenguaje correspondiente para formatear individualmente. En el futuro se considerará añadir soporte de formateo SFC Vue/Svelte.

¿Cómo configurar una convención de formateo unificada para el equipo?

Para una convención unificada de equipo se recomienda la combinación de tres capas: ① coloca .editorconfig en la raíz del proyecto para unificar configuraciones básicas del editor (indentación, saltos de línea, codificación); ② usa Prettier y coloca archivo de configuración .prettierrc en el proyecto, todos los desarrolladores y CI usan esta configuración para formatear, esta herramienta también puede seleccionar opciones correspondientes para coincidir con la configuración; ③ usa ESLint + eslint-config-prettier para desactivar reglas de estilo ESLint y solo revisar calidad de código. Configura el editor para formatear automáticamente al guardar (VS Code instala extensión Prettier, configura editor.formatOnSave: true), añade paso lint en CI para revisar formato, asegurando que el código que se envía cumple con las normas.

¿Qué beneficios tiene la coma final (trailingComma)? ¿Debería activarse?

Se recomienda encarecidamente activar la coma final (al menos nivel es5, recomendado nivel all). Los beneficios de la coma final son: ① Git diff más limpio: al añadir el último elemento no necesitas modificar la línea anterior para añadir coma, solo hay diff de la línea nueva, no se contamina el diff de la línea anterior por añadir coma; ② es más conveniente al reordenar elementos, no necesitas manejar problemas de coma final; ③ los navegadores modernos y Node.js soportan completamente comas finales, IE antiguo no las soporta pero actualmente no hay que considerar IE. La única desventaja es una coma más, pero vale completamente la pena en comparación con la conveniencia que aporta. Prettier v3 por defecto es all.

¿Al comprimir hay que activar mangle? ¿Cuál es la diferencia entre compress y mangle?

Para compresión en producción se recomienda activar tanto compress como mangle, son dos opciones de compresión independientes: compress es optimización de código (plegado de constantes, eliminación de código muerto, simplificación de expresiones, etc.), solo modifica la estructura del código cuando puede simplificar, no cambia nombres de variables; mangle es acortamiento de nombres de variables locales, cambia nombres de variables largos a caracteres individuales, esta es una de las mayores fuentes de reducción de tamaño. Mientras tu código no sea una librería para ser llamada externamente directamente por nombres de variables, o no uses eval para acceder dinámicamente a nombres de variables, mangle es seguro y puede reducir significativamente el tamaño. Si es una librería open source que necesita conservar nombres de API, configura mangle.reserved para conservar los nombres exportados.

¿Por qué al formatear JSON se escapan automáticamente ciertos caracteres?

La especificación JSON tiene requisitos sintácticos estrictos: las cadenas deben ir en comillas dobles, no puede haber comas finales, los caracteres especiales deben escaparse (salto de línea→\n, comillas→\", barra invertida→\\, Tab→\t, etc.). Si en tu cadena JSON hay caracteres especiales sin escape, al formatear se escaparán automáticamente según la especificación JSON, este es el comportamiento correcto. Nota: JSON no es JavaScript, en JSON no se pueden escribir comentarios, no puede haber comillas simples, no puede haber undefined, estos causarán fallo de parseo JSON.

¿Cómo hacer que los parámetros de funciones flecha siempre tengan paréntesis? ¿O sin paréntesis?

Ajusta la opción arrowParens: always es siempre con paréntesis ((x) > x), que es el valor por defecto desde Prettier v2, el beneficio es que al añadir o quitar parámetros no necesitas añadir o quitar paréntesis, los diff son más limpios; avoid es omitir paréntesis para parámetro único (x > x), el código es más conciso. Elige según el estilo del equipo, ambos estilos no son correctos o incorrectos, solo unifica. Nota: anotaciones de tipo de parámetro, parámetros por defecto, parámetros de desestructuración llevarán paréntesis sin importar la configuración.

¿Puede el formateo reparar automáticamente problemas de estilo reportados por ESLint?

Esta herramienta es formateo estilo Prettier, solo puede reparar problemas de estilo de los que se encarga Prettier (indentación, comillas, punto y coma, coma final, ancho de línea, espacios, etc.). Los problemas de calidad de código reportados por ESLint (como variables no utilizadas, falta de return, problemas de ===) son problemas lógicos, la herramienta de formateo no los puede reparar automáticamente, necesitas modificarlos manualmente. Si tu ESLint tiene configurado eslint-config-prettier, después de que Prettier formatee, ESLint ya no reportará errores relacionados con estilo, los problemas de calidad restantes repáralos manualmente.

¿Qué tamaño máximo de archivo de código soporta? ¿Se ralentiza al formatear archivos grandes?

Como el formateo se ejecuta localmente en el navegador, el tamaño de archivo soportado depende del rendimiento de tu dispositivo, normalmente archivos JS de decenas de KB a varios MB pueden procesarse correctamente, el JS de un solo archivo de proyectos comunes es completamente suficiente. Si es un archivo JS empaquetado especialmente grande (decenas de MB) puede ralentizarse o incluso quedarse sin memoria, estos archivos super grandes se recomienda procesarlos localmente con línea de comandos Node.js+Prettier/Terser. El tamaño de archivos fuente individuales en el desarrollo diario normalmente está dentro del rango de procesamiento.

¿Por qué al presionar Ctrl+Shift+B en Chrome se abre el administrador de marcadores?

Esto es un conflicto con atajos por defecto de Chrome: Ctrl+Shift+B es el atajo de Chrome para mostrar/ocultar la barra de marcadores, los atajos del navegador tienen mayor prioridad que los atajos JS de la página, por lo que es interceptado por Chrome. Soluciones: ① haz clic en el botón de formateo para operar; ② si eres usuario de Mac usa Cmd+Shift+B que no entra en conflicto con Chrome; ③ puedes modificar los atajos del navegador en la configuración de Chrome; ④ puedes enfocar primero dentro del editor, en ciertos casos el foco del editor puede capturar el atajo. Si otros navegadores también tienen conflictos de atajos, siempre puedes operar mediante botones.

Solución de problemas

Error de «parseo sintáctico» al formatear, no se puede formatear

El código en sí tiene errores sintácticos: paréntesis no coincidentes, cadenas sin cerrar, palabras clave faltantes, comas sobrantes, etc., los errores sintácticos hacen que el parseo AST falle, repara primero los errores sintácticos Selección incorrecta de modo de lenguaje: por ejemplo código JSX/TSX seleccionado como JavaScript, la sintaxis de genéricos se confunde con etiquetas JSX o viceversa, selecciona manualmente el tipo de lenguaje correcto Incluye sintaxis experimental: el código usa propuestas de sintaxis JavaScript demasiado nuevas que aún no son estándar (como decoradores, operador Pipeline), el parser no las soporta El archivo tiene encabezado BOM: los tres bytes UTF-8 BOM (EF BB BF) al inicio, ciertos parsers pueden no procesarlos, intenta guardar como UTF-8 sin BOM Mezcla código de otros lenguajes: por ejemplo lenguajes de plantilla embebidos en HTML (EJS, Handlebars, directivas de plantilla Vue) no son JS/HTML puro, el parser no los reconoce Comentarios de bloque sin cerrar en el código: /* sin su */ correspondiente, el comentario no cerrado hace que todo el código posterior se trate como comentario Ambigüedad de expresiones regulares: ciertos lugares que parecen división/operadores son en realidad literales de expresión regular, el parser se equivoca, puedes añadir punto y coma antes de la expresión regular para eliminar ambigüedad

Error al comprimir (Minify), no se puede comprimir

Error sintáctico del código: igual que al formatear, la compresión también se basa en AST, el código debe ser sintácticamente correcto para comprimir, repara primero los errores sintácticos Se usa import/export de ES Module pero no se marcó correctamente el tipo de módulo, o la configuración de compresión no coincide con el tipo de módulo Problemas al mangle nombres de propiedades: si se activó mangle de propiedades (no activado por defecto), acceso dinámico a propiedades obj['key'] hará que no se encuentren las propiedades, no actives mangle de propiedades sin cuidado El código tiene eval() o sentencia with: Terser puede fallar en mangle cuando encuentra eval/with, porque eval puede acceder dinámicamente a nombres de variables en el ámbito, evita eval en código de producción Error en configuración de nombres reservados: si configuraste mangle.reserved pero con errores de escritura u olvidaste nombres que deben conservarse (como librerías globales jQuery, $, etc.), puede causar errores en runtime Problema de configuración de compresión toplevel: si tu código se ejecuta en ámbito global en lugar de estar empaquetado en IIFE/módulo, activar compress.toplevel: true puede romper referencias a variables globales Configuración de versión de navegador objetivo demasiado antigua: Terser puede usar sintaxis no soportada por el navegador objetivo al comprimir, puedes configurar la versión ecma para especificar la versión de sintaxis JS de salida

Caracteres chinos/comentarios chinos se muestran distorsionados después de formatear

La codificación del archivo no es UTF-8: el archivo local cargado está en codificación china como GBK/GB2312, la herramienta parsea por defecto como UTF-8 causando distorsión, usa un editor para volver a guardar el archivo en codificación UTF-8 antes de cargar La codificación de la página del navegador se modificó accidentalmente: aunque los navegadores modernos usan UTF-8 por defecto, ciertos navegadores antiguos o configuraciones especiales pueden tener codificación incorrecta, revisa la configuración de codificación de página en el menú del navegador y configúrala en UTF-8 El archivo tiene encabezado UTF-8 BOM: aunque BOM normalmente no causa distorsión, ciertos parsers procesan BOM anómalamente, puedes usar un editor para quitar BOM y guardar como UTF-8 sin BOM Problema de conversión de codificación al copiar y pegar: al copiar código desde software antiguo (como Bloc de notas antiguo, Word), caracteres especiales (como comillas chinas, espacios de ancho completo) pueden convertirse erróneamente, intenta copiar desde editores modernos como VS Code Problema de fuente: ciertas fuentes monoespaciadas tienen mal soporte para chino causando visualización anómala, esto no es problema de codificación, es solo problema de fuente de visualización, cambia a una fuente monoespaciada que soporte chino Caracteres Unicode especiales: el código contiene emoji, espacios de ancho cero, caracteres de control y otros caracteres invisibles especiales que pueden causar visualización anómala o errores de formateo, puedes activar la visualización de caracteres invisibles en el editor para revisar Problema de compresión gzip o proxy: si aparece distorsión al acceder después del despliegue, verifica que el servidor configure correctamente la cabecera de respuesta Content-Type: application/javascript; charset=utf-8

El formateo de código JSX/TSX falla o hay error de parseo

El modo de lenguaje seleccionado es JavaScript en lugar de JSX/TSX: el parser JS común no reconoce sintaxis de <etiqueta>, interpretará etiquetas JSX como operadores de comparación y reportará error, selecciona manualmente lenguaje JSX o TSX Ambigüedad de sintaxis genérica TSX: el parámetro genérico <T> en TSX puede confundirse con etiqueta JSX, como const f = <T>(x: T) > x, puedes añadir una coma después de <T> como <T,> para eliminar ambigüedad (esta es la escritura común en TSX) Etiquetas JSX sin cerrar: JSX requiere que todas las etiquetas se cierren correctamente, etiquetas autocerradas deben tener />, a diferencia de HTML, <img> debe escribirse <img/> Problema de paréntesis en expresiones JS en JSX: las expresiones JS dentro de {} deben cerrarse correctamente, si {obj.prop} no tiene } causará desorden de parseo posterior Problema de sintaxis corta de Fragment: la etiqueta vacía <></> requiere soporte de React 16+ y debe cerrarse correctamente; si usas <Fragment> debes importarlo correctamente Problema de comillas en valores de atributos JSX: los valores de atributos JSX si son cadenas deben usar comillas (dobles), si son expresiones usan {}, no mezcles La extensión del archivo TSX es .ts en lugar de .tsx: el parser de TypeScript solo habilita parseo JSX con extensión .tsx, si usas extensión .ts para escribir JSX reportará error, usa la extensión correcta

La indentación después de formatear es incorrecta, no coincide con lo esperado

Configuración incorrecta de tabWidth: revisa si la configuración de ancho de indentación es 2 o 4, los equipos comúnmente usan 2 espacios, si esperas 4 espacios necesitas ajustar manualmente la opción tabWidth Configuración incorrecta de useTabs: si el equipo usa indentación Tab pero configuraste espacios o viceversa, revisa si la opción useTabs es correcta El código en sí tiene errores sintácticos: errores sintácticos causan estructura AST anómala, la indentación formateada se desordenará, repara primero los errores sintácticos indicados por las líneas onduladas rojas Mezcla de Tab y espacios: el código original tiene indentación Tab en algunos lugares y espacios en otros, el formateo unificará al estilo configurado, pero si el desorden original es muy grave puede requerir formateo múltiple printWidth configurado demasiado pequeño: si el ancho de línea es muy pequeño (como 40), el código saltará de línea frecuentemente pareciendo indentación desordenada, configurar 80 o 100 es más adecuado Opciones de formato como bracketSameLine/arrowParens no coinciden con lo esperado: la posición de llaves, paréntesis de funciones flecha y otros estilos están determinados por la configuración, no es problema de indentación, ajusta las opciones correspondientes Conflicto entre EditorConfig y configuración del editor local: si tu editor local usa .editorconfig para configurar indentación automáticamente, difiere de las opciones configuradas en la web, los resultados de formateo en ambos lados serán inconsistentes, unifica la configuración

Los atajos de teclado no funcionan, no pasa nada al presionarlos

El foco no está en el editor: los atajos solo funcionan cuando el editor tiene el foco, si el foco está en botones, campos de entrada u otras partes de la página los atajos no se activan, haz clic primero en el área del editor para enfocar Conflicto con atajos del navegador: ciertos atajos (como Ctrl+Shift+B en Chrome abre la barra de marcadores, Ctrl+Shift+O en Firefox abre el historial) están ocupados por el navegador, puedes hacer clic en botones para operar, o usar Cmd en lugar de Ctrl (Mac) para probar Problema de método de entrada: bajo método de entrada chino ciertos atajos pueden ser interceptados, cambia a método de entrada en inglés y prueba los atajos Otras extensiones/plugins ocupan los atajos: extensiones de atajos instaladas en el navegador, scripts de Tampermonkey, plugins de proxy pueden ocupar atajos, intenta abrir la página en modo incógnito Conflicto con atajos del sistema: el sistema operativo u otro software en ejecución (como software de captura, métodos de entrada, IDE) tienen atajos globales que ocupan esa combinación de teclas, puedes modificar atajos de otro software o usar los botones de esta herramienta Diferencias de teclado Mac/Windows: nota que Mac usa tecla Cmd (⌘), Windows/Linux usan tecla Ctrl, no las mezcles; Option en Mac corresponde a Alt en Windows Restricciones de seguridad del navegador: ciertos atajos relacionados con acceso a archivos pueden estar limitados por políticas de seguridad del navegador, no pueden simularse completamente por JS, si es necesario haz clic directamente en el botón correspondiente

Glosario

Prettier: La herramienta de formateo de código frontend más popular actualmente, adopta filosofía de diseño Opinionated, soporta múltiples lenguajes como JS/TS/CSS/HTML/Markdown, unifica obligatoriamente el estilo de código y termina con las discusiones de estilo en equipo.
Terser: Herramienta moderna de compresión JavaScript, es el fork compatible con ES6+ de UglifyJS, soporta compresión y ofuscación de sintaxis ES6+, es el compresor por defecto de herramientas de build modernas como Webpack, Rollup, Vite.
UglifyJS: Herramienta clásica de compresión JavaScript, predecesora de Terser, pero solo soporta sintaxis ES5 y anteriores, no soporta nuevas características ES6+, actualmente en proyectos nuevos se usa generalmente Terser en su lugar.
AST (Abstract Syntax Tree): Árbol de Sintaxis Abstracta, representación en forma de árbol de la estructura sintáctica del código fuente, cada nodo representa una estructura sintáctica en el código. Babel, Prettier, Terser, ESLint y otras herramientas se implementan basándose en AST.
ESLint: La herramienta de linting más popular en el ecosistema JavaScript/TypeScript, se usa para encontrar problemas de calidad de código y unificar estilo de código, puede usarse en conjunto con Prettier.
EditorConfig: Archivo de configuración multiplataforma para unificar estilo de código entre editores, define configuraciones básicas como estilo de indentación, tamaño de indentación, saltos de línea, codificación, para que diferentes editores abran el mismo proyecto con comportamiento consistente.
CodeMirror: Componente de editor de código en navegador, proporciona funciones de edición profesional como resaltado de sintaxis, números de línea, coincidencia de paréntesis, plegado de código, cursores múltiples, es una de las opciones principales para editores de código web.
minify (compresión): Proceso de minimizar el tamaño del código sin cambiar su lógica, mediante eliminación de espacios en blanco, comentarios, acortamiento de nombres de variables, optimizaciones de código, etc., usado en producción para mejorar la velocidad de carga.
mangle (ofuscación): Paso durante la compresión que acorta nombres de variables, funciones y parámetros a caracteres individuales, reduce significativamente el tamaño del código y lo hace más difícil de leer, también llamado ofuscación de nombres de variables.
beautify (embellecimiento): Es decir formateo de código, reorganiza el código comprimido o desordenado con indentación, saltos de línea y espacios para mejorar la legibilidad, opuesto a minify.
trailing comma (coma final): Coma después del último elemento en objetos, arrays y parámetros de función, facilita que Git diff sea más limpio al añadir elementos, soportado en entornos ES5+.
arrow parens (paréntesis en funciones flecha): Si los parámetros de funciones flecha de un solo parámetro necesitan envolverse en paréntesis, como x > x (sin paréntesis) vs (x) > x (con paréntesis).
printWidth (ancho de línea): Número de caracteres por línea después del cual se hace salto de línea automático al formatear, Prettier por defecto 80 caracteres, los equipos pueden ajustar a 100 o 120 según el tamaño del monitor.
semicolons (punto y coma): Si añadir punto y coma al final de sentencias JavaScript, JS tiene mecanismo de inserción automática ASI, pero en la mayoría de escenarios se sigue recomendando usar punto y coma para evitar sorpresas.
single quote (comillas simples): Si usar comillas simples o dobles para cadenas, en JS son funcionalmente equivalentes es solo preferencia de estilo, la especificación JSON obliga a comillas dobles.
double quote (comillas dobles): Usar comillas dobles para envolver cadenas, es el estilo por defecto de muchos lenguajes y también el formato de cadena requerido por la especificación JSON.
tab width (ancho de indentación): Número de espacios por nivel de indentación, la comunidad frontend usa comúnmente 2 espacios, lenguajes backend 4 espacios.
BOM (Byte Order Mark): Marca de orden de bytes, tres bytes EF BB BF que pueden aparecer al inicio de archivos codificados UTF-8, usados para marcar codificación, en ciertos escenarios pueden causar errores de parseo JS.
UTF-8: Formato de transformación Unicode de 8 bits, actualmente la codificación de archivo estándar para Web y proyectos frontend, soporta todos los caracteres Unicode, es la codificación recomendada por defecto.
source map (mapa de origen): Archivo que mapea código comprimido/transpilado de vuelta a las posiciones originales del código fuente, usado para depuración en producción, cuando el código comprimido reporta errores puede localizar el número de línea en el fuente.

Tabla de referencia de opciones core de Prettier

Nombre de opción	Función	Valores disponibles	Valor por defecto	Descripción
`tabWidth`	Ancho de indentación (número de espacios)	`2, 4, 8`	`2`	Tiene efecto cuando useTabs es false, frontend comúnmente usa 2 espacios
`useTabs`	Usar tabulaciones Tab para indentar	`true/false`	`false`	true usa Tab, false usa espacios
`printWidth`	Límite de ancho de línea (caracteres)	`80, 100, 120`	`80`	Salto de línea automático al exceder el ancho, no es límite estricto
`semi`	Añadir punto y coma al final de sentencias	`true/false`	`true`	false solo añade punto y coma donde ASI podría fallar
`singleQuote`	Usar comillas simples	`true/false`	`false`	true comillas simples, false comillas dobles, atributos JSX siempre dobles
`trailingComma`	Modo de coma final	`none, es5, all`	`all (v3+)`	none sin coma final, es5 añade en objetos/arrays, all también en parámetros de función
`arrowParens`	Paréntesis en parámetro único de funciones flecha	`avoid, always`	`always (v2+)`	avoid omite paréntesis para parámetro único, always siempre con paréntesis
`bracketSpacing`	Espacios dentro de llaves de objetos	`true/false`	`true`	true: { a: 1 }, false: {a: 1}
`bracketSameLine`	Posición de paréntesis de cierre HTML/JSX	`true/false`	`false`	true paréntesis de cierre al final de la última línea, false en línea separada
`vueIndentScriptAndStyle`	Indentación de script/style en archivos Vue	`true/false`	`false`	Si indentar código dentro de etiquetas script y style en Vue SFC

Ejemplo comparativo antes y después de compresión de código JavaScript

Optimización	Código formateado (versión desarrollo)	Código comprimido (versión producción)	Porcentaje de reducción
Espacios y saltos de línea	`function add(a, b) { return a + b; }`	`function add(n,d){return n+d}`	~60%
Eliminación de comentarios	`// Calcula suma de dos números function add(a,b){return a+b}`	`function add(n,d){return n+d}`	~20%
Mangle de variables locales	`function calculateTotal(price, quantity){const tax=0.1;return pricequantity(1+tax)}`	`function n(n,t){const e=0.1;return nt(1+e)}`	~40%
Plegado de constantes	`const x = 2 * 3 + 4; console.log(x);`	`console.log(10);`	~50%
Simplificación booleana	`if (x === true) { doThing(); }`	`if(x)doThing();`	~30%
Ejemplo completo (múltiples optimizaciones)	`function getFullName(user) { const firstName = user.firstName; const lastName = user.lastName; return firstName + ' ' + lastName; }`	`function n(n){return n.firstName+' '+n.lastName}`	~70%

Tabla rápida de atajos de teclado

Atajo (Win/Linux)	Atajo (Mac)	Descripción de función	Frecuencia de uso
`Ctrl+Shift+B`	`Cmd+Shift+B`	Ejecutar formateo/embellecimiento	★★★★★
`Ctrl+Shift+M`	`Cmd+Shift+M`	Alternar modo formateo/compresión	★★★★
`Ctrl+Shift+O`	`Cmd+Shift+O`	Abrir archivo local	★★★★
`Ctrl+Shift+D`	`Cmd+Shift+D`	Descargar archivo procesado	★★★★★
`Ctrl+Shift+K`	`Cmd+Shift+K`	Limpiar contenido del editor	★★★
`Ctrl+S`	`Cmd+S`	Descargar (guardar) archivo	★★★★
`Ctrl+F / Ctrl+H`	`Cmd+F / Cmd+H`	Buscar / Buscar y reemplazar	★★★★
`Ctrl+Z / Ctrl+Y`	`Cmd+Z / Cmd+Shift+Z`	Deshacer / Rehacer	★★★★★
`Ctrl+/`	`Cmd+/`	Alternar comentario de línea	★★★
`Tab / Shift+Tab`	`Tab / Shift+Tab`	Aumentar indentación / Disminuir indentación (con selección)	★★★★
`Alt+clic`	`Option+clic`	Añadir cursores múltiples	★★★
`Ctrl+D`	`Cmd+D`	Seleccionar siguiente palabra igual	★★★
`Home / End`	`Cmd+← / Cmd+→`	Inicio / Fin de línea	★★★★
`Ctrl+Home/End`	`Cmd+↑ / Cmd+↓`	Principio / Final del archivo	★★★