yoavbls/pretty-ts-errors

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.