Skip to content
Get packs

Guide · Open source

How to use pretty-ts-errors in VS Code: install and read errors

Updated · written with AI from the project's own documentation and checked against our catalogue data

pretty-ts-errors is a free, MIT-licensed Visual Studio Code extension that reformats TypeScript error messages so they are easier to read. It is aimed at people who write TypeScript in VS Code and find long, truncated type errors hard to follow. This guide shows you how to install it, what the formatted errors give you, and where it has limits.

Pretty TypeScript Errorsyoavbls/pretty-ts-errors · ★ 14.1k · MIT

Quick start

  1. 1Install VS Code. Make sure Visual Studio Code is installed on your computer.
  2. 2Install the extension. Run code --install-extension yoavbls.pretty-ts-errors in a terminal, or search for pretty-ts-errors in the VS Code marketplace.
  3. 3Open a TypeScript project. Open a folder that contains TypeScript files, such as .ts or .tsx files.
  4. 4Trigger an error. Introduce or find a type error in your code, such as in a complex or generic type.
  5. 5Hover over the error. Hover over the underlined code to see the reformatted error with highlighted types.
  6. 6Use the links. Click the declaration button to go to the type definition, or use the explanation buttons for typescript.tv or ts-error-translator.

What does pretty-ts-errors change?

TypeScript error messages for complicated types can become long strings of parentheses and truncated text. pretty-ts-errors reformats them with syntax highlighting and adds links to type declarations and explanations.

The extension's features, as listed in its README, are syntax highlighting that uses your theme colours for types in error messages (for both light and dark themes), a button that leads to the relevant type declaration next to the type, a button that opens a detailed explanation at typescript.tv, and a button that opens ts-error-translator, which shows the error in plain English.

  • Syntax highlighting for types in error messages, in light and dark themes
  • A link to the relevant type declaration beside the type
  • A link to typescript.tv for a detailed explanation, sometimes with a video
  • A link to ts-error-translator for a plain-English version of the error

Install pretty-ts-errors in VS Code

You need Visual Studio Code. The simplest route is the command line, using the install command from the README.

You can also install it from the VS Code marketplace by searching for pretty-ts-errors.

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

Which files does it work with?

The README lists support for several file types. Check that TypeScript is enabled in your project for framework files.

  • Node and Deno TypeScript error reporters in .ts files
  • JSDoc type errors in .js and .jsx files
  • React, Solid and Qwik errors in .tsx and .mdx files
  • Astro, Svelte and Vue files when TypeScript is enabled (.astro, .svelte, .vue)
  • Ember and Glimmer TypeScript errors and Glint template issues in .hbs, .gjs and .gts files

Read a formatted error

Open a TypeScript file with an error and hover over the underlined code. The formatted error appears with highlighted types. Use the buttons in the message to jump to a type declaration or to an explanation.

The formatted view cannot be copied. The README says that to copy error text you should hover over the error and copy from the original error pane instead.

  • Hover over the error to see the formatted message
  • Use the declaration button to jump to the type definition
  • Use the typescript.tv or ts-error-translator buttons for an explanation

Make the original errors hidden and types copyable (optional)

The README links to a separate guide, docs/hide-original-errors.md, for hiding the original errors so the types can be copied. The author says this is a workaround required because of VS Code limitations.

Known limits

The extension is an editor integration. The README describes only VS Code support and does not describe a standalone command-line error report. A JetBrains (WebStorm) support discussion exists, but the README does not list it as a shipped feature. The README also lists Cursor support via a badge linking to Open VSX.

  • Works in VS Code; JetBrains support is discussed but not shipped according to the README
  • Formatted errors cannot be copied directly; copy from the original error pane
  • No standalone command-line report is described

What people use it for

  • Reading long generic type errors in a React .tsx component
  • Jumping from an error straight to the type declaration to see what a type should be
  • Learning TypeScript by reading plain-English versions of errors through ts-error-translator
  • Checking type errors in Astro, Svelte or Vue files when TypeScript is enabled

Frequently asked questions

Is pretty-ts-errors free?

The repository is licensed under MIT, which is an open-source licence. The README does not describe any paid tier, and the author notes that sponsorship funds go to other contributors.

What do I need to run pretty-ts-errors?

The README lists Visual Studio Code as the prerequisite. You install the extension either with the code --install-extension yoavbls.pretty-ts-errors command or from the VS Code marketplace.

How do I install pretty-ts-errors from the command line?

Run code --install-extension yoavbls.pretty-ts-errors in a terminal. You can also search for pretty-ts-errors in the VS Code marketplace.

Can I copy error text from the formatted view?

No. The README says formatted errors cannot be copied. Hover over the error and copy from the original error pane instead, or follow the docs/hide-original-errors.md guide to make types copyable.

Does it work with JetBrains IDEs like WebStorm?

Not as a shipped feature according to the README. It is a VS Code extension, and JetBrains support is only discussed in a GitHub discussion.

Does it work with Astro, Svelte and Vue?

Yes, the README lists support for .astro, .svelte and .vue files when TypeScript is enabled in the project.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

pretty-ts-errors is a good fit if you write TypeScript in VS Code, especially with complex or generic types, or if you are new to TypeScript and want clearer explanations. If you do not use VS Code, need to copy error text directly from the formatted view, or want a command-line error report, pick a different tool.

Install options & downloads