尝试以扩展 VS Code 中的代理模式!

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 视图显示用于创建拉取请求的内容,其中包含下拉列表、输入框和按钮。