在 VSCode 扩展中对 TreeItem 使用 TreeItemLabel

Question

我正在构建树视图 VSCode 扩展，并希望在某些情况下突出显示我的树项目标签的一部分。 TreeItemLabel 似乎通过 highlights 属性.

支持此功能

API docs specify that one of the constructor signatures for TreeItem accepts a TreeItemLabel as the first argument. The docs for TreeItemLabel 仅显示此对象的两个属性（hightlights? 和 label），没有任何构造函数。我是 JS/TS 世界的新手，不确定如何将 TreeItemLabel“传递”给 TreeItem.

的构造函数

我似乎无法从 vscode 命名空间中的任何地方导入 TreeItemLabel，这消除了使用构造函数的可能性。

我发现一个 sample test 似乎通过显式定义具有这些属性的对象来手动构造 TreeItem 和 highlights 属性，但我不是确定如何将其转化为我的用例。

在我的例子中，我有一个 class 扩展 TreeItem 并将一些值传递给 super() 以创建 TreeItem:

export class Org extends vscode.TreeItem {
    public readonly contextValue = 'org';

    constructor(
        public readonly name: string,
        public readonly devName: string,
        public readonly tooltip: string, 
        public readonly collapsibleState: vscode.TreeItemCollapsibleState
    ) {
        super(name, collapsibleState);
    }

    iconPath = vscode.ThemeIcon.File;
}

如何将呼叫更改为 super() 以便我可以使用 TreeItemLabel？提前致谢！

编辑#1：

当我尝试将我想要的属性定义为调用 super() 时的第一个参数时，如下所示：

constructor(
        // The name displayed in the tree view
        public readonly name: string,
        // The name of the org (without anything extra added)
        public readonly devName: string,
        public readonly tooltip: string, 
        public readonly collapsibleState: vscode.TreeItemCollapsibleState
    ) {
        super({label:name, highlights:[0,2]}, collapsibleState);
    }

我得到以下信息：

No overload matches this call.
  Overload 1 of 2, '(label: string, collapsibleState?: TreeItemCollapsibleState | undefined): TreeItem', gave the following error.
    Argument of type '{ label: string; highlights: number[]; }' is not assignable to parameter of type 'string'.
  Overload 2 of 2, '(resourceUri: Uri, collapsibleState?: TreeItemCollapsibleState | undefined): TreeItem', gave the following error.
    Argument of type '{ label: string; highlights: number[]; }' is not assignable to parameter of type 'Uri'.
      Object literal may only specify known properties, and 'label' does not exist in type 'Uri'.ts(2769)

Answer 1

只需定义一个具有您需要的属性的对象。您可能需要根据 name 字符串更改数字。

export class Org extends vscode.TreeItem {
    public readonly contextValue = 'org';

    constructor(
        public readonly name: string,
        public readonly devName: string,
        public readonly tooltip: string, 
        public readonly collapsibleState: vscode.TreeItemCollapsibleState
    ) {
        super({label:name, highlights:[[0,5],[9,12]]}, collapsibleState);
    }

    iconPath = vscode.ThemeIcon.File;
}

在 VSCode 扩展中对 TreeItem 使用 TreeItemLabel

Using TreeItemLabel for TreeItem in VSCode Extension

typescript

visual-studio-code

vscode-extensions