登录

pretty-ts-errors

yoavblsMIT活跃维护

把 TypeScript 报错信息渲染成带语法高亮和类型展开的可读格式，在 VSCode 里看错误不再是一大坨红字。

🔵 Make TypeScript errors prettier and human-readable in VSCode 🎀

v0.8.5发布于 2026-03-21 19:45 UTC14,096star114fork同步于 2026-11-10 11:27 UTC
TypeScript报错美化VSCode 插件开发体验
对比 GitHub 官网astrodenoerrorssveltetypescript

怎么上手

由 README 提炼，执行前请确认
原文 
code --install-extension yoavbls.pretty-ts-errors
硬件要求按 README 说明

README 未说明，纯 VSCode 扩展，无 GPU 或显存要求

下载：源码 zip·GitHub Releases（安装包）本站不镜像安装包

项目说明

由 README 自动翻译提炼
没人工点评？写下你的经验

VSCode 扩展，把 TypeScript 冗长难读的类型报错渲染成带高亮、可跳转的易读信息

把 TypeScript 报错信息渲染成带语法高亮和类型展开的可读格式，在 VSCode 里看错误不再是一大坨红字。

核心能力

  • 用当前主题配色对报错中的类型做语法高亮
  • 报错类型旁提供按钮跳转到对应类型声明
  • 提供按钮跳转 typescript.tv 查看详细解释
  • 提供按钮跳转 ts-error-translator 翻译成通俗英文
  • 支持 Node/Deno、JSDoc、React/Solid/Qwik、Astro/Svelte/Vue 等报错

容易踩的坑

想隐藏原始报错并让类型可复制需按 docs/hide-original-errors.md 手动配置，受 VSCode 限制属于 hack；报错中的类型无法直接复制，需悬停原始报错面板复制；JetBrains 等其他 IDE 支持仍在讨论中，尚未提供

内容由模型根据 README 生成，可能不完整或不准确，以官方文档为准。看原文 README

最近发版

5 个版本v0.8.5
全部 release
  1. v0.8.5最新正式版2026-03-21 · 2026-03-21 19:45 UTC

    pretty-ts-errors is more stable!

    What's Changed

    New Contributors

    Full Changelog: https://github.com/yoavbls/pretty-ts-errors/compare/v0.7.0...v0.8.5

  2. v0.7.02025-12-25 · 2025-12-25 23:40 UTC
    查看更新说明

    In this release, we have a special holiday gift for you that’s been a long time coming! 🎁✨

    🔍 Error Previews

    New Preview Button: Every pretty error message now features
    a preview button that opens the error in a full new tab! 📑

    We’ve also added a new panel in the Explorer tab that
    automatically shows the error currently under your cursor. 🎯

    📁 Copyable Types

    all types are fully copyable in the preview because the usual VS Code hover limitations don’t apply!

    🛠️ Shiki Bridge

    To ensure code blocks work perfectly with your specific theme and extensions, we created a library that generates code blocks with Shiki highlighter by extracting your active theme and extensions. This is something that wasn't possible in VS Code before!
    https://github.com/yoavbls/vscode-shiki-bridge

    Huge thanks to @MichaelDimmitt and @kevinramharak for the amazing work on making this happen! It’s been a long-awaited feature, and we’re so happy it’s finally here! 🥳

    📁 Copy Button

    Thanks to @Vinayak9769, we now have a dedicated copy button for error messages!

    📺 New Errors in TypeScriptTV

    Support for many more error types has been added thanks to @bennycode!
    Now, every error includes a direct link. 🔗

    🏗️ Under the Hood

    We’ve officially completed our migration to a monorepo!

    Milestones

    🌟 14k stars ⬇️ 2m downloads

    Changelog

    HUGE THANKS, SPECIALLY TO @kevinramhar 👏👏

    New Contributors

    Full Changelog: https://github.com/yoavbls/pretty-ts-errors/compare/v0.6.1...v0.7.0

  3. v0.6.12024-11-24 · 2024-11-24 00:07 UTC
    查看更新说明

    What's Changed

    Full Changelog: https://github.com/yoavbls/pretty-ts-errors/compare/v0.6.0...v0.6.1

    1,000,000

    We've reached 1 million downloads BTW

    pepo-party-celebrate

  4. v0.6.02024-07-31 · 2024-07-31 21:12 UTC
    查看更新说明

    What's Changed

    Full Changelog: https://github.com/yoavbls/pretty-ts-errors/compare/v0.5.3...v0.6.0

    In Memoriam ❤️

    This release is dedicated to Ice, my beloved dog. May your memory continue to inspire and bring joy.

    Rest in peace, Ice. 🐾

  5. v0.5.32024-01-07 · 2024-01-07 00:48 UTC
    查看更新说明

    What's Changed

    New Contributors

    Full Changelog: https://github.com/yoavbls/pretty-ts-errors/compare/v0.5.2...v0.5.3

用户点评

登录用户的真实使用记录，可按版本和硬件筛选
共 0 条

    还没有人点评。第一个说出真实体验的人最有价值。

    README 原文

    未翻译
    在 GitHub 打开

    Pretty TypeScript Errors

    Make TypeScript errors prettier and human-readable in VSCode.

    GitHub stars Visual Studio Code GitHub license Visual Studio Code Cursor

    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 .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 (in .astro, .svelte and .vue files)
    • Ember and Glimmer TypeScript errors and template issues reported by Glint (in .hbs, .gjs, and .gts files)

    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

    1. 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.
    2. 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 called type.
    3. 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.

    相关项目

    同分类里 star 最高的项目
    对比全部 →
    vscode
    microsoft·TypeScript

    微软开源的跨平台代码编辑器，基于 Electron 和 TypeScript 构建，支持插件扩展、调试和 Git 集成，适合日常开发写代码。

    代码编辑器+4编辑器 / IDE
    195250+16644k1.145.22026-11-10 11:10 UTC
    neovim
    neovim·Vim Script

    Vim 的分支版本，用 Lua 做配置和插件开发，内置 LSP 与异步 API，让终端编辑器更好扩展、更好用。

    文本编辑器+4编辑器 / IDE
    103537+757.4kv0.12.62026-11-10 05:17 UTC
    zed
    zed-industries·Rust

    用 Rust 打造的高性能多人协作代码编辑器，由 Atom 和 Tree-sitter 作者开发，主打低延迟编辑与实时协同编码。

    代码编辑器+4编辑器 / IDE
    94639+78712kv1.27.02026-11-10 11:13 UTC
    AFFiNE
    toeverything·TypeScript

    把文档、白板、表格融为一体的开源知识库，可离线使用、支持多人实时协作，是 Notion 和 Miro 的替代方案。

    知识库+4编辑器 / IDE
    74415+1285.5kv2026.11.9-canary.9072026-11-10 10:49 UTC