如何在 vscode 的 TreeDataProvider 中监听事件? [英] How to listen to events in vscode's TreeDataProvider?

问题描述

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

I'm playing with building a vscode extension, using the TreeDataProvider API. I have a list of things showing, each TreeItem a composed label string, all works fine.

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

What I am missing is a way of reacting to click events on any of the items. VSCode selects the item when you click on it, but I'd like to listen to that event, get the item in question etc... It's not obvious to me from the docs.

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

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... Maybe I'm missing something?

推荐答案

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

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 在选择树项时运行某些命令，然后为该命令注册回调.下面是一个简单的例子，它跟踪一个树项的标签到控制台:

You can use TreeItem.command to run some command when a tree item is selected, and then register a callback for that command. Here's a simple example that traces the label of a tree item to the console:

'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 传递项目本身.

The command can be any arbitrary string, but I like to "scope" it by prefixing the view ID. It's important to pass the item itself via arguments if you want to access any of its properties in the callback.

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

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 从头开始​​实现您自己的树视图.

That sounds like an accurate assessment, the API is a bit limiting in some ways. If you need more freedom, the recently introduced Webview API might be a good alternative. Note that that would mean implementing your own tree view from scratch using HTML/CSS/JS.

这篇关于如何在 vscode 的 TreeDataProvider 中监听事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！