Pretty TypeScript Errors
Para entender de un vistazo los errores complejos de TypeScript dentro de VS Code.
Extensión de VS Code que muestra los errores de TypeScript de forma legible y con resaltado de sintaxis.
Notas y contexto
Qué es
Pretty TypeScript Errors es una extensión gratuita de Visual Studio Code creada por Yoav Bls. Reformatea los mensajes de error del compilador de TypeScript, que suelen ser largos y crípticos, para mostrarlos de forma estructurada, con resaltado de sintaxis acorde a tu tema y con enlaces de ayuda. Está escrita en TypeScript bajo licencia MIT y ganó un premio en la JSNation 2023.
Para qué sirve
- Leer errores de tipos complejos de TypeScript en un formato claro en lugar de una sola línea ilegible.
- Resaltar con colores las anotaciones de tipo dentro del mensaje de error para distinguirlas mejor.
- Saltar a la declaración del tipo implicado mediante botones dentro del propio error.
- Acceder a explicaciones externas (typescript.tv, ts-error-translator) para errores difíciles.
Cuándo usarlo
Es útil para cualquiera que trabaje a diario con TypeScript en VS Code, sobre todo en proyectos con tipos genéricos, condicionales o inferencias profundas donde los mensajes nativos son difíciles de interpretar. Funciona con Node, Deno, React, Solid, Qwik, Astro, Svelte, Vue, Ember y Glint, y con ficheros .ts, .tsx, .js, .jsx, .mdx, .astro, .svelte, .vue, .hbs, .gjs y .gts. Si solo escribes JavaScript sin tipos, no aporta nada.
Ejemplo
Instalación desde la línea de comandos:
code --install-extension yoavbls.pretty-ts-errorsTambién puedes buscar “Pretty TypeScript Errors” en la pestaña de extensiones de VS Code e instalarla con un clic. Una vez instalada, los errores de TypeScript que aparecen al pasar el ratón o en el panel de problemas se muestran automáticamente con el nuevo formato, sin configuración adicional.
Puntos clave
- Resaltado de sintaxis con los colores de tu tema, tanto en modo claro como oscuro.
- Botones para navegar a la declaración del tipo desde el mensaje de error.
- Enlaces integrados a recursos externos que traducen los errores a lenguaje sencillo.
- Soporte amplio de frameworks y extensiones de fichero, más allá de los .ts.
Ten en cuenta
Es una extensión exclusiva de VS Code, por lo que no funciona en otros editores. Solo aporta valor en proyectos con TypeScript; si trabajas únicamente con JavaScript sin anotaciones de tipo, no notarás cambios. El proyecto se mantiene activo y está publicado bajo licencia MIT.