Formateador de JSX

Subir

0 caracteres

Herramienta Formateador JSX de GeekFormat, basada en el motor Prettier v3 Standalone para el embellecimiento profesional del código de componentes React JSX/TSX. Soporta 12 configuraciones de formateo (tamaño de indentación, punto y coma, estilo de comillas, comas finales, espaciado de llaves, paréntesis de función flecha, ancho de impresión, comillas simples JSX, llave JSX en la misma línea, estrategia de comillas de propiedad, etc.), motor de compresión Terser integrado, ofrece conmutación entre 7 lenguajes: JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON. Editor con resaltado de sintaxis CodeMirror 6, comparación en tiempo real en paneles izquierda-derecha, soporta carga/descarga de archivos, historial, compartir URL, copia con un clic. Procesamiento puramente lado navegador, sin subida de código al servidor.

Relacionado

Minificador de JSX

Formateador de TSX

Formatear JavaScript

Formateador de CSS

Formateo JSON

Acerca del formateo JSX

JSX significa JavaScript XML, una extensión de sintaxis JavaScript introducida por el framework React que permite escribir estructuras de etiquetas tipo HTML directamente en el código JavaScript. JSX se convierte en llamadas de función React.createElement() ordinarias en tiempo de compilación por herramientas como Babel o TypeScript. JSX hace que la estructura del código de los componentes sea más intuitiva, permitiendo a los desarrolladores describir la estructura de la interfaz de usuario como al escribir HTML mientras obtienen todo el poder expresivo de JavaScript. Sin embargo, si el código JSX carece de formateo normalizado — niveles de anidamiento de etiquetas desordenados, disposición de atributos desorganizada, indentación inconsistente — afectará gravemente la legibilidad y la eficiencia del mantenimiento, que es también el valor de las herramientas de formateo JSX.

Prettier es actualmente la herramienta de formateo de código más convencional en el ecosistema JavaScript/JSX, creada por James Long en 2017, y ahora se ha convertido en el estándar de facto. El concepto central de Prettier es el «formateador con opiniones» (opinionated formatter) — solo ofrece unos pocos elementos configurables, y el resto de las reglas están integradas y no se pueden modificar. La ventaja de este enfoque es eliminar las discusiones interminables sobre el estilo de código entre equipos. Prettier soporta múltiples lenguajes y formatos como JSX/TSX/JavaScript/TypeScript/JSON/CSS/HTML/Markdown, y es ampliamente adoptado por comunidades de frameworks principales como React, Vue y Angular. La mayoría de los proyectos frontend modernos integran Prettier en los pipelines CI/CD para garantizar un estilo de código consistente.

Las reglas centrales del formateo JSX incluyen: Primero, los niveles de indentación — cada etiqueta y expresión JSX anidada aumenta un nivel de indentación, reflejando la estructura de árbol del DOM; Segundo, la disposición de atributos — cuando una etiqueta tiene múltiples atributos y supera el ancho de línea, cada atributo ocupa su propia línea y está alineado; Tercero, el manejo de paréntesis — las expresiones JSX multilínea generalmente se envuelven en paréntesis para prevenir problemas de inserción automática de punto y coma (ASI); Cuarto, etiquetas autocerradas — los componentes sin elementos hijos usan la forma <Component />; Quinto, comillas de cadena — los atributos JSX usan por defecto comillas dobles (consistentes con HTML), las cadenas JavaScript usan por defecto comillas simples; Sexto, manejo de espacios — si agregar espacios en ambos lados de las llaves {} dentro de las etiquetas es configurable.

La compresión JSX (Minification) es la operación inversa del formateo, cuyo propósito es convertir JSX en código ejecutable de volumen mínimo, utilizado para el despliegue de producción para reducir el volumen de transmisión de red y acelerar la carga. La compresión JSX generalmente incluye los siguientes pasos: primero compilar JSX en llamadas React.createElement (es decir, JavaScript ordinario) usando Babel, luego usar un compresor (como Terser, UglifyJS) para: eliminar comentarios y caracteres de espacio, acortar nombres de variables y funciones (mangling), eliminar código muerto (dead code elimination), simplificar expresiones y declaraciones condicionales, fusionar declaraciones, funciones en línea, etc. Las herramientas de construcción modernas (Webpack, Vite, Rollup) ejecutan automáticamente la compresión de código en modo producción.

