VSCode 扩展：如何以编程方式在面板中显示视图容器答案

【问题标题】：VSCode extension: How to programmatically show view container in panelVSCode 扩展：如何以编程方式在面板中显示视图容器
【发布时间】：2021-05-25 08:02:09
【问题描述】：

我正在编写一个 VSCode 扩展，它有一个添加了 WebviewView 的视图容器。

"contributes": {
    "commands": [
      {
        "command": "showView",
        "title": "Show view"
      }
    ],
    "viewsContainers": {
      "panel": [
        {
          "id": "mycontainer",
          "title": "My Container",
          "icon": "media/app.svg"
        }
      ]
    },
    "views": {
      "mycontainer": [
        {
          "type": "webview",
          "id": "myview",
          "name": "MyView"
        }
      ]
    }
  },

在showView 命令实现中。我想以编程方式使视图 myview 显示在 VSCode UI 中。该怎么做？

【问题讨论】：

如果没有公共 API 来显示 ViewContainer 和/或将焦点放在容器中的视图上，您可能会在 github 上提交功能请求，也很高兴找出视图在哪个容器/面板中目前是

标签： visual-studio-code vscode-extensions

【解决方案1】：

VSCode 在每个注册的视图上公开一个focus 命令。

您的示例视图的 ID 为 myview，因此您想调用 myview.focus 命令。

您可以通过打开File->Prefs->Keyboard Shortcuts 并搜索myview 来验证这一点。

要测试该命令，请尝试在您的扩展激活函数中添加以下内容。它将在底部状态栏上创建一个可点击的按钮，该按钮将聚焦您的侧边栏视图。

activate = function (workspace) {
    const statusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 10);
    statusBarItem.command = 'myview.focus';
    statusBarItem.text = 'MYVIEW';
    statusBarItem.show();
    workspace.subscriptions.push(statusBarItem);
}

【讨论】：

【解决方案2】：

您可以通过使用视图的id 并执行focus 命令来关注侧边栏中的视图：

vscode.commands.executeCommand("myview.focus")

【讨论】：

这在用户手动打开之前不适用于面板 webview
在 VS Code 1.64.1 上为我工作。面板会自动打开，即使之前已关闭。