VSCode扩展中的自定义视图装饰

Question

我正在构建VS Code扩展，它使用TreeDataProvider创建项目列表。列表中有嵌套的孩子，我想在父母中显示这些孩子的数量。

我一直在寻找示例，试图理解git扩展是如何做到的，但是没有运气。也许有人可以提供如何执行此操作的示例。

Answer 1

在视图中支持自定义装饰似乎仍在进行中。 "proposed state"中已有一段时间的API，请参见：

• Make decoration provider API public (#54938)
• relevant section in vscode.proposed.d.ts

如果设置了TreeView.resourceUri，则在自定义视图中进行源代码控制和问题修饰already shown。

• 通过Source Control API管理源代码管理装饰-每个SourceControlResourceState实例都可以附加decorations。您提到的Git扩展就是这样的。
• 问题修饰来自与URI关联的“问题”（错误，警告...）。这些也显示在“问题”面板中。可以使用Diagnostics API或problem matcher来创建问题。

Answer 2

从 VS Code 1.52 版开始，可以使用 FileDecorationProvider，这是一种将文本标记添加到 TreeItem 的方法。相关 GitHub issue here 了解更多背景信息。

如果您使用的是 TreeItem，那么您需要指定一个 resourceUri 属性，然后您可以使用该属性来确定应用徽章的位置。

需要明确的是，徽章仅限于文本，不包括将其放入圆形徽章的选项，如问题的第一张图片。

这是一个关于如何使用它的简单代码片段：

    class CountDecorationProvider {
      constructor() {
        this.disposables = [];
        this.disposables.push(vscode.window.registerFileDecorationProvider(this));
    } 

    provideFileDecoration(uri) {
      const showCountFor = "/aUserHere";
      if (uri.path === showCountFor) {
        return {
          badge: "10",
          tooltip: "User count"
        };
      }
    }

    dispose() {
      this.disposables.forEach((d) => d.dispose());
    }
  }