美化 `TypeScript` 错误

<b>让VSCode中的TypeScript错误更美观、更易读。</b>

随着类型复杂度的增加，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的限制，需要使用这种黑客方法。

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

TypeScript 错误包含在 TypeScript 中无效的类型。是的，这些类型以不一致的方式包括诸如 ... more ...、{ ... } 等内容。有些还因为太长而被截断了。
由于缺少 type X = ... 部分，类型无法在代码块中进行语法高亮，所以我需要创建一个新的 TextMate 语法，一个名为 type 的 TypeScript 语法超集。
VSCode 的 Markdown 块限制了所有样式选项，所以我不得不寻找一些技巧来设置错误消息的样式。例如，VSCode 的 Markdown 中没有内联代码块，所以我使用了 codicon 图标内的代码块，这是唯一可以内联的东西。这就是为什么它不能被复制。但这不是问题，因为你仍然可以悬停在错误上，从原始错误面板中复制内容。
<img src="https://yellow-cdn.veclightyear.com/835a84d5/920cb168-5289-4a11-8748-7ec59aed5df8.png" width="600" />

宣传部分

明星们的点赞

<table> <tbody> <tr> <td align="center"> <a href="https://github.com/kentcdodds"> <img src="https://images.weserv.nl/?url=github.com/kentcdodds.png&fit=cover&mask=circle" width="80"><br> Kent C. Dodds <a/> </td> <td align="center"> <a href="https://github.com/mattpocock"> <img src="https://images.weserv.nl/?url=github.com/mattpocock.png&fit=cover&mask=circle" width="80"><br> Matt Pocock <a/> </td> <td align="center"> <a href="https://github.com/katt"> <img src="https://images.weserv.nl/?url=github.com/katt.png&fit=cover&mask=circle" width="80"><br> Alex / KATT <a/> </td> <td align="center"> <a href="https://github.com/tannerlinsley"> <img src="https://images.weserv.nl/?url=github.com/tannerlinsley.png&fit=cover&mask=circle" width="80"><br> Tanner Linsley <a/> </td> <td align="center"> <a href="https://github.com/t3dotgg"> <img src="https://images.weserv.nl/?url=github.com/t3dotgg.png&fit=cover&mask=circle" width="80"><br> Theo Browne <a/> </td> </tr> </tbody> </table>