🚀 在 VS Code 中！

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