参加你附近的 ，了解 VS Code 中的 AI 辅助开发。

适用于 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