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

简介

TypeScript 是一种流行的编程语言，为 JavaScript 提供了静态类型和改进的错误检测。然而，随着类型的复杂性增加，错误的复杂性也增加了。这就是 Pretty TypeScript Errors VSCode 插件的用途，它可以在 Visual Studio Code 中使 TypeScript 错误更易读和用户友好。

特点

这个 VSCode 插件通过提供几个功能来增强 TypeScript 错误的展示，使它们更易于理解。首先，它为错误消息中的类型提供了语法突出显示，支持明亮和暗色主题。

此外，插件包括一个按钮，可引导您到错误消息中类型的相关声明旁边。这样可以快速导航到错误源并进行必要的更改。

插件还包括一个按钮，可导航到 typescript.tv 上的错误，您可以在那里找到详细的解释，有时还包括视频。这对于需要额外解释的更复杂的错误特别有用。

另一个按钮导航您到 ts-error-translator，您可以在其中以普通英语阅读错误。这对于非英语母语者或可能在技术术语方面遇到困难的人特别有用。

最后，该插件支持 Node 和 Deno TypeScript 错误报告程序（在 .ts 文件中），JSDoc 类型错误（在 .js 和 .jsx 文件中），React、Solid 和 Qwik 错误（在 .tsx 和 .mdx 文件中），以及启用 TypeScript 时的 Astro、Svelte 和 Vue 文件（在 .astro、.svelte 和 .vue 文件中）。

为什么它是重要的

Pretty TypeScript Errors 插件面临的一个挑战是，TypeScript 错误包含 TypeScript 不支持的类型。这些类型包括“more...”、“{...}”和其他不一致且有时被截断的值。

为了克服这个挑战，插件使用了一种新的 TextMate 语法，TypeScript 语法的一个超集，称为“type”。这使得它能够更有效地突出显示错误消息中的类型并使其更易读。

此外，VSCode markdown 阻止所有样式选项，因此插件的创建者不得不找到一些技巧来样式化错误消息。例如，由于 VSCode markdown 中没有内联代码块，因此该插件使用了一个放置在 codicon 图标中的代码块，这是唯一可以内联的东西。这使得直接复制错误消息变得不可能，但用户仍然可以悬停在错误上并从原始错误窗格中复制内容。

结论

Pretty TypeScript Errors VSCode 插件是开发人员在项目中使用 TypeScript 的有价值工具。它的功能包括语法突出显示、导航到相关类型和错误解释的错误和普通英语翻译，使 TypeScript 错误更易于理解和排除故障。虽然插件的创建者在开发过程中遇到了一些挑战，但最终的结果是一个强大而有效的工具，可以节省开发人员的时间和困惑。