英文原文正文为项目原始 README（英文），本站后续会翻译为中文，当前仅剔除图片与无关章节并统一排版。

漂亮的 TypeScript 错误

在 VSCode 中使 TypeScript 错误更漂亮且易于阅读。

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

观看此

以及来自以下来源的其他内容：Web Dev Simplified、Josh tried coding、trash dev 和 更多

功能

• 在错误消息中的类型上使用主题颜色进行语法高亮，支持浅色和深色主题
• 一个按钮，可将你引导到错误消息中类型旁边的相关类型声明
• 一个按钮，可带你导航到 typescript.tv 上的错误位置，在那里你可以找到详细解释，有时还包括视频
• 一个按钮，可带你导航到 ts-error-translator，在这里你可以用简单的英语阅读错误

支持

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

安装

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

或者直接在 VSCode 市场 中搜索 pretty-ts-errors

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

请遵循 这里 的说明。不幸的是，由于 VSCode 的限制，需要这个方法。

为什么这不简单

1. TypeScript 错误包含在 TypeScript 中无效的类型。是的，这些类型包括像 ... more ...、{ ... } 等不一致的内容。有些类型也会在中间被截断，因为它们太长。
2. 类型不能在代码块中进行语法高亮，因为缺少 type X = ... 部分，所以我需要创建一个新的 TextMate 语法，这是一种 TypeScript 语法的超集，叫做 type。
3. VSCode 的 Markdown 屏蔽了所有样式选项，因此我不得不找到一些方法来给错误信息加样式。例如，VSCode Markdown 中没有内联代码块，所以我使用了一个位于 codicon 图标中的代码块，这是唯一可以内联的东西。这就是为什么它不能被复制。但这不是问题，因为你仍然可以将鼠标悬停在错误上并从原始错误面板中复制内容。

炒作部分

星星来自星星

贡献

通过为我们需要解决的问题投票或发表评论来提供帮助 这里 欢迎任何其他形式的贡献。随时可以提交你认为有必要的任何问题/拉取请求。