¿Por qué es importante el formateo de código? En la colaboración en equipo, un estilo de código unificado puede mejorar enormemente la legibilidad y la eficiencia de la revisión. Si cada desarrollador formatea el código según sus propias preferencias, el Git diff se llenará de una gran cantidad de cambios de formato sin sentido, haciendo que sea difícil para los revisores encontrar los cambios lógicos reales. Las investigaciones muestran que los desarrolladores pasan mucho más tiempo leyendo código que escribiéndolo, y un estilo de formateo consistente puede reducir significativamente la carga cognitiva de lectura. Grandes empresas como Google, Meta y Airbnb tienen todas estrictas especificaciones de estilo de código y cadenas de herramientas de formateo automatizadas, lo que es también un reflejo de la madurez de la ingeniería de software.

La división del trabajo entre Prettier y los Linters (como ESLint, TSLint) es la mejor práctica de la ingeniería frontend moderna: Prettier se especializa en el formateo — saltos de línea, indentación, espacios, punto y coma, comillas, comas y otros problemas de estilo puro; ESLint se especializa en la calidad del código — variables no utilizadas, bugs potenciales, problemas de seguridad, mejores prácticas y otros problemas lógicos. Al usar ambos juntos, necesitas desactivar las reglas de formateo que se superponen en ESLint a través de eslint-config-prettier para evitar conflictos. Muchos equipos también configuran hooks pre-commit (a través de husky + lint-staged) para ejecutar automáticamente Prettier y ESLint antes de la confirmación del código, garantizando que el código confirmado cumpla con las especificaciones.

Varios factores deben considerarse al elegir una herramienta de formateo JSX: Primero, la elección del motor — priorizar elegir Prettier como motor, porque es el estándar comunitario, los resultados son predecibles y consistentes con las extensiones IDE; Segundo, la capacidad de configuración — elegir la cantidad de parámetros ajustables según las necesidades del equipo, demasiadas opciones aumentan en cambio el costo de decisión; Tercero, la seguridad — garantizar que la herramienta procese el código localmente, no lo suba a los servidores, evite riesgos de fuga de código fuente; Cuarto, funciones adicionales — compresión, resaltado de sintaxis, historial, compartir y otras funciones pueden mejorar la eficiencia de uso; Quinto, soporte multilingüe — una herramienta que cubra múltiples lenguajes como JS/TS/JSX/TSX/CSS/HTML/JSON puede reducir los costos de cambio de herramienta.

Precauciones de seguridad al usar herramientas de formateo de código en línea: Primero, priorizar herramientas con procesamiento puramente lado navegador — estas herramientas no necesitan servidor, el código solo se ejecuta localmente, con la mayor seguridad; Segundo, no pegar código que contenga información sensible — como contraseñas de base de datos, claves API, lógica empresarial interna, algoritmos propietarios, etc., incluso si la herramienta afirma no subir, mantener la conciencia de seguridad; Tercero, verificar si la herramienta usa HTTPS — prevenir la escucha durante la transmisión (aunque las herramientas procesadas localmente no necesitan transmisión, la página en sí también necesita carga segura); Cuarto, usar herramientas locales para código importante — para el código empresarial central, se recomienda usar Prettier CLI instalado localmente o extensiones IDE, no depender de servicios en línea; Quinto, revisar regularmente la credibilidad de la herramienta — verificar si es de código abierto, cuáles son las reseñas de la comunidad, si hay una política de privacidad, etc.

Casos de uso

