Webview
如果您需要显示 VS Code API 不支持的自定义功能,可以使用 Webviews,它们是完全可自定义的。重要的是要理解,只有在绝对需要时才应使用 Webviews。
✔️ 建议
- 仅在绝对必要时使用 Webviews
- 仅在上下文适当时激活您的扩展
- 仅为活动窗口打开 Webviews
- 确保视图中的所有元素都可主题化 (请参阅 webview-view-sample 和 颜色令牌 文档)
- 确保您的视图遵循 无障碍指南 (颜色对比度、ARIA 标签、键盘导航)
- 在工具栏和视图中使用命令操作
❌ 不建议
- 用于推广 (升级、赞助商等)
- 用于向导
- 在每个窗口上打开
- 在扩展更新时打开 (请通过通知提问)
- 添加与编辑器或工作区无关的功能
- 重复现有功能 (欢迎页面、设置、配置等)
Webview 示例
简单浏览器
此扩展在侧边打开编辑器的浏览器预览。

此示例展示了 VS Code Web 在 VS Code 中开发。Webview 面板用于渲染类似浏览器的窗口。
Pull Request
此扩展在自定义树视图中显示工作区存储库的 Pull Request,然后使用 Webview 显示 Pull Request 的详细信息。

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

此 Webview 视图显示用于创建 Pull Request 的内容,其中使用了下拉列表、输入框和按钮。