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

Question

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

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

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

Answer 1

当你点击它时，VSCode 会选择该项目，但我想听那个事件，获取有问题的项目等......

您可以使用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喜欢“范围”它。arguments如果您想在回调中访问它的任何属性，那么传递项目本身很重要。

通常，严重缺乏自定义 TreeItem，例如能够为标签着色或传递更灵活的 UI 组件而不仅仅是字符串......

这听起来像是一个准确的评估，API 在某些方面有点限制。如果您需要更多自由，最近推出的Webview API可能是一个不错的选择。请注意，这意味着使用 HTML/CSS/JS 从头开始​​实现您自己的树视图。