Repolode
Submit
yoavbls

yoavbls/pretty-ts-errors

A VSCode extension that reformats TypeScript error messages into readable, syntax-highlighted types with links to docs and explanations.

View on GitHubWebsite
Stars
14,096
Forks
113
Open issues
21
Last commit
3 days ago

What is it?

TypeScript error messages become hard to read as types grow complex, often filled with nested parentheses, truncated segments and placeholder markers like "...". Pretty TS Errors is a VSCode extension that rewrites these messages so the types are easier to scan and understand.

The extension highlights types in error messages using your current theme colors, in both light and dark modes. Next to each type it adds a button that jumps to the relevant type declaration, and buttons that open a detailed explanation on typescript.tv or a plain-English translation on ts-error-translator.

It works with errors from Node and Deno in .ts files, JSDoc type errors in .js and .jsx files, React, Solid and Qwik in .tsx and .mdx files, Astro, Svelte and Vue files when TypeScript is enabled, and Ember and Glimmer templates reported by Glint.

Key features

  • 01Syntax highlights types in error messages using your theme colors
  • 02Button to jump to the relevant type declaration beside each type
  • 03Links to typescript.tv for detailed explanations of errors
  • 04Link to ts-error-translator for plain-English error descriptions
  • 05Supports TypeScript errors in .ts, .tsx, .js, Astro, Svelte, Vue and Glimmer files

Use cases

  • Debugging complex generic or utility types whose errors are hard to read
  • Learning TypeScript by understanding what the compiler is complaining about
  • Working in React, Vue, Svelte or Astro projects with heavy type checking

Quick start

  1. 1

    Install the extension from the command line

    code --install-extension yoavbls.pretty-ts-errors
  2. 2

    Or search for pretty-ts-errors in the VSCode marketplace

Things to know

  • Works only inside VSCode (and Cursor), with JetBrains support only requested, not available.
  • Making the types copyable requires a manual workaround that hides the original errors.

Topics

#typescript#vscode#vscode-extension#developer-experience#error-handling#editor#astro#deno#errors#svelte

FAQ

What is pretty-ts-errors?
A VSCode extension that reformats TypeScript error messages into readable, syntax-highlighted types with links to docs and explanations. TypeScript error messages become hard to read as types grow complex, often filled with nested parentheses, truncated segments and placeholder markers like "...". Pretty TS Errors is a VSCode extension that rewrites these messages so the types are easier to scan and understand.
Is pretty-ts-errors free to use? What license does it have?
pretty-ts-errors is open source under the MIT license. Check the license terms before using it in commercial products.
Is pretty-ts-errors still maintained?
Actively maintained. The last commit to pretty-ts-errors was on Oct 18, 2026.
What can I use pretty-ts-errors for?
Debugging complex generic or utility types whose errors are hard to read Learning TypeScript by understanding what the compiler is complaining about Working in React, Vue, Svelte or Astro projects with heavy type checking
How do I install pretty-ts-errors?
Install the extension from the command line: code --install-extension yoavbls.pretty-ts-errors Or search for pretty-ts-errors in the VSCode marketplace
Where can I get pretty-ts-errors?
The source code and installation instructions are on GitHub: https://github.com/yoavbls/pretty-ts-errors

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects