# yoavbls/pretty-ts-errors

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/yoavbls-pretty-ts-errors).**

14,072 stars · 108 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/yoavbls/pretty-ts-errors
- Homepage: https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors
- awesome-repositories: https://awesome-repositories.com/repository/yoavbls-pretty-ts-errors.md

## Topics

`astro` `deno` `errors` `svelte` `typescript` `vscode` `vscode-extension` `vue`

## Description

pretty-ts-errors is a VSCode extension and TypeScript error formatter that converts complex compiler errors into human-readable, visually formatted messages. It functions as a debugging tool that transforms type-checking failures into an improved developer experience within the editor.

The tool distinguishes itself by linking type errors to external technical documentation and translation tools for plain-English explanations. It provides integrated navigation that allows users to jump directly from error messages to the corresponding type definitions in the source code.

The extension further enhances the editor interface by applying theme-aware syntax highlighting to error components and filtering out default compiler diagnostics to prevent redundant message display.

## Tags

### Software Engineering & Architecture

- [Editor Error Formatting](https://awesome-repositories.com/f/software-engineering-architecture/error-handling/format-error-translators/terminal-error-formatting/editor-error-formatting.md) — Applies syntax highlighting and theme-aware human-readable formatting to TypeScript error messages within the editor. ([source](https://github.com/yoavbls/pretty-ts-errors#readme))
- [Compiler Error Parsers](https://awesome-repositories.com/f/software-engineering-architecture/syntax-parsing-engines/regex-based-parsers/compiler-error-parsers.md) — Uses regular expressions to extract structured type information and error codes from raw TypeScript compiler strings.
- [Validation Error Formatters](https://awesome-repositories.com/f/software-engineering-architecture/validation-error-formatters.md) — Converts complex TypeScript compiler errors into human-readable and visually formatted messages.

### Development Tools & Productivity

- [Error Code Documentation Mappings](https://awesome-repositories.com/f/development-tools-productivity/code-translation-mappings/error-code-documentation-mappings.md) — Associates unique TypeScript error codes with external technical guides and translation tools via a lookup table.
- [JavaScript and TypeScript Debugging](https://awesome-repositories.com/f/development-tools-productivity/debugging-profiling-testing/debugging-diagnostics/javascript-and-typescript-debugging.md) — Makes complex TypeScript type errors easier to read and understand within the code editor for faster troubleshooting.
- [Definition Navigation](https://awesome-repositories.com/f/development-tools-productivity/definition-navigation.md) — Provides clickable links within error messages that jump directly to the corresponding type definitions in the source code.
- [Debugging Tools](https://awesome-repositories.com/f/development-tools-productivity/debugging-tools.md) — Provides an editor utility that links type errors to external documentation for faster resolution during development.
- [Developer Experience](https://awesome-repositories.com/f/development-tools-productivity/developer-utilities-libraries/workflow-productivity-enhancers/developer-productivity-utilities/developer-experience.md) — Improves the daily coding workflow by transforming cryptic compiler output into an ergonomic, readable format.
- [Editor Diagnostics](https://awesome-repositories.com/f/development-tools-productivity/editor-diagnostics.md) — Intercepts and hides default compiler diagnostics to prevent redundant error display within the editor interface.
- [IDE Extensions](https://awesome-repositories.com/f/development-tools-productivity/ide-extensions.md) — Adds syntax highlighting and integrated navigation to type-checking failures within the Visual Studio Code editor.
- [VSCode Editor Integrations](https://awesome-repositories.com/f/development-tools-productivity/vscode-editor-integrations.md) — Enhances built-in TypeScript error reporting in VSCode with custom syntax highlighting and filtered diagnostics.

### Education & Learning Resources

- [Error Diagnostics](https://awesome-repositories.com/f/education-learning-resources/error-diagnostics.md) — Links error messages to external documentation and translation tools for detailed plain-English explanations of type failures. ([source](https://github.com/yoavbls/pretty-ts-errors#readme))
- [Error Documentation](https://awesome-repositories.com/f/education-learning-resources/error-documentation.md) — Retrieves technical guides and translation tool links to help developers resolve complex type mismatches. ([source](https://github.com/yoavbls/pretty-ts-errors/blob/main/README.md))

### Programming Languages & Runtimes

- [Type System Debugging Aids](https://awesome-repositories.com/f/programming-languages-runtimes/type-system-debugging-aids.md) — Helps solve difficult type mismatch errors by providing plain English explanations and external documentation for compiler failures.

### User Interface & Experience

- [Syntax Highlighters](https://awesome-repositories.com/f/user-interface-experience/syntax-highlighters.md) — Applies theme-aware syntax highlighting to formatted error components for better visual distinction of types and values.
- [Diagnostic Display Filters](https://awesome-repositories.com/f/user-interface-experience/ui-element-selectors/predicate-based-filtering/diagnostic-display-filters.md) — Hides default compiler messages to display only human-readable formatted versions and enable copyable type blocks. ([source](https://github.com/yoavbls/pretty-ts-errors/blob/main/docs/hide-original-errors.md))