pretty-ts-errors
🔵 Make TypeScript errors prettier and human-readable in VSCode 🎀
A VSCode extension that reformats hard-to-read TypeScript error messages with syntax highlighting, clickable type links, and plain-English translations shown directly in the editor.
TypeScript is a programming language that adds strict type rules to JavaScript. When those rules are violated, the code editor shows an error message. As projects grow more complex, those error messages can become very long and hard to read, packed with nested type names, ellipses, and technical notation that is difficult to follow at a glance.
Pretty TypeScript Errors is a VSCode extension that reformats those error messages to make them easier to understand. It applies syntax highlighting to type names inside error messages using your existing editor color theme, so individual types stand out visually instead of blending into a wall of text. It also adds links directly inside the error panel: one link jumps to the relevant type declaration in your codebase, a second opens the error on typescript.tv where written explanations are available, and a third opens the error on a site called ts-error-translator that shows the message rewritten in plain English.
The extension works with TypeScript files but also covers JSDoc type errors in plain JavaScript files, and frameworks like React, Solid, Qwik, Astro, Svelte, and Vue when TypeScript is enabled. Ember and Glimmer template errors are supported too.
Installation is one command in the terminal or a search in the VSCode marketplace. The extension won a productivity award at JSNation 2023 and has been covered in several developer video channels. The README explains some of the technical challenges involved, including the need to create a custom grammar for syntax highlighting since TypeScript error messages contain types that are not valid TypeScript on their own.
Where it fits
- Read complex TypeScript generic type errors at a glance without decoding a wall of nested text.
- Jump from an error message directly to the type declaration in your codebase with one click.
- Open an error on ts-error-translator or typescript.tv to see a plain-English rewrite or video explanation.
- Use in React, Svelte, Vue, Astro, or Solid projects to get formatted errors for framework-specific type issues.