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

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

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

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

什么是 Webview UI Toolkit？

从本质上讲，该工具包是一个组件库，开发者可以使用它来构建扩展 Webview 内部的用户界面。请注意，这并没有改变我们关于“除非绝对必要，否则应避免使用 Webview”的建议。

该库的特性包括：

实现 Visual Studio Code 设计语言： 创建的扩展与编辑器其余部分的视觉外观和操作感保持一致。
自动支持配色主题： 所有组件在设计时均考虑了主题适配，并将自动显示当前的编辑器主题。
使用任意技术栈： 该库以 Web 组件 (web components) 的形式提供，这意味着无论扩展使用何种技术栈（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