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