适用于 Visual Studio Code 的 Webview UI 工具包

2021年10月11日，由 David Dossett (@david_dossett) 和 Hawk Ticehurst (@hawkticehurst) 撰写

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

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

Webview UI Toolkit 是什么？

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

该库的特性包括

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

我们希望确保使用 webview 的扩展对于其用户来说是可预测、一致和可访问的。

每当扩展使用 Webview API 时，创建符合 webview 指南的 UI 的责任就落在扩展作者身上。因此，webview 有可能在外观和行为上与 Visual Studio Code 的其余部分有所不同。在最坏的情况下，用户必须浏览看起来与编辑器其余部分完全不同的不可访问的扩展 UI。

有了 Webview UI Toolkit，我们现在与扩展作者共同承担一部分责任。我们可以专注于主题化、可访问性以及核心 UI 组件的行为/样式实现等繁琐细节，这样您就不必费心了。这意味着开发变得更容易，开发速度得到提高，最终有更多时间来处理使您的扩展独一无二的部分！

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

如果您想了解更多信息，可以参考 Webview UI Toolkit for Visual Studio Code 文档。此外，如果您有任何问题、遇到任何问题或有功能请求，请随时联系我们。

编程愉快，

David 和 Hawk