Código de componente React copiado de internet con formato desordenado, formatear rápidamente para facilitar la lectura y el aprendizaje
Organizar archivos de componentes JSX al hacerse cargo de proyectos heredados, unificar el estilo de código antes del desarrollo secundario
Formatear antes de la revisión de código, eliminar diffs sin sentido causados por diferencias de formato, enfocarse en la revisión lógica
Desformatear código JSX de producción comprimido, leer código ofuscado al solucionar problemas de producción
Embellecer código de ejemplo JSX antes de escribir blogs técnicos o documentación, mejorar el profesionalismo del contenido
Comparar efectos de diferentes configuraciones de formateo, referencia para la selección de configuración Prettier del equipo
Demostrar el proceso de formateo de código JSX de desordenado a normalizado en presentaciones didácticas
Al depurar fragmentos de código React en línea, formatear primero luego analizar estructura y localizar bugs
En la documentación de bibliotecas de componentes que genera código JSX, garantizar que el estilo del código de ejemplo sea unificado y bonito
Organizar el código de tu proyecto React antes de entrevistas, garantizar que las muestras de código enviadas sigan los estándares de estilo
Formatear código JSX generado por IA antes de ponerlo en proyectos, eliminar el formato inconsistente de la salida de IA
Formatear rápidamente fragmentos de código de componentes en línea al desarrollar proyectos React Native o Next.js

Cómo Usar

Pega el código JSX/TSX en el editor izquierdo, o haz clic en el botón de carga para importar archivos .jsx/.tsx, o carga directamente desde ejemplos
Haz clic en el botón de configuración para ajustar los parámetros de formateo: tamaño de indentación, punto y coma, comillas, comas finales, ancho de impresión, opciones JSX, etc., o mantén la configuración predeterminada
Haz clic en el botón de embellecer (o presiona el atajo) para ejecutar el formateo, el panel derecho muestra instantáneamente los resultados, puedes arrastrar izquierda-derecha para ajustar el ancho del panel
Si se necesita compresión, haz clic en el botón de compresión para cambiar al modo de compresión, el motor Terser producirá código JSX minimizado
Haz clic en el botón de copiar para copiar los resultados al portapapeles, o haz clic en descargar para guardar como archivo, o envía a otros mediante enlace de compartir

Características

Motor Prettier v3 : Basado en Prettier v3 Standalone, el más popular de la industria, junto con el analizador Babel, para resultados consistentes con la extensión Prettier en VS Code, garantizando un estilo de código de equipo unificado
12 configuraciones de formateo : Tamaño de indentación ajustable (2/4/8 espacios o Tab), punto y coma, comillas simples/dobles, comas finales (none/es5/all), espaciado de llaves, paréntesis de función flecha, ancho de impresión, comillas simples JSX, llave JSX en la misma línea, estrategia de comillas de propiedad, y 12 parámetros más
Editor con resaltado de sintaxis JSX : Editor de código profesional basado en CodeMirror 6, soporta resaltado de sintaxis JSX/TSX, números de línea, coincidencia de llaves, con comparación en tiempo real entre la entrada izquierda y los resultados derechos
Función de compresión JSX : Motor de compresión Terser integrado, comprime con un clic el código de componentes JSX al tamaño mínimo, soporta opciones de compresión avanzadas como mangling de nombres de variables, eliminación de código muerto, limpieza de console/debugger, etc.
7 idiomas conmutables libremente : Soporta JavaScript, TypeScript, JSX, TSX, CSS, HTML, JSON — siete lenguajes frontend comunes, una herramienta cubre todas las necesidades de formateo full-stack
Carga y descarga de archivos : Soporta carga directa y formateo de archivos .jsx/.tsx/.js/.ts/.css/.html/.json, que pueden descargarse y guardarse localmente después del procesamiento
Panel de historial : Guarda automáticamente los registros de formateo recientes, soporta retroceso a versiones históricas, y compara efectos de formateo con diferentes configuraciones
Copiar resultados con un clic : El código formateado o comprimido puede copiarse al portapapeles con un clic, directamente pegado en el IDE o proyectos
Función de compartir URL : Codifica el código y la configuración en el hash de la URL mediante compresión LZ-String, copia el enlace para compartir el código completo y los parámetros de formateo
Mensajes de error de sintaxis amigables : Distingue errores de sintaxis de otros errores cuando falla el formateo, proporcionando indicaciones de localización para ayudar a solucionar rápidamente problemas de código
Paneles divididos arrastrables : El ancho de los paneles izquierdo y derecho puede ajustarse libremente arrastrando, adaptándose a diferentes tamaños de pantalla y hábitos de lectura
Procesamiento local en el navegador : Todo el formateo, compresión y análisis se realizan en JavaScript del navegador, el código no se sube a ningún servidor, la seguridad del código fuente está garantizada

