<a href="https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors" style="display: none;"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/main/assets/icon.png" width="140"> <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/main/assets/icon.png" width="140"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/5c317af9-3097-4726-9820-04df88997671.png" alt="Logo"> </picture> </a>

美化 TypeScript 错误

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

   <a href="https://github.com/yoavbls/pretty-ts-errors/discussions/43#user-content-jetbrains-support"><img src="https://yellow-cdn.veclightyear.com/835a84d5/577a8259-e10f-4284-b08d-9f149ce100e5.png" height="20" alt="Webstorm logo"></a>

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

<img src="https://yellow-cdn.veclightyear.com/835a84d5/ce71513e-0adb-46ed-821c-1f95ec21ca96.png" width="340.438px" />    <img src="https://yellow-cdn.veclightyear.com/835a84d5/cf2aea95-9a6c-4e27-b41d-f738ec3e3e63.png" width="350px" />

观看这个

<a href="https://www.youtube.com/watch?v=9RM2aErJs-s" target="_blank"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/ff915db6-9dd3-4bee-8ab9-58c8bbf363f7.png" alt="Watch theo's video" width="600" /> </a>

以及其他来自： 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 图标内的代码块，这是唯一可以内联的东西。这就是为什么它不能被复制。但这不是问题，因为你仍然可以悬停在错误上，从原始错误面板中复制内容。

   <img src="https://yellow-cdn.veclightyear.com/835a84d5/920cb168-5289-4a11-8748-7ec59aed5df8.png" width="600" />

宣传部分

<a href="https://www.youtube.com/live/Zze1y2iZ3bQ?si=Yj1Qw2S8FbGbTA5c&t=11589"> <picture> <img width="400" src="https://yellow-cdn.veclightyear.com/835a84d5/a0af9853-c952-42aa-b706-63f3cf8d71b2.png?raw=true" alt="在 JSNation 2023 赢得生产力提升类别奖项"> </picture> </a> <a href="https://twitter.com/tannerlinsley/status/1647982562026090496"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/tanner-dark.png#gh-light-mode-only"> <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/tanner-light.png#gh-light-mode-only"> <img width="400" src="https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/tanner-dark.png#gh-dark-mode-only" alt="Tanner 的推文"> </picture> </a> <a href="https://twitter.com/t3dotgg/status/1647759462709747713"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/theo-dark.png#gh-dark-mode-only"> <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/theo-light.png#gh-light-mode-only"> <img width="400" src="https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/theo-dark.png#gh-dark-mode-only" alt="Theo 的推文"> </picture> </a> <a href="https://twitter.com/johnsoncodehk/status/1646214711204286465"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/johnson-dark.png#gh-dark-mode-only"> <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/johnson-light.png#gh-light-mode-only"> <img width="400" src="https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/johnson-dark.png#gh-dark-mode-only" alt="Johnson 的推文"> </picture> </a>

明星们的点赞

<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>

赞助

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

贡献

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