Skip to content
Get packs

Guide · Open source

How to use vscode-extension-samples: clone, run and adapt

Updated · written with AI from the project's own documentation and checked against our catalogue data

vscode-extension-samples is a Microsoft repository of small, self-contained VS Code extensions. Each one demonstrates a single topic from the VS Code extension API or its contribution points. This guide shows developers and learners how to clone the repo, run a sample, and reuse its code for their own extension.

VS Code Extension Samplesmicrosoft/vscode-extension-samples · ★ 10.2k · MIT

Quick start

  1. 1Install Node.js and npm. Make sure node and npm are installed on your system. The README recommends the Node.js version used for VS Code development.
  2. 2Clone the repository. Run git clone https://github.com/Microsoft/vscode-extension-samples to download the samples.
  3. 3Open a sample folder. Run code followed by the sample folder name, or open the folder from VS Code.
  4. 4Install dependencies. Run npm install in the terminal inside the sample folder.
  5. 5Run the sample. Press F5 in VS Code to launch the sample extension.
  6. 6Read the code and the listed API. Use the sample's README and the API references listed in the samples table to see which features it uses.

What you need before you start

The samples run on Node.js and npm. The README asks you to have both installed on your system. It also recommends using the same Node.js version that VS Code's own development uses, which the README links to in the VS Code wiki.

You do not need to build VS Code itself to run a sample. You do need to be comfortable opening a folder in VS Code and running commands in a terminal.

  • Node.js
  • npm
  • VS Code

Clone the repository

Download the samples with git. The repository is hosted on GitHub under the Microsoft organisation. Once cloned, each sample is a separate folder you can open on its own.

git clone https://github.com/Microsoft/vscode-extension-samples

Open and run a sample

Open the folder of the sample you want in VS Code, install its dependencies, then press F5 to launch it. The README describes this flow: open a sample folder, run npm install in the terminal, then press F5. Each sample also has its own README with setup and run instructions, so check that file if a step differs.

  • Open the sample folder with code <any-sample-folder>.
  • Run npm install in the terminal inside that folder.
  • Press F5 to run the sample.
npm install

Pick a sample by the API feature you need

The README has a table of samples. Each row names a sample, links to a guide on the VS Code website where one exists, and lists the API calls and contribution points it uses. Use this table to find the feature you want to learn, then read that sample's code next to its listed API references.

The table covers topics such as webviews, a status bar item, tree views, task providers, multi-root workspaces, completion providers, code actions, file system providers, editor decorators, terminals, and colour and product icon themes.

  • Webview Sample: window.createWebviewPanel
  • Status Bar Sample: window.createStatusBarItem
  • Tree View Sample: window.createTreeView and window.registerTreeDataProvider
  • Task Provider Sample: tasks.registerTaskProvider
  • Completion Provider Sample: languages.registerCompletionItemProvider
  • Terminal Sample: window.createTerminal

Start with the Getting Started samples

If you are new to extensions, begin with the Getting Started group. The Hello World sample follows the Extension Anatomy documentation. A minimal version is written in JavaScript. A test sample shows extension integration tests, and a web sample shows VS Code for the Web.

  • Hello World Sample: see the Extension Anatomy docs
  • Hello World Minimal Sample: a minimal version written in JavaScript
  • Hello World Test Sample: includes extension integration tests
  • Hello World Web Sample: for VS Code for the Web

Adapt a sample for your own extension

Each sample is meant to be read, run, or copied as a starting point. Copy the folder for the feature you need, rename the extension, and change the code to suit your own purpose. The samples are MIT licensed, so you can reuse the code under those terms.

The README says that code across the samples follows the same style, enforced with ESLint. Keeping that style makes it easier to move between samples.

  • Copy the closest sample folder rather than starting from an empty project.
  • Keep the ESLint configuration so your code matches the samples.
  • Check the sample's README for any extra setup steps.

What people use it for

  • Learning one VS Code API feature, such as a tree view, at a time
  • Starting a new extension from a working sample of a specific feature like a webview or task provider
  • Checking how a completion provider or code action is wired up before writing your own
  • Seeing how terminal APIs such as window.createTerminal are used in practice

Frequently asked questions

Do I need to install anything before using vscode-extension-samples?

You need Node.js and npm installed on your system to run the examples. The README recommends the Node.js version used for VS Code development. You then clone the repository and run npm install in the sample folder you want.

How do I run a sample?

Open the sample folder in VS Code, run npm install in the terminal, then press F5. This launches the sample as an extension. Each sample's own README can add setup steps.

Is vscode-extension-samples free to use?

The repository is released under the MIT licence, so you can read, run and adapt the code under those terms. Check the LICENSE file in the repository for the full text.

Can I use these samples to build a finished extension for users?

The samples are teaching examples rather than polished products. They are meant to be read, run, or copied as a starting point for your own extension, which you would then develop and test further.

Is there an alternative to vscode-extension-samples for starting an extension?

yo code, a Yeoman generator for VS Code extensions, is a comparable option for scaffolding a new extension. The samples repo is more useful when you want a working example of one specific API feature rather than a blank project.

Do I need to know TypeScript to use these samples?

The repository is written in TypeScript, so reading the code is easiest if you know it. The README does not list other language requirements beyond Node.js and npm.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use vscode-extension-samples if you are a developer or learner who wants working, readable examples of specific VS Code extension API features. Pick something else if you only want to use VS Code without writing code, or if you need a finished end-user extension, since these samples are teaching material.

Install options & downloads