Preguntas Frecuentes

¿Cuál es el principio del formateo JSX? ¿Cuál es su relación con Prettier?

Esta herramienta utiliza la versión Prettier v3 Standalone como motor de formateo subyacente, analiza la sintaxis JSX a través del analizador Babel, luego vuelve a generar código bien formateado según las reglas configuradas. Prettier es actualmente la herramienta de formateo de código más popular en el ecosistema frontend, ampliamente utilizada en proyectos React/Vue/Angular. El resultado de formateo de esta herramienta es básicamente consistente con el resultado de formatear archivos JSX con la extensión Prettier en VS Code, adecuado para formateo rápido en línea sin abrir el IDE local.

¿Qué opciones de formateo se soportan? ¿Se puede personalizar la indentación y el estilo de comillas?

Soporta 12 configuraciones de formateo: 1) Tamaño de indentación: 2 espacios/4 espacios/8 espacios o usar Tab; 2) Usar punto y coma; 3) Comillas simples o dobles; 4) Estrategia de coma final: none/es5/all (parámetros de función también incluidos); 5) Espacios dentro de las llaves de objeto; 6) Paréntesis para funciones flecha de un solo parámetro; 7) Ancho de impresión (máximo de caracteres por línea); 8) Comillas simples o dobles para atributos JSX; 9) Llave de cierre de JSX multilínea en la misma línea que el contenido; 10) Estrategia de comillas para propiedades de objeto: as-needed/preserve/consistent; 11) Sensibilidad a espacios en blanco HTML; 12) Usar Tab para indentación. Libremente ajustable en el panel de configuración.

¿El formateo cambia la lógica del código JSX? ¿Es seguro?

El formateo solo ajusta caracteres de espacio (saltos de línea, indentación, espacios) y formas de azúcar sintáctico como comillas y punto y coma, no cambia ninguna lógica de código. Prettier es una herramienta madura verificada por millones de desarrolladores en todo el mundo, y el código formateado es semánticamente completamente equivalente al código original. Sin embargo, ten en cuenta: si el código original en sí tiene errores de sintaxis (como llaves no coincidentes, etiquetas no cerradas), el formateo fallará y mostrará un error de sintaxis, en cuyo caso necesitas corregir primero el problema del código antes de formatear.

¿Cómo se implementa la función de compresión JSX? ¿Qué opciones de compresión se soportan?

La compresión JSX utiliza el motor Terser (uno de los compresores JavaScript más populares de la industria) ejecutado localmente en el navegador. La compresión incluye: eliminar comentarios y espacios extra, acortamiento y mangling de nombres de variables, eliminación de código muerto (dead_code), eliminación de variables no utilizadas (unused), optimización de elevación de funciones/variables, simplificación de expresiones condicionales, optimización de bucles, etc. La compresión primero compila JSX a JavaScript ordinario a través de Babel, luego realiza la optimización de compresión. Nota: el código comprimido tiene una legibilidad significativamente reducida, adecuado para despliegue de producción, no adecuado para desarrollo y depuración.

¿Se soporta TypeScript (TSX)? ¿Cuál es la diferencia con JSX?

Soportado. La herramienta usa por defecto el lenguaje JSX, puedes cambiar al modo TSX a través del menú de conmutación de idioma en la esquina superior izquierda. El modo TSX usa el analizador TypeScript, que puede reconocer correctamente las anotaciones de tipo TypeScript (interface, type, genéricos, aserciones de tipo, etc.), y no reportará errores debido a la sintaxis de tipo. El modo JSX usa el analizador Babel, adecuado para componentes React en JavaScript puro. La compresión TSX eliminará automáticamente primero las anotaciones de tipo antes de realizar la compresión Terser.

¿El código JSX introducido se subirá al servidor? ¿La privacidad y seguridad están garantizadas?

Completamente seguro. Todas las funciones de esta herramienta (formateo, compresión, detección de sintaxis, historial) se realizan localmente en tu navegador a través de JavaScript, el contenido del código no se envía por la red a ningún servidor externo. Prettier y Terser son ambas bibliotecas implementadas en JavaScript puro que pueden ejecutarse directamente en el lado del navegador. Puedes usar esta herramienta sin conexión, todas las funciones siguen funcionando normalmente. El historial se guarda en el localStorage del navegador, solo visible en tu dispositivo actual.

