如何将vscode扩展WebView设置到窗口底部？答案

【问题标题】：How to set vscode extension WebView to the bottom of the window?如何将vscode扩展WebView设置到窗口底部？
【发布时间】：2019-11-04 18:48:17
【问题描述】：

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

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

屏幕截图

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

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

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

【问题讨论】：

你试过 WebView API 吗？ Webview API
是的，我尝试了 webView api，设置 vscode.ViewColumn.Two 打开 webView 以拆分列。但不知道如何将其设置为底部
@manas 有什么进展吗？
@manas 你找到解决方案了吗？我也需要它。谢谢。
不，我跳过了那个！！！ .如果你设法找到它，请告诉我。

标签： visual-studio-code vscode-extensions vscode-tasks

【解决方案1】：

这不是你问的，但这些是我迄今为止想出的最好的解决方案。

方法一：贡献观点

您可以register a provider 并在您的package.json 中通过contributing a view 描述vscode 应在何处显示视图，而不是手动显示WebView。

这样，WebView 是一个面板，而不是普通的编辑器窗口。

虽然，最初您只能在侧栏中的一个组中显示此视图。但是用户可以将您的视图拖到他们想要的任何地方。也进入底部面板，然后它将停留在那里。

   "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) 通过更改编辑器布局

这是一个有点老套的解决方案，如何在当前活动的编辑器下方打开一个编辑器。

正如您已经注意到的那样，直接控制这种行为似乎是不可能的。但是我们可以执行用户可以执行的所有命令。因此，我们还可以更改编辑器布局，从而影响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) 将编辑器移动到下面的组

此外，还有一些命令可以移动编辑器组。因此，我们可以在当前活动的视图列中打开 WebView，然后将其移动到下面的组（workbench.action.moveEditorToBelowGroup）。可悲的是，这有其自身的缺点。新的编辑器组不一定会使用全宽。

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

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

【讨论】：

【解决方案2】：

也许您应该在使用“executeCommand”方法创建面板后执行以下命令“workbench.action.editorLayoutTwoRows”。

【讨论】：