visual-studio-code - 如何将vscode扩展WebView设置到窗口底部？

Question

我是 vscode 扩展开发的新手，最近遇到了一个 sqlserver extension for vscode in channel 9 video.

在 5.20 的视频中，执行查询后，查询结果显示在面板 View 中。
我想那一定是一个webView。

截屏



我的问题是如何将 webView 排列到窗口底部，如图中红色框标记的那样。

通过以下代码，我正在创建 vscode webView。

const panel = vscode.window.createWebviewPanel("catCoding", "cat coding", vscode.ViewColumn.Two, { enableScripts: true });

Answer 1

这不完全是您所要求的，但这些是我迄今为止提出的最佳解决方案。
方法一:贡献观点
您可以 register a provider 而不是手动显示 WebView并通过 contributing a view 描述 vscode 应该在哪里显示 View 在您的 package.json .
这样，WebView 是一个面板，而不是普通的编辑器窗口。
虽然，最初您只能在侧栏中的一个组中显示此 View 。但是用户可以将您的 View 拖到他们想要的任何地方。也进入底部面板，然后它将停留在那里。

   "contributes": {
        "views": {
            "explorer": [
                {
                    "type": "webview",
                    "id": "calicoColors.colorsView",
                    "name": "Calico Colors"
                }
            ]
        },
   }

这是完整的示例: https://github.com/microsoft/vscode-extension-samples/tree/master/webview-view-sample

方法 2:编辑器组命令
a) 通过更改编辑器布局
这是一个有点 hacky 的解决方案，如何在当前事件的编辑器下方打开一个编辑器。
正如您已经注意到的那样，直接控制这种行为似乎是不可能的。
但是我们可以执行用户可以执行的所有命令。因此，我们还可以更改编辑器布局，这会影响 ViewColumns 的位置。被显示。
假设最初只有一个编辑器组处于打开状态(在 ViewColumn.One 中)，我们可以通过将编辑器布局更改为“两行”来更改 vscode 显示第二列( ViewColumn.Two)的位置。

    vscode.commands.executeCommand('workbench.action.editorLayoutTwoRows')
    const panel = vscode.window.createWebviewPanel(
        WebViewPanel.viewType,
        'Web View Title',
        vscode.ViewColumn.Beside,
        ...
    );

但是，一旦多个编辑器可见，这肯定会变得棘手。而且我还没有看到任何方法来找出当前处于事件状态的布局。
似乎也不可能找出当前使用了多少列。如 TextEditor.viewColumn只返回最大值 ViewColumn.Three和 vscode.window.visibleTextEditors (顾名思义)是否只列出 TextEditors而不是 WebViews 等...
b)将编辑器移动到下面的组
此外，还有一些命令可以移动编辑器组。因此，我们可以在当前事件的 View 列中打开 WebView，然后将其移动到下面的组 ( workbench.action.moveEditorToBelowGroup)。可悲的是，这有其自身的缺点。新的编辑器组不一定会使用全宽。

默认的 keybindings.json 似乎有一个所有可能命令的列表。即使是那些没有绑定(bind)到任何默认热键的，仍然在底部作为注释列出。

// - workbench.action.editorLayoutSingle
// - workbench.action.editorLayoutThreeColumns
// - workbench.action.editorLayoutThreeRows
// - workbench.action.editorLayoutTwoByTwoGrid
// - workbench.action.editorLayoutTwoColumns
// - workbench.action.editorLayoutTwoColumnsBottom
// - workbench.action.editorLayoutTwoRows
// - workbench.action.editorLayoutTwoRowsRight