现已推出!阅读 10 月份的新功能和修复。

Webview

如果您需要显示超出 VS Code API 支持范围的自定义功能,可以使用 webview,它们是完全可定制的。重要的是要明白,只有在绝对必要的情况下才应该使用 webview。

✔️ 应该

  • 只有在绝对必要的情况下才使用 webview
  • 仅在上下文相关时激活您的扩展
  • 仅为活动窗口打开 webview
  • 确保视图中的所有元素都是可主题化的(请参阅 webview-view-sample颜色标记 文档)
  • 确保您的视图遵循 无障碍指南(颜色对比度、ARIA 标签、键盘导航)
  • 在工具栏和视图中使用命令操作

❌ 不应该

  • 用于促销(升级、赞助等)
  • 用于向导
  • 在每个窗口打开
  • 在扩展更新时打开(改为使用通知提示)
  • 添加与编辑器或工作区无关的功能
  • 重复现有功能(欢迎页面、设置、配置等)

Webview 示例

简单浏览器

此扩展在编辑器的旁边打开一个浏览器的预览。

Weview sample - Browser

此示例展示了 VS Code Web 如何直接在 VS Code 中开发。一个 Webview 面板用于渲染类似浏览器的窗口。

拉取请求

此扩展在自定义树视图中显示工作区存储库的拉取请求,然后使用 webview 以详细视图显示拉取请求。

Webview sample - Pull Request

Webview 视图

您还可以将 webview 放置到任何视图容器中(侧边栏或面板),这些元素称为 webview 视图。相同的 webview 指南适用于 webview 视图。

Webview View

此 webview 视图显示用于创建拉取请求的内容,该内容使用下拉菜单、输入框和按钮。