Visual Studio Code 的 Webview UI 工具包

2021 年 10 月 11 日，作者：David Dossett，@david_dossett 和 Hawk Ticehurst，@hawkticehurst

我们非常高兴地宣布适用于 Visual Studio Code 的 Webview UI 工具包公开预览版。借助此工具包，扩展开发者可以快速轻松地在 Visual Studio Code 中创建外观、感觉和行为都与编辑器本身一致的基于 Webview 的扩展。

Webview UI Toolkit for Visual Studio Code: gallery view of components

什么是 Webview UI 工具包？

其核心是，该工具包是一个组件库，开发者可以使用它在扩展 Webview 内部构建用户界面。请注意，这不改变我们关于避免在扩展中使用 Webview 的建议，除非您绝对需要它们。

该库的特性包括

实现 Visual Studio Code 设计语言： 创建与编辑器其余部分具有一致外观和感觉的扩展。
自动支持颜色主题： 所有组件在设计时都考虑了主题，并将自动显示当前的编辑器主题。
使用任何技术栈： 该库作为一组 Web 组件发布，这意味着无论扩展是使用何种技术栈（React、Vue、Svelte 等）构建的，开发者都可以使用该工具包。
开箱即用无障碍： 所有组件都附带符合 Web 标准的 ARIA 标签和键盘导航。

我们希望确保使用 Webview 的扩展对其用户而言是可预测、一致和无障碍的。

每当扩展使用 Webview API 时，创建符合 Webview 指南的 UI 的责任在于扩展作者。因此，Webview 存在外观和行为与 Visual Studio Code 其他部分不同的风险。在最糟糕的情况下，用户必须浏览与编辑器其余部分截然不同的、无法访问的扩展 UI。

借助 Webview UI 工具包，我们现在与扩展作者分担了部分责任。我们可以专注于主题、可访问性以及核心 UI 组件的行为/样式实现的细枝末节，这样您就不必操心。这意味着开发便利性的提高、开发速度的提升，并最终让您有更多时间专注于使您的扩展独一无二的部分！

我们迫不及待地想让您尝试 Webview UI 工具包！在我们迈向 1.0 版本发布之际，请告诉我们如何改进创建基于 Webview 的扩展的体验。

如果您想了解更多信息，可以参考适用于 Visual Studio Code 的 Webview UI 工具包文档。此外，如果您有任何问题、遇到任何困境或有功能请求，请随时与我们联系。

编程愉快，

David 和 Hawk