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.

Guide on VS Code WebsiteAPI & Contribution
Commandcommands
Color Themecontributes.themes
File Icon Themecontributes.iconThemes
Product Icon Themecontributes.productIconThemes
Tree Viewwindow.createTreeView
window.registerTreeDataProvider
TreeView
TreeDataProvider
contributes.views
contributes.viewsContainers
Webviewwindow.createWebviewPanel
window.registerWebviewPanelSerializer
Custom Editorswindow.registerCustomEditorProvider
CustomTextEditorProvider
contributes.customEditors
Virtual Documentsworkspace.registerTextDocumentContentProvider
commands.registerCommand
window.showInputBox
Task Providertasks.registerTaskProvider
Task
ShellExecution
contributes.taskDefinitions
Source Controlworkspace.workspaceFolders
SourceControl
SourceControlResourceGroup
scm.createSourceControl
TextDocumentContentProvider
contributes.menus
Debugger Extensioncontributes.breakpoints
contributes.debuggers
debug
Markdown Extensionmarkdown.previewStyles
markdown.markdownItPlugins
markdown.previewScripts
Custom Data Extensioncontributes.html.customData
contributes.css.customData

Here is a list of additional samples from the VS Code Extensions samples repo.

Sample on GitHub RepoAPI & Contribution
Webview Samplewindow.createWebviewPanel
window.registerWebviewPanelSerializer
Status Bar Samplewindow.createStatusBarItem
StatusBarItem
Tree View Samplewindow.createTreeView
window.registerTreeDataProvider
TreeView
TreeDataProvider
contributes.views
contributes.viewsContainers
Task Provider Sampletasks.registerTaskProvider
Task
ShellExecution
contributes.taskDefinitions
Multi Root Sampleworkspace.getWorkspaceFolder
workspace.onDidChangeWorkspaceFolders
Completion Provider Samplelanguages.registerCompletionItemProvider
CompletionItem
SnippetString
File System Provider Sampleworkspace.registerFileSystemProvider
Editor Decoractor SampleTextEditor.setDecorations
DecorationOptions
DecorationInstanceRenderOptions
ThemableDecorationInstanceRenderOptions
window.createTextEditorDecorationType
TextEditorDecorationType
contributes.colors
I18n Sample
Terminal Samplewindow.createTerminal
window.onDidChangeActiveTerminal
window.onDidCloseTerminal
window.onDidOpenTerminal
window.Terminal
window.terminals
Vim Samplecommands
StatusBarItem
window.createStatusBarItem
TextEditorCursorStyle
window.activeTextEditor
Position
Range
Selection
TextEditor
TextEditorRevealType
TextDocument
Source Control Sampleworkspace.workspaceFolders
SourceControl
SourceControlResourceGroup
scm.createSourceControl
TextDocumentContentProvider
contributes.menus
Commenting API Sample
Document Editing Samplecommands

Language Extension Samples

These samples are Language Extensions samples:

SampleGuide on VS Code Website
Snippet Sample/api/language-extensions/snippet-guide
Language Configuration Sample/api/language-extensions/language-configuration-guide
LSP Sample/api/language-extensions/language-server-extension-guide
LSP Log Streaming SampleN/A
LSP Multi Root Server Samplehttps://github.com/microsoft/vscode/wiki/Adopting-Multi-Root-Workspace-APIs#language-client--language-server