Skip to content
Branch: master
Find file History

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.

Package Explorer


This sample uses following contribution points, activation events and APIs

Contribution Points

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

Activation Events

  • onView:${viewId}


  • 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
You can’t perform that action at this time.