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