¿Dónde se guarda el historial? ¿Se perderá?

El historial se guarda en el localStorage (almacenamiento local) del navegador, vinculado al navegador y dispositivo específicos. Si borras los datos del navegador, cambias de navegador o usas el modo incógnito, el historial se perderá. El historial se usa para retroceder rápidamente a fragmentos de código formateados recientemente, conveniente para comparar efectos de diferentes configuraciones. Se recomienda guardar tú mismo el código importante como archivos, y no depender únicamente de la función de historial.

¿La función de compartir URL sube el código al servidor?

No. La función de compartir URL comprime el código y la configuración usando LZ-String y los codifica en la parte hash de la URL (contenido después del símbolo #). El hash de URL tiene una característica importante: no se envía al servidor con las solicitudes HTTP, y solo es leído y analizado por JavaScript localmente en el navegador. Cuando el destinatario abre el enlace de compartir, el navegador analiza directamente el hash y descomprime para mostrar el código, todo el proceso no requiere participación del servidor. Pero ten en cuenta: el enlace de compartir contiene el contenido completo del código, si el código es sensible, no lo compartas a través de canales públicos.

¿Qué hacer si el formateo falla con un mensaje de error de sintaxis?

La causa más común de fallo de formateo son errores de sintaxis en el código en sí: 1) Etiquetas JSX no cerradas — verifica que todas las etiquetas estén emparejadas, las etiquetas autocerradas sean correctas (<img /> no <img>); 2) Llaves no coincidentes — verifica si las llaves {}, paréntesis (), corchetes [] están emparejados; 3) Comillas no cerradas — si las comillas de cadena están completas; 4) Sintaxis incorrecta — por ejemplo, usar sintaxis no permitida en JSX. Puedes primero revisar el número de línea y el mensaje de error para localizar el problema, o simplificar el código y solucionar problemas paso a paso.

¿Qué significa el ancho de impresión (print width)? ¿Qué valor debo establecer?

El ancho de impresión (printWidth) es uno de los parámetros centrales de Prettier, que representa el número máximo de caracteres por línea de código. Cuando una línea de código supera este ancho, Prettier la ajusta automáticamente. El valor predeterminado es de 80 caracteres, que es una convención de programación antigua (originada en tarjetas perforadas y ancho de terminal). Valores de configuración comunes: 80 (clásico conservador), 100 (más común), 120 (amigable para pantallas anchas). Establecerlo demasiado pequeño causará ajustes de línea frecuentes haciendo el código más difícil de leer, establecerlo demasiado grande hace que una línea sea demasiado larga para leer en pantallas estrechas. Se recomienda elegir un valor entre 80-120 según las especificaciones del equipo y el ancho del monitor.

¿Para qué sirve la coma final (trailing comma)? ¿Qué modo debo elegir?

La coma final se refiere a agregar una coma después del último elemento en estructuras multilínea como matrices, objetos, parámetros de función, etc. Los beneficios incluyen: 1) Agregar/eliminar elementos solo cambia una línea, el Git diff es más limpio; 2) Evitar errores de sintaxis causados por olvidar agregar comas; 3) Análisis más estable en algunos casos. Prettier ofrece tres modos: none (sin comas finales, más conciso), es5 (agregar solo donde ES5 lo soporta, es decir, matrices y objetos, más compatible), all (agregar donde sea posible, incluyendo parámetros de función, requiere ES2017+ o soporte Babel/TS). Los proyectos modernos recomiendan usar el modo 'all', que está completamente bien con la compilación Babel o TypeScript.

¿Cuáles son los efectos de las comillas simples JSX y la llave JSX en la misma línea?

Comillas simples JSX (jsxSingleQuote): Controla si los valores de los atributos JSX usan comillas simples o dobles. Por defecto desactivado (comillas dobles), lo cual es consistente con las convenciones de atributos HTML. Cuando se activa, las cadenas de atributos en JSX usarán comillas simples. Llave JSX en la misma línea (jsxBracketSameLine): Controla si la llave derecha de cierre (/> o >) de elementos JSX multilínea se coloca al final de la última línea (misma línea), o en una nueva línea (diferente línea). Por defecto desactivado (nueva línea), cuando se activa la llave derecha está en la misma línea que el último atributo. Diferentes equipos tienen diferentes preferencias, simplemente elige el estilo consistente con el proyecto.

