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

【问题标题】：Custom view decorations in VSCode extensionVSCode 扩展中的自定义视图装饰
【发布时间】：2019-06-27 12:27:50
【问题描述】：

我正在构建一个 VS Code 扩展，它使用 TreeDataProvider 创建一个项目列表。该列表具有嵌套的子级，我想在父级中显示这些的计数。

我已经寻找示例并试图了解 git 扩展是如何做到的，但没有运气。也许有人可以提供一个如何做到这一点的例子。

【问题讨论】：

标签： visual-studio-code vscode-extensions

【解决方案1】：

对视图中自定义装饰的支持似乎正在进行中。在"proposed state" 中已经有一段时间了，请参阅：

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

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

【讨论】：

谢谢。看起来装饰提供者是我想要的。希望它很快就会上市。
看起来对用于徽章计数的装饰器有些混淆，这是要遵循的相关问题：[自定义视图和容器中的徽章](github.com/microsoft/vscode/issues/38426)

【解决方案2】：

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

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

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

这里有一个简单的代码 sn-p 说明如何使用它：

    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());
    }
  }

【讨论】：