opensourceprojects.dev

A broadsheet for software that doesn't ask for your email

Stop squinting at TypeScript's nested error types in VSCode
GitHub RepoImpressions4

Project Description

View on GitHub

Stop Squinting at TypeScript Error Types in VSCode

If you've written any serious TypeScript, you know the pain. You hover over a type, expecting something readable, and instead you get a wall of nested generics with fifteen levels of Promise<Partial<...>>. It's not that TypeScript is wrong, it's just that its error messages are written for machines, not humans.

That's where pretty-ts-errors comes in. It's a tiny extension that makes TypeScript's type errors actually readable. Not a rewrite, not a language server takeover, just a visual cleanup layer. And it's surprisingly good at what it does.

What It Does

pretty-ts-errors is a VSCode extension that reformats how TypeScript displays type information in hover tooltips, error messages, and IntelliSense. Instead of showing you the raw, deeply nested type tree, it collapses the noise and highlights the parts that actually matter.

Under the hood, it parses the type information VSCode already sends to the editor, then applies smarter formatting rules. It groups related types, removes redundant wrappers, and uses color coding to distinguish between different layers. The result is a much cleaner read, especially for complex generics or utility types.

Why It's Cool

The best part is that it doesn't change your actual type checking. Your code compiles the same way, the types are still strict, it's purely a presentation layer. That's a huge deal, because you're not trading safety for readability.

It also handles the nasty cases really well. Things like conditional types, mapped types, and deeply nested Pick or Omit structures which usually turn into a mess, they get flattened and annotated in a way that makes sense. You can finally see what the shape of the data actually is, not just the operation that created it.

There's no setup, no config file, no learning curve. Install it, and it just works. That's the kind of tooling that feels like it should have been built into the editor from day one.

How to Try It

You can install it directly from the VSCode marketplace, or grab the code from the repo:

# From the VSCode marketplace
ext install yoavbls.pretty-ts-errors

Or if you prefer to build from source, clone the repo, run npm install, and launch it with F5 in VSCode. It's a standard extension project, so the setup is straightforward.

The README in the repo has a few before and after screenshots that honestly do a better job than any description. If you're on Windows, macOS, or Linux, it works the same across all of them.

Final Thoughts

I'm not going to say this transforms TypeScript development overnight, because it doesn't change the language itself. But it does remove one of the most annoying friction points, which is just trying to understand what the compiler is telling you.

For anyone who works with heavy generic types, API clients with complex response shapes, or just someone who gets tired of the twenty line type errors, give it a shot. It's free, it's small, and it's the kind of quality of life improvement that you'll forget you didn't have before.

Follow us: @githubprojects

Back to Projects
Project ID: b7f4e161-ace1-4754-811f-26ae67c0d8b2Last updated: August 3, 2026 at 02:43 AM