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

问题描述

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

I am writing a VSCode extension which has a view container with a WebviewView added to it.

"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 中.如何做到这一点?

In showView command implementation. I want to programmatically make the view myview to display in VSCode UI. How to do that?

推荐答案

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

VSCode exposes a focus command on every view registered.

您的示例视图具有 ID myview，因此您要调用 myview.focus 命令.

Your example view has ID myview so you want to call the myview.focus command.

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

You can verify this by opening File->Prefs->Keyboard Shortcuts and searching for myview.

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

To test the command, try adding the following in your extension activate function. It will create a clickable button on the bottom statusbar that will focus your sidebar view.

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);
}

这篇关于VSCode 扩展:如何以编程方式在面板中显示视图容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！