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

Question

我是 vscode 扩展开发的新手，最近我在第 9 频道视频中遇到了vscode的sqlserver 扩展。

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

截屏

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

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

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

Answer 1

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

方法一：贡献一个观点

除了手动显示的WebView的，你可以注册一个供应商，并说明其中vscode应显示视图贡献了视图在你的package.json。

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

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

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

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

方法二：编辑组命令

a) 通过改变编辑器布局

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

正如您已经注意到的那样，直接控制这种行为似乎是不可能的。但是我们可以执行用户可以执行的所有命令。因此，我们还可以更改编辑器布局，从而影响ViewColumns显示的位置。

在最初只有一个编辑器组打开（在ViewColumn.One）的假设下，我们可以ViewColumn.Two通过将编辑器布局更改为“两行”来更改 vscode 显示第二列 ( ) 的位置。

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

但是，一旦可以看到多个编辑器，这肯定会变得棘手。而且我还没有看到任何方法来找出当前处于活动状态的布局。

似乎也无法找出当前使用了多少列。因为TextEditor.viewColumn只返回最大值，ViewColumn.Three并且 vscode.window.visibleTextEditors（顾名思义）只返回列表TextEditors而不是 WebViews 等......

b) 将编辑器移动到下面的组

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

默认的 keybindings.json 似乎有一个所有可能命令的列表。即使那些未绑定到任何默认热键的键仍会作为注释列在底部。

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