如何监听 vscode 的 TreeDataProvider 中的事件？

Question

我正在尝试使用 TreeDataProvider API 构建 vscode 扩展。我有一个显示的列表，每个 TreeItem 都是一个组合的标签字符串，一切正常。

我缺少的是一种对任何项目上的点击事件做出反应的方式。 VSCode 当你点击它时选择项目，但我想听那个事件，得到有问题的项目等等...... 从文档中看，这对我来说并不明显。

总的来说，严重缺乏自定义 TreeItem，例如能够为标签着色或传递更灵活的 UI 组件，而不仅仅是一个字符串...也许我遗漏了什么？

Answer 1

VSCode selects the item when you click on it, but I'd like to listen to that event, get the item in question etc...

您可以使用 TreeItem.command 到运行选择树项时的某些命令，然后为该命令注册回调。这是一个将树项的标签跟踪到控制台的简单示例：

'use strict';
import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    vscode.window.registerTreeDataProvider("exampleTreeView", new ExampleTreeProvider());
    vscode.commands.registerCommand("exampleTreeView.selectNode", (item:vscode.TreeItem) => {
        console.log(item.label);
    });
}

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

    getChildren(element?: vscode.TreeItem): vscode.ProviderResult<vscode.TreeItem[]> {
        if (element == null) {
            var item = new vscode.TreeItem("Foo");
            item.command = {
                command: "exampleTreeView.selectNode",
                title: "Select Node",
                arguments: [item]
            };
            return [item];
        }
        return null;
    }
}

"contributes": {
    "views": {
        "explorer": [
            {
                "id": "exampleTreeView",
                "name": "Example Tree View"
            }
        ]
    }
},

command 可以是任意字符串，但我喜欢在视图 ID 前加上前缀 "scope"。如果您想在回调中访问项目的任何属性，请务必通过 arguments 传递项目本身。

In general, customizing the TreeItem is severely lacking, e.g. being able to colorize the label or pass a more flexible UI component in instead of just a string...

这听起来像是一个准确的评估，API 在某些方面有点局限。如果您需要更多自由，最近推出的 Webview API 可能是一个不错的选择。请注意，这意味着使用 HTML/CSS/JS.

从头开始实现您自己的树视图

如何监听 vscode 的 TreeDataProvider 中的事件？

How to listen to events in vscode's TreeDataProvider?

visual-studio-code

vscode-extensions