Formateador JSX
Formatea y embellece JSX con resaltado de sintaxis
Entrada
Salida formateada
¿Qué es el formateador JSX?
JSX es JavaScript con sintaxis similar a XML para componentes React. El formateador JSX añade sangría y saltos de línea al código JSX/React. La documentación JSX de React define la sintaxis. Los formateadores estándar de JavaScript pueden no manejar JSX correctamente.
Esta herramienta se ejecuta por completo en tu navegador. No se envía nada a un servidor. Pega JSX o sube un archivo .jsx o .js; obtén salida formateada. Para JavaScript puro, usa Formateador JavaScript. Para validación, usa Validador JavaScript. Para conversión a TypeScript, usa JavaScript a TypeScript.
Cómo usar esta herramienta
Pegar o subir
Pega código JSX o React en el panel izquierdo o sube un archivo .jsx o .js. Usa Ejemplo para cargar código de ejemplo. Usa Borrar para restablecer.
Revisar la salida
El panel derecho muestra JSX formateado con sangría adecuada. JSX inválido mostrará un error.
Copiar o descargar
Usa Copiar o Descargar para obtener el resultado. Para ejecutar código, usa Consola JavaScript. Para minificar, usa Minificador JavaScript.
Ejemplos del formateador JSX
Aquí hay un ejemplo de formateo de código JSX/React minificado.
Ejemplo: componente de tarjeta de suscriptor
Entrada JSX minificada:
Salida formateada:
Cuándo ayuda el formateador JSX
Al trabajar con React, Next.js u otros marcos basados en JSX, este formateador maneja la mezcla de JavaScript y XML. Ideal para componentes, hooks y plantillas JSX. Herramientas de build como webpack y Vite suelen transformar JSX con Babel. Para JS puro, usa Formateador JavaScript.
Preguntas frecuentes
¿Son privados mis datos?
Sí. El formateo se ejecuta por completo en tu navegador. No se envían datos a ningún servidor.
¿Formateador JSX vs formateador JS?
El formateador JSX entiende la sintaxis JSX (etiquetas, props). El formateador JS es para JavaScript puro. Usa el formateador JSX para código React.
¿Admite TypeScript/TSX?
Puede manejar TSX en algunos casos. Para formateo centrado en TypeScript, revisa la salida.
¿Y las plantillas Vue?
Vue usa una sintaxis de plantilla distinta. Esta herramienta es para JSX/React.