¿Se soporta el formateo por lotes de varios archivos?

Actualmente, la herramienta en versión web está diseñada principalmente para escenarios de formateo rápido de archivo único, soportando procesamiento por carga de archivo único. Si tienes una gran cantidad de archivos JSX/TSX que necesitan formateo por lotes, se recomienda instalar la herramienta Prettier CLI en tu proyecto y procesarlos por lotes a través de la línea de comandos (p. ej., npx prettier --write "src/**/*.jsx"). El motor subyacente de esta herramienta es completamente consistente con Prettier, con los mismos resultados de formateo. Versiones futuras podrían considerar agregar funciones de procesamiento por lotes.

¿Se puede usar con ESLint?

Sí. En proyectos reales, se recomienda usar Prettier para el formateo de código (saltos de línea, indentación, espacios, comillas, etc.), y ESLint para la calidad del código (variables no utilizadas, bugs potenciales, mejores prácticas, etc.). La mejor práctica para usar ambos juntos es: 1) Instalar eslint-config-prettier para desactivar las reglas de formateo en ESLint que entran en conflicto con Prettier; 2) Ejecutar primero el formateo Prettier, luego ejecutar las comprobaciones ESLint. Esta herramienta se enfoca en el formateo (lo que Prettier hace bien), y no incluye las funciones de comprobación de código de ESLint.

¿Se puede usar en teléfonos móviles? ¿Cómo es la experiencia móvil?

Se puede usar en navegadores móviles. La herramienta adopta un diseño responsivo, ajustando automáticamente el diseño en dispositivos de pantalla pequeña — los paneles divididos izquierda-derecha se convierten en paneles arriba-abajo, y los botones de la barra de herramientas están optimizados para tamaños amigables al tacto. Sin embargo, la experiencia de edición de código en móvil no es tan buena como en escritorio, se recomienda usarla principalmente en computadoras. Si frecuentemente necesitas procesar código en dispositivos móviles, se recomienda usar una aplicación de editor de código móvil que soporte Prettier.

Solución de problemas

¿Qué hacer si el formateo falla con un mensaje de error de sintaxis?

Primero confirma si el código está completo: los componentes JSX generalmente necesitan export o incluyen al menos una función que devuelve JSX. Los errores de sintaxis comunes incluyen: 1) Etiquetas JSX no cerradas — verifica que cada etiqueta de apertura tenga una etiqueta de cierre correspondiente o una marca de autocierre; 2) Llaves no coincidentes — si los paréntesis de las expresiones {} en JSX están emparejados; 3) Comillas de cadena no cerradas — verifica todas las comillas simples/dobles/acento grave; 4) Uso de palabras reservadas en JSX — p. ej., class debe escribirse como className, for debe escribirse como htmlFor; 5) Múltiples elementos raíz — JSX solo permite un elemento raíz, múltiples elementos deben envolverse con <>...</> o <div>. Los mensajes de error generalmente indican el número de línea y la razón, puedes localizar en consecuencia.

¿Sin respuesta después de cargar un archivo o el formato es incorrecto?

Primero confirma si la extensión del archivo es correcta — los archivos .jsx/.tsx/.js/.ts/.css/.html/.json pueden todos cargarse. Si la extensión del archivo no es estándar, la herramienta puede no reconocer correctamente el formato de lenguaje, resultando en resultados de formateo que no cumplen las expectativas. Soluciones: 1) Asegúrate de que la extensión del archivo esté en formato estándar; 2) Después de cargar, verifica si la selección de idioma en la esquina superior izquierda es correcta, si no puedes cambiar manualmente; 3) Confirma que el contenido del archivo sea texto plano y no binario; 4) Archivos demasiado grandes (más de 1 MB) pueden causar ralentizaciones del navegador, se recomienda usar herramientas de escritorio para el procesamiento.

¿El código formateado es diferente de mis resultados Prettier locales?

