Try in VS Code!

Extension Guides

Once you have learned the basics of Visual Studio Code Extension API in the Hello World sample, it's time to build some real-world extensions. While the Extension Capabilities section offers high-level overviews of what an extension can do, this section contains a list of detailed code guides and samples that explains how to use a specific VS Code API.

In each guide or sample, you can expect to find:

  • Thoroughly commented source code.
  • A gif or image showing the usage of the sample extension.
  • Instructions for running the sample extension.
  • Listing of VS Code API being used.
  • Listing of Contribution Points being used.
  • Real-world extensions resembling the sample.
  • Explanation of API concepts.

Guides & Samples

Here are the guides on the VS Code website, including their usage of the VS Code API and Contribution Points. Don't forget to refer to the UX Guidelines to learn the user interface best practices for creating extensions.

Guide on VS Code Website API & Contribution
Command commands
contributes.commands
Color Theme contributes.themes
File Icon Theme contributes.iconThemes
Product Icon Theme contributes.productIconThemes
Tree View window.createTreeView
window.registerTreeDataProvider
TreeView
TreeDataProvider
contributes.views
contributes.viewsContainers
Webview window.createWebviewPanel
window.registerWebviewPanelSerializer
Custom Editors window.registerCustomEditorProvider
CustomTextEditorProvider
contributes.customEditors
Virtual Documents workspace.registerTextDocumentContentProvider
commands.registerCommand
window.showInputBox
Virtual Workspaces workspace.fs
capabilities.virtualWorkspaces
Workspace Trust workspace.isTrusted
workspace.onDidGrantWorkspaceTrust
capabilities.untrustedWorkspaces
Task Provider tasks.registerTaskProvider