在 VSCode 扩展中，可以有一个面板在 web 视图和树视图之间切换

Question

我想在 vscode 中添加一个新的资源管理器面板。 我希望它根据用户是否已连接到我的后端应用程序来显示 treeView 或 webView。 我可以在文件夹视图中的 vscode 基础中看到类似的东西。 当没有文件夹打开时，会显示此视图

当你打开一个文件夹时，它看起来像

Answer 1

从 VS Code 1.25 开始，视图可能只包含树视图。 https://github.com/Microsoft/vscode/issues/46585跟踪了对在侧栏中显示 webview 的支持

如果您只需要一个按钮或简单的提示，则可以在第一种情况下使用带有单个节点的树视图

Answer 2

对于发现此问题的任何其他人，可以通过欢迎消息实现文件浏览器中看到的行为。

当该视图的树为空时，将显示该视图的欢迎消息。

预览

欢迎辞

普通树视图

例子

在您的package.json ，声明：

• 风景
• 查看欢迎信息
• 欢迎消息按钮应执行的命令

"contributes": {
    "commands": [
        {
            "command": "myExtension.myCommand",
            "title": "My Custom Command"
        }
    ],
    "views": {
        "explorer": [
            {
                "id": "myCustomView",
                "name": "My Custom View",
                "contextualTitle": "My Custom View"
            }
        ]
    },
    "viewsWelcome": [
        {
            "view": "myCustomView",
            "contents": "Welcome to my custom view! [learn more](https://google.com/).\n[Get Started](command:myExtension.myCommand)"
        }
    ]
}

在你的extension.ts

• 定义按钮命令
• 将视图连接到视图提供者

import * as vscode from 'vscode';
import { CustomViewProvider } from './CustomViewProvider';

export function activate(context: vscode.ExtensionContext) {

    // Add the custom view
    const customViewProvider = new CustomViewProvider();
    vscode.window.registerTreeDataProvider('myCustomView', customViewProvider);


    // Add the command
    let myCustomCommand = vscode.commands.registerCommand('myExtension.myCommand', () => {
        vscode.window.showInformationMessage('This is my custom command!');
    });
    context.subscriptions.push(myCustomCommand);
}

export function deactivate() { }

在CustomViewProvider.ts ，定义您的视图何时为空。

import * as vscode from 'vscode';

export class CustomViewProvider implements vscode.TreeDataProvider<vscode.TreeItem> {
    getTreeItem(element: vscode.TreeItem): vscode.TreeItem {
        return element;
    }

    getChildren(element?: vscode.TreeItem): Thenable<vscode.TreeItem[]> {
        // NOTE:
        //      When TRUE, the welcome message will show
        //      When FALSE, the welcome message will NOT show
        var showEmptyView = true;

        if (showEmptyView) {
            return Promise.resolve([]);
        }

        return Promise.resolve([
            new vscode.TreeItem('This view is not empty!')
        ]);
    }
}