// the find
yoavbls/pretty-ts-errors
🔵 Make TypeScript errors prettier and human-readable in VSCode 🎀
A VS Code extension that reformats TypeScript's hover and Problems-panel errors into readable, syntax-highlighted types, with buttons that jump to the type declaration or to an explanation of the error. It is for developers who regularly get walls of angle brackets and parentheses from generic-heavy code, and it covers plain .ts, JSDoc, React, Vue, Svelte, Astro and Glint templates.
The formatting logic lives in its own package (packages/formatter) with snapshot tests, so the parsing can be checked without launching VS Code. The custom `type` TextMate grammar is the right answer to the fact that much of what TypeScript prints is not valid TypeScript, so highlighting still works where the stock grammar would give up. The hover and sidebar paths have separate prettifiers, and a getDiagnosticCacheKey module with its own test file suggests results are cached rather than recomputed on every hover. Ember and Glint template support is unusual for an extension of this kind.
You cannot copy the formatted type from the hover itself. The README says the workaround is a CSS hack that hides VS Code's original errors, shipped as docs/pretty-ts-errors-hack.css, which depends on VS Code's markup and will need upkeep when that markup changes. The formatter parses the human-readable text of TypeScript diagnostics, so any TypeScript release that rewords a message can break formatting silently, and the test fixtures in errorMessageMocks.ts are hand-written rather than captured from a compiler run. The explanation buttons send users to two third-party sites, typescript.tv and a Vercel-hosted translator, so they stop working if either goes away.