Visual Studio 带有自己面板的代码扩展，带有 HTML 表单元素

Question

我想为 VSC 开发一个扩展。用户应该添加图像（通过组合框选择）和一些属性值，如标题。我不想使用片段。在 Atom 包中，可以创建 views/dialogs。 atom.workspace 中有像 addTopPanel() 和 addModalPanel() 这样的函数。

在我找到的文档中贡献点列出了键盘快捷键、菜单、显示消息和打开文件打开对话框的示例，但没有关于自己的panels/view.

是否可以在 VSC 中创建自己的面板？

Answer 1

这个时候我觉得还是不行。 VS Code 的 extensibility model 不包含它。 VS Code 之所以能够如此稳定，是因为扩展主机运行在它自己的独立进程中（不允许您直接与 DOM 交互，因此只能通过 API 进行交互）。许多人要求能够构建自定义 UI 组件来扩展它，所以我相信它很快就会出现。

Answer 2

使用 WebView 可以在 vscode 中使用面板和模式。使用 <style> 标签调整视图的大小和位置。

参见WebView documentation and a WebView example。

Answer 3

您可以使用viewContainers并指定位置例如

 "viewsContainers": {
      "panel": [
        {
          "id": "panel-tasks",
          "title": "PANEL VIEW",
          "icon": "media/logo_square.svg"
        }
      ]
    },

Visual Studio 带有自己面板的代码扩展，带有 HTML 表单元素

Visual Studio Code Extension with own panels with HTML form elements

user-interface

visual-studio-code

vscode-extensions