CodeHub MCPcopy Index your code

hub / github.com/microsoft/vscode-extension-samples

github.com/microsoft/vscode-extension-samples @main

Chat with this repo

repository ↗ · DeepWiki ↗ · + Follow

1,250 symbols 2,655 edges 267 files 61 documented · 5% ● updated 34d ago★ 10,11740 open issues

What it actually does AI analysis from the code graph — generated when you open this

loading…

README

VS Code Extension Samples

This repository contains sample code illustrating the VS Code extension API. Each sample is a self-contained extension that explains one topic in VS Code API or VS Code's Contribution Points. You can read, play with or adapt from these samples to create your own extensions.

You can expect from each sample: - An explanation of its functionality - A gif or screenshot demonstrating its usage - Link to a guide on VS Code website, if it has one - Listing of used VS Code API and Contribution Points - Code of the same style, enforced using ESLint

Prerequisites

You need to have node and npm installed on your system to run the examples. It is recommended to use the node version used for VS Code development itself which is documented here

Usage

git clone https://github.com/Microsoft/vscode-extension-samples
code <any-sample-folder>
npm install in the terminal, then F5 to run the sample
Alternatively, follow the instructions in each sample's README for setting up and running the sample

Getting Started

Hello World Sample: The Hello World sample for VS Code. See Extension Anatomy documentation.
Hello World Minimal Sample: A minimal version of Hello World Sample written in JavaScript.
Hello World Test Sample: Hello World sample with extension integration test. See Testing Extensions documentation.
Hello World Web Sample: The Hello World sample for VS Code Web. See the Web Extensions guide.

Samples

Sample	Guide on VS Code Website	API & Contribution
Webview Sample	/api/extension-guides/webview	window.createWebviewPanel

window.registerWebviewPanelSerializer | | Webview View Sample | N/A | window.registerWebviewViewProvider | | Webview Codicons Sample | N/A | | | Status Bar Sample | N/A | window.createStatusBarItem

StatusBarItem | | Tree View Sample | /api/extension-guides/tree-view | window.createTreeView

window.registerTreeDataProvider

TreeDataProvider

contributes.views

contributes.viewsContainers | | Task Provider Sample | /api/extension-guides/task-provider | tasks.registerTaskProvider

contributes.taskDefinitions | | Multi Root Sample | N/A | workspace.getWorkspaceFolder

workspace.onDidChangeWorkspaceFolders | | Completion Provider Sample | N/A | languages.registerCompletionItemProvider

SnippetString | | Code Actions Sample | N/A | languages.registerCodeActionsProvider

CodeActionProvider | | File System Provider Sample | N/A | workspace.registerFileSystemProvider | | Editor Decorator Sample | N/A | TextEditor.setDecorations

DecorationOptions

DecorationInstanceRenderOptions

ThemableDecorationInstanceRenderOptions

window.createTextEditorDecorationType

TextEditorDecorationType

contributes.colors | | L10n Sample | N/A | | | Terminal Sample | N/A | window.createTerminal

window.onDidChangeActiveTerminal

window.onDidCloseTerminal

window.onDidOpenTerminal

window.Terminal

window.terminals | | Extension Terminal Sample | N/A | window.createTerminal

window.Pseudoterminal

window.ExtensionTerminalOptions | | Color Theme Sample | /api/extension-guides/color-theme | contributes.themes | | Product Icon Theme Sample | /api/extension-guides/product-icon-theme | contributes.productIconThemes | | Vim Sample | N/A | commands

window.createStatusBarItem

TextEditorCursorStyle

window.activeTextEditor

TextEditorRevealType

TextDocument | | webpack-sample | /api/working-with-extensions/bundling-extension | | | esbuild-sample | /api/working-with-extensions/bundling-extension | | | Source Control Sample | /api/extension-guides/scm-provider | workspace.workspaceFolders

SourceControlResourceGroup

scm.createSourceControl

TextDocumentContentProvider

contributes.menus | | Commenting API Sample | N/A | | | Document Editing Sample | N/A | commands | | Custom Data Sample | /api/extension-guides/custom-data-extension | | | CodeLens Provider Sample | N/A | languages.registerCodeLensProvider

CodeLensProvider

CodeLens | | Call Hierarchy Sample | N/A | languages.registerCallHierarchyProvider

CallHierarchyProvider

CallHierarchyItem

CallHierarchyOutgoingCall

CallHierarchyIncomingCall | | Custom Editors Sample | /api/extension-guides/custom-editors | window.registerCustomEditorProvider

CustomTextEditorProvider

contributes.customEditors | | [Semantic tokens](https://github.com/Microsoft/vscode-extension-samples/tree/main/sema

Extension points exported contracts — how you extend this code

PawDrawEdit (Interface)

* Define the type of edits used in paw draw files.

custom-editor-sample/src/pawDrawEditor.ts

RawNotebookData (Interface)

* An ultra-minimal sample provider that lets the user type in JSON, and then * outputs JSON cells. The outputs are tran

notebook-serializer-sample/src/serializer.ts

IController (Interface)

(no doc) [2 implementers]

vim-sample/src/common.ts

IRenderInfo (Interface)

notebook-renderer-sample/src/render.ts

RakeTaskDefinition (Interface)

task-provider-sample/src/rakeTaskProvider.ts

MarkdownItRenderer (Interface)

notebook-extend-markdown-renderer-sample/src/emoji.ts

Interface (Interface)

wasm-component-model-resource/src/calculator.ts

IRenderInfo (Interface)

notebook-renderer-react-sample/src/client/render.tsx

Core symbols most depended-on inside this repo

call-hierarchy-sample/src/FoodPyramidHierarchyProvider.ts

lsp-embedded-language-service/server/src/languageModes.ts

tree-view-sample/src/jsftp.d.ts

defineMotionCommand

vim-sample/src/mappings.ts

vim-sample/src/extension.ts

fsprovider-sample/src/fileSystemProvider.ts

fsprovider-sample/src/fileSystemProvider.ts

webview-codicons-sample/src/extension.ts

Shape

Method 507

Function 420

Class 257

Interface 59

Enum 7

Languages

TypeScript100%

Modules by API surface

vim-sample/src/motions.ts79 symbols

vim-sample/src/operators.ts50 symbols

tree-view-sample/src/fileExplorer.ts46 symbols

nodefs-provider-sample/src/extension.ts41 symbols

source-control-sample/src/fiddleSourceControl.ts35 symbols

custom-editor-sample/src/pawDrawEditor.ts34 symbols

chat-sample/src/toolsPrompt.tsx33 symbols

vim-sample/src/controller.ts29 symbols

source-control-sample/src/extension.ts28 symbols

vim-sample/src/extension.ts26 symbols

vim-sample/src/mappings.ts23 symbols

tree-view-sample/src/ftpExplorer.ts23 symbols

Dependencies from manifests, versioned

@eslint/js9.13.0 · 1×

@octokit/rest18.0.0 · 1×

@stylistic/eslint-plugin2.9.0 · 1×

@types/ftp0.3.33 · 1×

@types/glob7.1.1 · 1×

@types/isomorphic-fetch0.0.35 · 1×

@types/jsdom21.1.7 · 1×

@types/markdown-it12.2.3 · 1×

@types/mkdirp0.5.2 · 1×

@types/mocha10.0.1 · 1×

@types/node22.8.2 · 1×

@types/promisify-node0.4.0 · 1×

For agents

$ claude mcp add vscode-extension-samples \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact