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 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-sample combo, 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 is a list of guides and samples. While each guide comes with sample code, some samples do not have a matching guide yet.

Each sample illustrates one VS Code API usage or a Contribution Point.

Sample Guide on VS Code Website API & Contribution
Webview Sample /api/extension-guides/webview window.createWebviewPanel
window.registerWebviewPanelSerializer
Status Bar Sample N/A window.createStatusBarItem
StatusBarItem
Tree View Sample /api/extension-guides/tree-view window.createTreeView
window.registerTreeDataProvider
TreeView
TreeDataProvider
contributes.views
contributes.viewsContainers
Task Provider Sample /api/extension-guides/task-provider tasks.registerTaskProvider
Task
ShellExecution
contributes.taskDefinitions
Multi Root Sample N/A workspace.getWorkspaceFolder
workspace.onDidChangeWorkspaceFolders
Completion Provider Sample N/A languages.registerCompletionItemProvider
CompletionItem
SnippetString
File System Provider Sample N/A workspace.registerFileSystemProvider
Editor Decoractor Sample N/A TextEditor.setDecorations
DecorationOptions
DecorationInstanceRenderOptions
ThemableDecorationInstanceRenderOptions
window.createTextEditorDecorationType
TextEditorDecorationType
contributes.colors
I18n Sample N/A
Terminal Sample N/A window.createTerminal
window.onDidChangeActiveTerminal
window.onDidCloseTerminal
window.onDidOpenTerminal
window.Terminal
window.terminals
Vim Sample N/A commands
StatusBarItem
window.createStatusBarItem
TextEditorCursorStyle
window.activeTextEditor
Position
Range
Selection
TextEditor
TextEditorRevealType
TextDocument

Language Extension Samples

These samples are Language Extensions samples:

Sample Guide 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 Sample N/A
LSP Multi Root Server Sample https://github.com/Microsoft/vscode/wiki/Adopting-Multi-Root-Workspace-APIs#language-client--language-server