01
Elegir la gramática
Usa TS si hay tipos y TSX si además hay JSX. Los signos angulares pueden tener otro significado en el modo equivocado.
- El ejemplo carga un fragmento válido para el modo actual.
HTML / CSS Dev Tools
Formateador de JavaScript
Elige la sintaxis y el estilo; compara el código original con el resultado.
Formateador de JavaScript
Código fuente
Tu código permanece en esta pestaña; no se sube.
Resultado formateado
Pega código o carga un ejemplo.
Cuando un fragmento llega desde una incidencia con espacios desordenados, cuesta revisar lo que hace. El Formateador de JavaScript deja el original a la izquierda y muestra a la derecha JS, JSX, TS o TSX reorganizado.
Este Formateador de JavaScript analiza la gramática antes de imprimir el código. No trata las plantillas, las etiquetas JSX ni los tipos como si fueran solo espacios que hay que sustituir. Funciona también como embellecedor JavaScript para fragmentos breves.
Por qué usar este Formateador de JavaScript
El modo explícito y la comparación ayudan a detectar cada cambio.
Cuatro modos de sintaxis
Escoge JS, JSX, TS o TSX. Un componente TSX conserva tipos y etiquetas; no se presenta como JS ejecutable para minificarlo por error.
La fuente nunca se reemplaza
Cambia sangría, comillas, puntos y coma, ancho o comas finales sin perder el texto de entrada. El Formateador de JavaScript invalida la salida anterior hasta recalcularla.
Tres comprobaciones antes de exportar
02
Ajustar el estilo
La ejecución automática espera 350 ms desde el último cambio y se repite al cambiar opciones. Si la desactivas, aparece el botón manual.
- En modo manual también funciona Ctrl/Cmd+Enter.
03
Comprobar la vigencia
Copiar y descargar se bloquean tras modificar el texto o las opciones. Un error señala la primera línea y columna.
- Comprobar la sintaxis no equivale a revisar los tipos de TypeScript.
Qué hace el motor de código
JS, JSX, TS y TSX
Prettier emplea el analizador adecuado para JavaScript, JSX, anotaciones TypeScript y componentes TSX.
Opciones de estilo visibles
Elige dos o cuatro espacios, tabuladores, comillas, puntos y coma, ancho y comas finales sin tocar el panel fuente.
Revisión y minificación
La comprobación de sintaxis es independiente. Terser minifica solo JS normal y entrega un archivo .min.js.
Límites de la transformación
- No comprueba los tipos
- Que el analizador acepte el fragmento no garantiza los tipos. No se cargan tsconfig.json, dependencias ni reglas ESLint del proyecto.
- Minificar exige JS normal
- JSX, TS y TSX deben pasar primero por tu compilación para producir JS. El botón de minificación queda desactivado en esos modos.
- No inventa código faltante
- Una cadena o llave sin cerrar provoca un error con línea y columna. El Formateador de JavaScript no repara ni ejecuta el código pegado.
- No lee configuración local
- Solo se aplican las opciones visibles. No se importan archivos .prettierrc, complementos ni reglas de ignorar.
Preguntas sobre el Formateador de JavaScript
¿Soporta TypeScript, no solo JavaScript?
Sí. Elige TypeScript o TSX cuando haya tipos. La herramienta los conserva; no convierte el código a JavaScript ejecutable.
¿En qué se diferencia "Minificar" de las otras opciones?
Formatear mejora la lectura, mientras que minificar reduce JS normal. Para TS, TSX o JSX primero hay que transpilar en el proyecto.
¿Puede romper mi código?
La salida de formato busca conservar la sintaxis, pero conviene revisar y probar el código. La minificación transforma la estructura y puede eliminar comentarios.
¿Mi código se sube a algún lugar?
No. El fragmento se procesa dentro del navegador; este servicio no lo sube ni lo añade a la URL.
¿Por qué dice que hay un error de sintaxis?
El modo seleccionado no pudo analizar una parte del texto. Revisa la línea y columna indicadas y confirma si corresponde JS, JSX, TS o TSX.
¿Falta una respuesta?
Usa el Formateador de JavaScript
Vuelve al editor, escoge el modo y compara la salida vigente con el original antes de copiarla.
Procesado localmente en el navegador.