Extending Workbench

"Workbench" refers to the overall Visual Studio Code UI that encompasses the following UI components:

  • Title Bar
  • Activity Bar
  • Side Bar
  • Panel
  • Editor Group
  • Status Bar

VS Code provides various APIs that allow you to add your own components to the Workbench. For example, in the image below:

workbench-contribution

Views Container#

With the contributes.viewsContainers Contribution Point, you can add new Views Containers that display next to the five built-in Views Containers. Learn more at the Tree View topic.

Tree View#

With the contributes.views Contribution Point, you can add new Views that display in any of the View Containers. Learn more at the Tree View topic.

Webview#

Webviews are highly customizable views built with HTML/CSS/JavaScript. They display next to text editors in the Editor Group areas. Read more about Webview in the Webview Guide.

Status Bar Item#

Extensions can create custom StatusBarItem that display in the Status Bar. Status Bar Items can show text and icons and run commands on click events.

  • Show text and icons
  • Run a command on click

A Status Bar extension sample can be found here.