CODEWITHSUNDEEP
visual-studio-codevscode-extensions
Neo
Neo

Reputation: 87

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

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

Upvotes: 1

Views: 1388

Answers (3)

Hammerbot
Hammerbot

Reputation: 16354

I managed to get something working by defining an URI on my tree items:

class MyTreeItem extends vscode.TreeItem {
  constructor(
    public readonly label: string,
    private version: string,
    public readonly collapsibleState: vscode.TreeItemCollapsibleState
  ) {
    super(label, collapsibleState);
    this.tooltip = `${this.label}-${this.version}`;
    this.description = this.version;
    this.resourceUri = vscode.Uri.parse('hammerbot:service/service-api', true) // <- this line
  }
}

Then, I create a decoration provider:

class MyFileDecorationProvider implements vscode.FileDecorationProvider {
  provideFileDecoration(uri: vscode.Uri, token: vscode.CancellationToken) {
    console.log('asking for some decoration', uri)
    // Check if the file comes from my scheme defined in my tree item resourceUri
    if (uri.scheme === 'hammerbot') { 
      // Return the decoration for that tree item
      // Check the docs for more details
      return {
          badge: 'JS',
          tooltip: 'JavaScript File',
          color: new vscode.ThemeColor('editorForeground'),
          propagate: false // don't propagate to children elements
      };
    }
    // I don't add any decoration for the rest of the files
    return undefined;
  }
}

And finally, I register everything in the activate function:

const provider = new MyFileDecorationProvider();
const disposable = vscode.window.registerFileDecorationProvider(provider);

Upvotes: 1

starball
starball

Reputation: 51040

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.

Upvotes: 0

Mike T
Mike T

Reputation: 614

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

Upvotes: 0

Related Questions