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工具包？

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

库的功能包括：

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

我们为什么要构建它？

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

任何时候扩展使用Webview API时，创建符合webview指南的UI的责任在于扩展作者。因此，webviews有可能在视觉和行为上与Visual Studio Code的其余部分不同。在最坏的情况下，用户必须导航看起来与编辑器其余部分完全不同的不可访问的扩展UI。

通过Webview UI工具包，我们现在与扩展作者分担了一些责任。我们负责处理主题、可访问性以及核心UI组件的行为/样式实现的细节，这样您就不必担心了。这意味着开发更加简便，开发速度更快，最终您有更多时间专注于使您的扩展独特的部分！

我们需要您的反馈！

我们迫不及待地希望您尝试Webview UI工具包！在我们向1.0版本迈进的过程中，请告诉我们如何改进创建基于webview的扩展的体验。

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

编码愉快，

大卫和鹰