• Contribute a view using the views extension point.
• Register a data provider for the view using the TreeDataProvider API.
• Contribute actions to the view using view/title and view/item/context locations in menus extension point.

You must specify an identifier and name for the view. You can contribute to following locations

• explorer: Explorer view in the Side bar
• debug: Debug view in the Side bar

When the user opens the view, VS Code will then emit an activationEvent onView:${viewId} (e.g. onView:npmScripts for the example below). You can also control the visibility of the view by providing the when context value.

"contributes": {
    "views": {
        "explorer": [
            {
                "id": "npmScripts",
                "name": "NPM Scripts",
                "when": "workspaceHasPackageJSON"
            }
        ]
    }
}

Extension writers should register a provider programmatically to populate data in the view.

vscode.window.registerTreeDataProvider('npmScripts', new DepNodeProvider());

See npmScripts.ts for the implementation.