Formateador de TypeScript
Un preajuste de Formateador de JavaScript
Formatea TypeScript con soporte completo para anotaciones de tipo, genéricos, decoradores e interfaces. Usa el analizador de TypeScript en lugar del de JavaScript, así que la sintaxis de tipos se entiende en lugar de tratarse como un error.
- Los archivos nunca salen de tu dispositivo
- Gratis, sin registro
- Sin marcas de agua
- Funciona sin conexión una vez cargado
Cómo formateador de javascript
- 1
Pega tu código
JavaScript, TypeScript o JSX.
- 2
Establece tu estilo
Indentación, punto y coma y preferencia de comillas.
- 3
Copia el resultado
Formateado exactamente como lo haría Prettier en tu editor.
Por qué TypeScript necesita su propio analizador en lugar de reutilizar el de JavaScript
TypeScript es un superconjunto de JavaScript, pero la sintaxis a nivel de tipo que añade — interfaces, genéricos restringidos con `extends`, decoradores, aserciones de tipo `as`, y declaraciones independientes de solo tipo — no tiene ningún significado en la gramática de JavaScript plano y hace que un analizador solo de JavaScript falle directamente en TypeScript perfectamente válido. Usar el analizador dedicado de TypeScript en lugar de intentar forzar al de JavaScript a aceptar un superconjunto de su propia gramática es lo que permite que un archivo lleno de genéricos e interfaces se formatee correctamente en lugar de ser rechazado como un error de sintaxis en el momento en que usa una característica que JavaScript en sí no tiene.
JSX dentro de TypeScript, específicamente
Un archivo `.tsx` que combina sintaxis JSX con anotaciones de tipo de TypeScript es genuinamente ambiguo de analizar en un punto particular: una aserción de tipo entre corchetes angulares como `<Foo>value` se ve idéntica al inicio de una etiqueta de elemento JSX para un analizador al que no se le ha dicho qué dialecto está leyendo. Seleccionar el modo de análisis TypeScript-con-JSX resuelve esa ambigüedad correctamente, por lo que elegir el dialecto correcto de antemano — en lugar de asumir que un analizador JavaScript genérico lo resolverá — importa específicamente para archivos de componente que mezclan los dos.
Los decoradores siguen siendo una parte en evolución de la sintaxis
Los decoradores — las anotaciones estilo `@Component` comunes en Angular y en algunos frameworks de backend construidos sobre TypeScript — han pasado por varias etapas de propuesta distintas en el proceso de estandarización del lenguaje, y distintas bases de código pueden apuntar a versiones ligeramente distintas de esa sintaxis según cuándo se escribieron y qué opciones de compilador usan. Analizar correctamente la sintaxis de decoradores requiere específicamente el analizador consciente de TypeScript; un analizador de JavaScript plano que encuentra un `@` antes de una clase o método no tiene ningún significado definido al que recurrir y rechazará el archivo directamente.
Preguntas frecuentes
¿Es lo mismo que ejecutar Prettier localmente?
Sí — es el propio Prettier, ejecutándose en tu navegador en lugar de en Node. Con las mismas opciones obtienes una salida idéntica byte por byte a `npx prettier` en el mismo archivo.
¿Por qué no usar un formateador más simple?
Porque los formateadores ingenuos rompen código real. Las llaves dentro de literales de plantilla y expresiones regulares, JSX, y la inserción automática de punto y coma todos requieren analizar realmente el lenguaje. Un formateador que corrompe silenciosamente un archivo de cada cincuenta es peor que ninguno.
¿Funciona con TypeScript y JSX?
Sí. Las anotaciones de tipo, los genéricos, los decoradores y JSX se analizan todos. Ten en cuenta que solo formatea — no verifica tipos ni compila.
¿Por qué falló el formateo?
El código tiene un error de sintaxis — Prettier debe analizarlo antes de poder imprimirlo. El mensaje incluye la línea y columna del primer problema, que normalmente es suficiente para encontrarlo.
¿Se envía mi código a un servidor?
No. Prettier se descarga a tu navegador y se ejecuta ahí. El código propietario nunca sale de tu máquina, lo cual no es cierto en la mayoría de formateadores online.
También podrías necesitar
Formateador de JSON
Formatea, valida y minifica JSON al instante
Formateador de HTML
Embellece e indenta HTML correctamente
Formateador de CSS
Embellece o minifica hojas de estilo
Codificador y decodificador Base64
Codifica y decodifica Base64 y Base64URL
Minificador de CSS
Reduce hojas de estilo con un minificador que realmente entiende CSS
Generador de hash
MD5, SHA-1, SHA-256, SHA-384 y SHA-512
Minificador de JS
Reduce JavaScript con una minificación real, no con expresiones regulares
Decodificador de JWT
Decodifica e inspecciona JSON Web Tokens