Custom view decorations in VSCode extension

Question

I\'m building a VS Code extension and it uses a TreeDataProvider to create a list of items. The list has nested children and I would like to show a count for th

Answer 1

As of VS code version 1.52, the FileDecorationProvider is available to use, which is a way to add a text badge to a TreeItem. Related GitHub issue here for more context.

If you are using TreeItem then you will need to specify a resourceUri property which you then use to identify where to apply the badge.

To be clear the badge is limited to text and does not include the option to put it in a circle badge, like in the first picture of the question.

Here is a simple code snippet on how to use it:

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

Answer 2

Support for custom decorations in views appears to be a work-in-progress. There has been an API for it in the "proposed state" for a while, see:

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

Source Control and Problem decorations already shown in custom views if TreeView.resourceUri is set.

• Source Control decorations are managed via the Source Control API - each SourceControlResourceState instance can have decorations attached to it. That would be how the Git extension you mentioned does it.
• Problem decorations are derived from the "problems" (errors, warnings...) associated with a URI. These are also shown in the Problems panel. Problems can be created using the Diagnostics API or with a problem matcher.