pretty-ts-errors
A VSCode extension that reformats TypeScript's notoriously dense error messages into readable, syntax-highlighted output, adding inline links to type declarations and external explanation resources.
Embed badge
[](https://opensources.dev/resource/pretty-ts-errors)MITPermissive — free to use in commercial and proprietary software, with attribution.View license →
Production readiness
4/5- Actively maintainedCommits in the last 6 months
- No known vulnerabilitiesNot yet scanned
- Clear, usable licenseMIT (permissive)
- Proven adoptionWidely used
- Has documentationDocumentation indexed
npm install pretty-ts-errorsOur analysis
An editor extension (primarily VSCode) that intercepts TypeScript diagnostics and renders them as formatted, theme-aware, syntax-highlighted error messages with navigation buttons to declarations and external explainers.
When to use pretty-ts-errors
Use it when working in TypeScript-heavy codebases with complex generic or inferred types, where raw compiler errors become walls of truncated parentheses and ellipses. It's especially valuable for teaching, debugging library types, and onboarding developers who struggle to parse TS error output.
When not to
It offers no value outside VSCode-family editors (JetBrains/Neovim users need other solutions), and adds nothing if you mostly write simple, weakly-typed code where errors are already legible. It's a presentation aid, not a type-checking or linting tool.
Strengths
- Dramatically improves readability of dense TS errors with real syntax highlighting
- Broad file-type support: React, Solid, Qwik, Astro, Svelte, Vue, Glint/Ember, JSDoc
- Zero configuration — install and it just works
- Inline links to type declarations and external explanation sites speed debugging
- Large community endorsement and active interest
Trade-offs
- Locked to VSCode; no first-party JetBrains/Neovim support
- Pretty errors aren't copyable due to VSCode markdown rendering hacks
- Requires a workaround to hide the original duplicate error pane
- Relies on parsing inconsistent, sometimes truncated TS error strings, so edge cases can render imperfectly
- Purely cosmetic — doesn't change what TypeScript reports
Maturity
Mature and widely adopted (14k+ stars, prominent endorsements from well-known TS figures), distributed via the VSCode marketplace with steady installs. The single-platform dependence and reliance on rendering hacks are inherent constraints rather than signs of immaturity.
Pretty TypeScript Errors
Make TypeScript errors prettier and human-readable in VSCode.
TypeScript errors become messier as the complexity of types increases. At some point, TypeScript will throw on you a shitty heap of parentheses and "...".
This extension will help you understand what's going on. For example, in this relatively simple error:
Watch this
and others from: Web Dev Simplified, Josh tried coding, trash dev, and more
Features
Syntax highlighting with your theme colors for types in error messages, supporting both light and dark themes
A button that leads you to the relevant type declaration next to the type in the error message
A button that navigates you to the error at typescript.tv, where you can find a detailed explanation, sometimes with a video
A button that navigates you to ts-error-translator, where you can read the error in plain English
Supports
Node and Deno TypeScript error reporters (in
.tsfiles)JSDoc type errors (in
.jsand.jsxfiles)React, Solid and Qwik errors (in
.tsxand.mdxfiles)Astro, Svelte and Vue files when TypeScript is enabled (in
.astro,.svelteand.vuefiles)Ember and Glimmer TypeScript errors and template issues reported by Glint (in
.hbs,.gjs, and.gtsfiles)
Installation
code --install-extension yoavbls.pretty-ts-errors
Or simply by searching for pretty-ts-errors in the VSCode marketplace
How to hide the original errors and make the types copyable
Follow the instructions there. unfortunately, this hack is required because of VSCode limitations.
Why isn't it trivial
TypeScript errors contain types that are not valid in TypeScript. Yes, these types include things like
... more ...,{ ... }, etc in an inconsistent manner. Some are also cutting in the middle because they're too long.Types can't be syntax highlighted in code blocks because the part of
type X = ...is missing, so I needed to create a new TextMate grammar, a superset of TypeScript grammar calledtype.VSCode markdown blocks all styling options, so I had to find hacks to style the error messages. e.g., there isn't an inlined code block on VSCode markdown, so I used a code block inside a codicon icon, which is the only thing that can be inlined. That's why it can't be copied. but it isn't a problem because you can still hover on the error and copy things from the original error pane.
Hype section
Stars from stars
Sponsorship
Every penny will be invested in other contributors to the project, especially ones that work on things that I can't be doing myself like adding support to the extension for other IDEs 🫂
Contribution
Help by upvoting or commenting on issues we need to be resolved here Any other contribution is welcome. Feel free to open any issue / PR you think.