How do you add icon/indicators beside TreeView items via VS Code's API?

Question

How can I add decorations beside my TreeItems like how it is done with the built-in git tracker with the M symbol here?:

score 2 · Accepted Answer · answered Dec 19 '22 at 18:50

This can be done through the use of inline view actions. Tree View View Actions VSCode Docs Link

An example of how to do this:

package.json

{
  ...,
  commands: {
    {
      "command": "myCommand",
      "title": "Command title",
      "icon": "images/some-icon.svg" // this is in the root of your extension project
    }
  },
  menus: {
    "view/item/context": [
      {
        "command": "myCommand",
        "when": "viewItem == myTreeItemContextValue", // Make sure to sync this value on each TreeItem to fulfill the "when" check
        "group": "inline"
      }
    ]
  }
}

Your TreeItem definition

export class MyTreeItem extends TreeItem {
  constructor(
    public readonly name: string,
    public readonly collapsibleState: TreeItemCollapsibleState,
    public readonly contextValue: string = 'myTreeItemContextValue'
  ) {
    super(name, collapsibleState);
  }
}

This appears for me, but only if that tree item is selected. How do you get it to *always* show, even if the item isn't selected? — Mark A. Donohoe, Apr 21 '23 at 18:51

score 0 · Answer 2 · answered Apr 30 '22 at 10:25

0

From what I know this is currently not possible. There's no public API for that.

answered Apr 30 '22 at 10:25

Mike Lischke

48,925
16
119
181

score -1 · Answer 3 · answered Jul 12 '23 at 00:54

If I understand correctly from reading this, you can use FileDecorationProvider and implement provideFileDecoration(uri: Uri, token: CancellationToken): ProviderResult<FileDecoration> to provide decorations for TreeItems based on their resourceUri properties. For example, you can take a look at how the builtin Git extension does it for repositories in VS Code 1.80.

How do you add icon/indicators beside TreeView items via VS Code's API?

3 Answers3