UX Guidelines

These guidelines cover the best practices for creating Visual Studio Code extensions that align with and build upon the core editor's user experience and interface. In these guidelines, you can expect to find:

  • Recommandations for UI contributed by an extension
  • Visual examples
  • Alternative approaches to specific UX scenarios

Architecture

The VS Code UI has two types of elements: containers and items. Containers refer to the outer layers, which include:

Overview of Visual Studio Code containers elements

  1. Activity Bar
  2. Sidebar
  3. Editor
  4. Panel
  5. Status Bar

Items are placed inside of various containers and include:

Overview of Visual Studio Code item elements

  1. View Container
  2. View
  3. View Toolbar
  4. Sidebar Toolbar
  5. Editor Toolbar
  6. View Container
  7. Panel Toolbar
  8. View
  9. Status Bar Item