美化 TypeScript 错误

让VSCode中的TypeScript错误更美观、更易读。

随着类型复杂度的增加，TypeScript错误会变得越来越混乱。在某些时候，TypeScript会向你抛出一堆糟糕的括号和"..."。 这个扩展将帮助你理解发生了什么。例如，在这个相对简单的错误中：

观看这个

以及其他来自： Web Dev Simplified、 Josh tried coding、 trash dev 和更多

特性

• 使用您的主题颜色为错误消息中的类型提供语法高亮，支持浅色和深色主题
• 在错误消息中类型旁边提供一个按钮，可以引导您到相关的类型声明
• 提供一个按钮，可以引导您到typescript.tv查看错误，那里有详细的解释，有时还有视频
• 提供一个按钮，可以引导您到ts-error-translator，在那里您可以用简单的英语阅读错误

支持

• Node和Deno TypeScript错误报告器（在.ts文件中）
• JSDoc类型错误（在.js和.jsx文件中）
• React、Solid和Qwik错误（在.tsx和.mdx文件中）
• 启用TypeScript时的Astro、Svelte和Vue文件（在.astro、.svelte和.vue文件中）
• Ember和Glimmer TypeScript错误以及Glint报告的模板问题（在.hbs、.gjs和.gts文件中）

安装

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

或者只需在VSCode市场中搜索pretty-ts-errors

如何隐藏原始错误并使类型可复制

请按照这里的说明操作。不幸的是，由于VSCode的限制，需要使用这种黑客方法。

为什么这不是一件简单的事

1. TypeScript 错误包含在 TypeScript 中无效的类型。 是的，这些类型以不一致的方式包括诸如 ... more ...、{ ... } 等内容。有些还因为太长而被截断了。

2. 由于缺少 type X = ... 部分，类型无法在代码块中进行语法高亮，所以我需要创建一个新的 TextMate 语法，一个名为 type 的 TypeScript 语法超集。

3. VSCode 的 Markdown 块限制了所有样式选项，所以我不得不寻找一些技巧来设置错误消息的样式。例如，VSCode 的 Markdown 中没有内联代码块，所以我使用了 codicon 图标内的代码块，这是唯一可以内联的东西。这就是为什么它不能被复制。但这不是问题，因为你仍然可以悬停在错误上，从原始错误面板中复制内容。

   

宣传部分

明星们的点赞

Kent C. Dodds

Matt Pocock

Alex / KATT

Tanner Linsley

Theo Browne

赞助

每一分钱都将投资于项目的其他贡献者，尤其是那些从事我自己无法完成的工作的人，比如为其他 IDE 添加扩展支持 🫂

贡献

通过在这里对我们需要解决的问题进行投票或评论来提供帮助。 欢迎任何其他形式的贡献。随时提出你认为合适的任何问题或 PR。