Formateador de TypeScript
Pega TypeScript o TSX y obtén código limpio y formateado de forma coherente con Prettier, el formateador que usan la mayoría de los proyectos TypeScript. Elige el ancho de línea, la sangría, el punto y coma y el estilo de comillas; los errores de sintaxis se muestran con la línea y la columna exactas.
Última actualización:
Consejo: pulsa Ctrl + Intro para formatear; Tab aplica sangría dentro del editor (pulsa antes Esc para mover el foco). El formateo se hace localmente con Prettier; tu código nunca se sube.
Cómo usar Formateador de TypeScript
- Pega tu código en la entrada de TypeScript, abre un archivo .ts o .tsx, o carga un ejemplo.
- Elige el estilo: ancho de línea, sangría, comillas, comas finales, punto y coma y paréntesis en funciones flecha.
- Pulsa Formatear TypeScript (o Ctrl + Intro). Con Formatear mientras escribo activado, el resultado se actualiza mientras editas.
- Corrige los errores de sintaxis si aparecen: el mensaje indica la línea y la columna, y Mostrar en la entrada te lleva al punto exacto.
- Copia o descarga el código formateado, o pulsa Usar resultado como entrada para seguir editándolo.
Opciones de Prettier y sus nombres en .prettierrc
Cada opción de la herramienta corresponde a un ajuste de Prettier, así que puedes copiar tus elecciones en un archivo .prettierrc y obtener el mismo resultado en tu editor y en tu CI:
| Opción en esta herramienta | Clave en .prettierrc | Predeterminado | Efecto |
|---|---|---|---|
| Ancho de línea | printWidth | 80 | Longitud de línea en la que el printer intenta encajar el código. |
| Sangría | tabWidth, useTabs | 2, false | Espacios por nivel o caracteres de tabulación. |
| Punto y coma | semi | true | Desactivado no imprime punto y coma y añade un ; inicial solo donde la ASI rompería el código. |
| Comillas | singleQuote | false | Prettier sigue eligiendo la comilla que necesita menos escapes. |
| Comas finales | trailingComma | "all" | "all", "es5" o "none" en listas de varias líneas. |
| Espacios entre llaves | bracketSpacing | true | { a, b } frente a {a, b}. |
| Paréntesis en flechas | arrowParens | "always" | (x) => x frente a x => x. |
Ejemplo de .prettierrc: { "printWidth": 100, "singleQuote": true, "trailingComma": "all" }
Errores de sintaxis comunes en TypeScript
- ',' expected o ')' expected: falta una coma entre parámetros o miembros de un objeto, o hay un paréntesis que nunca se cerró.
- '}' expected: el cuerpo de un bloque, clase o interfaz no está cerrado; la línea indicada suele estar al final del archivo, así que busca hacia arriba la llave de apertura.
- Unterminated string literal: falta una comilla o se pegaron comillas tipográficas (“ ”) desde un documento. Los template literals usan comillas invertidas.
- JSX element has no corresponding closing tag: en TSX todos los elementos deben cerrarse, incluidos los elementos vacíos como
<br />y<input />. - Expression expected en un
<: el archivo contiene JSX pero se está analizando como .ts normal. Selecciona TSX.
¿Solo quieres saber si un JavaScript normal se analiza bien? Usa el Comprobador de sintaxis JavaScript. ¿Generas interfaces a partir de la respuesta de una API? Prueba JSON a TypeScript.
Preguntas frecuentes
¿Se sube mi código a un servidor?
No. Prettier y su analizador de TypeScript se descargan una vez como archivos JavaScript y se ejecutan dentro de la pestaña de tu navegador. El código que pegas nunca se envía a ningún sitio, así que es seguro para código privado o propietario.
¿El resultado es el mismo que con Prettier en VS Code?
Sí, siempre que las opciones coincidan. La herramienta ejecuta Prettier 3 con el analizador typescript, el mismo motor que usan la extensión de Prettier para VS Code y la línea de comandos prettier. Configura los mismos valores de ancho de línea, ancho de tabulación, comillas, punto y coma y comas finales que en tu .prettierrc.
¿El formateador comprueba los tipos?
No. Analiza la sintaxis y la vuelve a imprimir; no ejecuta el comprobador de tipos del compilador de TypeScript. El código con errores de tipo, como un tipo de argumento incorrecto, se formatea con normalidad, mientras que el código con errores de sintaxis, como un corchete que falta, se rechaza indicando la ubicación del error.
¿Cómo formateo TSX o componentes de React?
Elige TSX / React (.tsx) o deja Lenguaje en Automático: si el código contiene JSX, la herramienta lo analiza como TSX. Ten en cuenta que la antigua sintaxis de aserción de tipo <Type>value no está permitida en archivos .tsx; usa value as Type en su lugar.
¿Para qué sirve el ancho de línea?
El ancho de línea es la longitud de línea que Prettier intenta no superar. Es un objetivo, no un límite estricto: las cadenas largas, las URL o el código muy anidado pueden superarlo. 80 es el valor predeterminado de Prettier; muchos equipos usan 100 o 120.
¿Qué diferencia hay entre las opciones de comas finales?
All (el valor predeterminado de Prettier 3) añade comas finales donde TypeScript lo permite, incluidos los parámetros de funciones y las listas de parámetros de tipo. ES5 solo las añade en arrays y objetos. None las elimina. Las comas finales hacen que los diffs de git sean más limpios cuando se añaden elementos.
¿Por qué se conservan algunas líneas en blanco o comentarios?
Prettier conserva las líneas en blanco simples entre sentencias y mantiene los comentarios, porque aportan significado para quien lee el código. Varias líneas en blanco seguidas se reducen a una.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.