Views & View Containers

This sample demonstrates how to implement and contribute a tree view in VS Code. This includes:

• Contributing views and view containers.
• Contributing actions in various location of the view.
• Implementing the tree data provider for the view.
• Creating and working with the view.

This sample provides following views

• Node dependencies view
• Ftp file explorer view

Following example shows Node dependencies view in Package Explorer View container.

VS Code API

This sample uses following contribution points, activation events and APIs

Contribution Points

• views
• viewsContainers
• menu
  • view/title
  • view/item/context

Activation Events

• onView:${viewId}

APIs

• window.createTreeView
• window.registerTreeDataProvider
• TreeView
• TreeDataProvider

Refer to Usage document for more details.

Running the Sample

• Open this example in VS Code Insiders
• npm install
• npm run watch
• F5 to start debugging
• Node dependencies view is shown in Package explorer view container in Activity bar.
• FTP file explorer view should be shown in Explorer