Razones posibles: 1) Diferencia de versión — esta herramienta usa Prettier v3, si tu proyecto usa la versión v2, algunos detalles pueden diferir (como cambios en los valores predeterminados de las comas finales); 2) Configuraciones diferentes — verifica si parámetros como ancho de impresión, indentación, comillas, comas finales son consistentes con la configuración del proyecto; 3) Analizador diferente — JSX usa el analizador Babel, TSX usa el analizador TypeScript, confirma la selección correcta; 4) Diferencia de plugins — si Prettier local tiene plugins adicionales instalados (como prettier-plugin-tailwindcss), esta herramienta no incluye estos plugins. Se recomienda ajustar la configuración de esta herramienta para que sea consistente con el .prettierrc del proyecto.

¿El código no se ejecuta correctamente después de la compresión JSX?

La compresión JSX usa el motor Terser, que primero compila JSX a JavaScript ordinario antes de la compresión. Si el código no se ejecuta después de la compresión, verifica: 1) Si la configuración de compresión es demasiado agresiva — p. ej., activar toplevel puede cambiar el comportamiento del módulo; 2) Si se usa eval o acceso dinámico a propiedades en el código — el mangling de variables puede causar incompatibilidad de nombres; 3) Si se dependen de nombres de función o clase específicos — si es así, necesitas activar las opciones keep_fnames o keep_classnames. La compresión del entorno de producción se recomienda realizarse usando herramientas de construcción del proyecto (Vite/Webpack), que tienen una configuración y ecosistema de plugins más completos.

Glosario

JSX: Abreviatura de JavaScript XML, extensión de sintaxis JavaScript introducida por React, que permite escribir estructuras de etiquetas tipo HTML en JS, convertida en llamadas React.createElement() después de la compilación.
Prettier: Actualmente la herramienta de formateo de código opinionated más popular, soporta JS/TS/JSX/TSX/JSON/CSS/HTML/Markdown, etc., se ha convertido en el estándar de facto del formateo de código frontend.
Babel: Compilador JavaScript que puede convertir sintaxis nueva como ES6+/JSX/TS en código ES5 compatible con navegadores antiguos, también sirve como motor subyacente para que Prettier analice JSX.
Terser: El compresor (minifier) JavaScript/JSX más popular de la industria, soporta mangling de variables, eliminación de código muerto, compresión de código, etc., es el compresor predeterminado de herramientas de construcción como Webpack/Vite.
Print Width: Uno de los parámetros centrales de Prettier, que representa el número máximo de caracteres por línea de código, ajuste automático de línea cuando se excede. Predeterminado 80 caracteres, configuraciones comunes son 80/100/120.
Trailing Comma: Agregar una coma después del último elemento en estructuras multilínea como matrices, objetos, parámetros de función, etc. Puede hacer que el Git diff sea más limpio y evitar errores de sintaxis. Prettier soporta tres modos none/es5/all.
Mangle: Tecnología de acortamiento de nombres de variables/funciones en la compresión de código, reemplazando nombres de variables largos y significativos por nombres cortos como a/b/c, reduciendo el volumen del código, aumentando también la dificultad de lectura.
Dead Code Elimination: Tecnología de optimización de compresor que elimina el código que nunca se ejecutará (como código bajo condición false, variables y funciones no utilizadas), reduciendo el tamaño del build de producción.
CodeMirror: El componente de editor de código lado navegador usado por esta herramienta (versión 6), proporcionando funciones de edición profesionales como resaltado de sintaxis, números de línea, coincidencia de llaves, ampliamente utilizado en diversos IDE en línea.
LZ-String: Algoritmo de compresión LZ implementado en JavaScript, utilizado para comprimir y almacenar eficientemente el contenido del código en el hash de URL. Alta tasa de compresión y velocidad de decodificación rápida, adecuado para escenarios de enlaces de compartir.
localStorage: API de almacenamiento clave-valor local proporcionada por los navegadores, capacidad de aproximadamente 5-10MB, los datos persisten (a menos que se borren activamente). Esta herramienta lo usa para almacenar el historial de formateo.
ESLint: Herramienta de comprobación estática de código JavaScript/TypeScript (Linter), principalmente responsable de la calidad del código y las mejores prácticas, generalmente usada con Prettier (Prettier gestiona el formato, ESLint gestiona la calidad).

Lenguajes y formatos de archivo soportados

La herramienta soporta 7 lenguajes frontend comunes, conmutables libremente a través del menú superior izquierdo:

Lenguaje	Extensión de archivo	Motor de formateo	Motor de compresión
JavaScript	`.js, .mjs, .cjs`	Prettier (Babel)	Terser
TypeScript	`.ts, .mts, .cts`	Prettier (TypeScript)	Terser (tipos eliminados primero)
JSX	`.jsx`	Prettier (Babel)	Terser
TSX	`.tsx`	Prettier (TypeScript)	Terser (tipos eliminados primero)
CSS	`.css`	Prettier (PostCSS)	CSSO
HTML	`.html, .htm`	Prettier (HTML)	Implementación personalizada
JSON	`.json`	Prettier (JSON)	JSON.stringify

Visión general de elementos de configuración de formateo

12 parámetros de formateo configurables y sus efectos:

Elemento de configuración	Valores posibles	Valor predeterminado	Descripción
tabWidth Tamaño de indentación	`2 / 4 / 8 / Tab`	`2 espacios`	Número de espacios por nivel de indentación, o usar carácter Tab
semi Punto y coma	`true / false`	`true`	Agregar o no punto y coma al final de las declaraciones
singleQuote Comillas simples	`true / false`	`false (comillas dobles)`	Las cadenas JS usan comillas simples o dobles
trailingComma Coma final	`none / es5 / all`	`es5`	Agregar o no coma final después del último elemento en estructuras multilínea
bracketSpacing Espaciado de llaves	`true / false`	`true`	Agregar o no espacios dentro de las llaves de objeto
arrowParens Paréntesis de flecha	`always / avoid`	`always`	Agregar o no paréntesis para funciones flecha de un solo parámetro
printWidth Ancho de impresión	`número (recomendado 80-120)`	`80`	Máximo de caracteres por línea, ajuste automático cuando se excede
jsxSingleQuote Comillas simples JSX	`true / false`	`false`	Los valores de atributos JSX usan comillas simples (predeterminado comillas dobles)
jsxBracketSameLine Llave JSX misma línea	`true / false`	`false`	La llave derecha de JSX multilínea está en la misma línea que el último atributo
quoteProps Comillas de propiedad	`as-needed / preserve / consistent`	`as-needed`	Cuándo agregar comillas a los nombres de propiedades de objeto

Comparación antes y después de la compresión JSX

Usando un componente React típico como ejemplo, mostrando el cambio de volumen antes y después de la compresión:

Elemento de comparación	Formateado (Desarrollo)	Comprimido (Producción)	Tasa de compresión
Tamaño del código	~ 2,5 KB	~ 0,8 KB	`~68%`
Número de líneas	~ 80 líneas	1 línea	`~99%`
Nombres de variables	Nombres significativos	Letras simples a/b/c/d	`—`
Comentarios	Todos los comentarios conservados	Todos eliminados	`—`
Legibilidad	Alta (depurable y legible)	Muy baja (solo legible por máquina)	`—`
Casos de uso	Desarrollo, depuración, revisión	Despliegue producción, distribución CDN	`—`

Privacy & Security

Todas las operaciones de esta herramienta formateadora JSX se realizan completamente localmente en el navegador: el código que introduces o cargas solo se formatea y comprime en el JavaScript del navegador, y no se enviará por la red a ningún servidor externo. Prettier y Terser son ambas bibliotecas JavaScript puras que pueden ejecutarse directamente en el lado del navegador. El historial se guarda en el localStorage (almacenamiento local) del navegador, solo visible en el dispositivo y navegador actuales. La función de compartir URL comprime el código mediante LZ-String y lo codifica en la parte hash de la URL (el contenido después de # no se envía al servidor). La página no utiliza seguimiento por Cookie, y no recopila el contenido del código introducido por los usuarios. Puedes usar esta herramienta sin conexión, las funciones principales están normalmente disponibles.

Authoritative References

prettier.ioDocumentación oficial de Prettier
terser.orgTerser - Compresor JavaScript
react.devDocumentación oficial de React - Introducción a JSX