Your First Extension

In this topic, we'll teach you the fundamental concepts for building extensions. Make sure you have Node.js and Git installed.

First, use Yeoman and VS Code Extension Generator to scaffold a TypeScript or JavaScript project ready for development.

• If you do not want to install Yeoman for later use, run the following command:

  npx --package yo --package generator-code -- yo code
  

• If you instead want to install Yeoman globally to ease running it repeatedly, run the following command:

  npm install --global yo generator-code
  
  yo code
  

For a TypeScript project, fill out the following fields:

# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? HelloWorld
### Press <Enter> to choose default for all options below ###

# ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? LEAVE BLANK
# ? Initialize a git repository? Yes
# ? Bundle the source code with webpack? No
# ? Which package manager to use? npm

# ? Do you want to open the new folder with Visual Studio Code? Open with `code`

Inside the editor, open src/extension.ts and press F5 or run the command Debug: Start Debugging from the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)). This will compile and run the extension in a new Extension Development Host window.

Run the Hello World command from the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) in the new window:

You should see the Hello World from HelloWorld! notification showing up. Success!

If you aren't able to see the Hello World command in the debug window, check the package.json file and make sure that engines.vscode version is compatible with the installed version of VS Code.

Developing the extension

Let's make a change to the message:

1. Change the message from "Hello World from HelloWorld!" to "Hello VS Code" in extension.ts.
2. Run Developer: Reload Window in the new window.
3. Run the command Hello World again.

You should see the updated message showing up.

Here are some ideas for things for you to try:

• Give the Hello World command a new name in the Command Palette.
• Contribute another command that displays current time in an information message. Contribution points are static declarations you make in the package.json Extension Manifest to extend VS Code, such as adding commands, menus, or keybindings to your extension.
• Replace the vscode.window.showInformationMessage with another VS Code API call to show a warning message.

Debugging the extension

VS Code's built-in debugging functionality makes it easy to debug extensions. Set a breakpoint by clicking the gutter next to a line, and VS Code will hit the breakpoint. You can hover over variables in the editor or use the Run and Debug view in the left to check a variable's value. The Debug Console allows you to evaluate expressions.

You can learn more about debugging Node.js apps in VS Code in the Node.js Debugging Topic.

Next steps

In the next topic, Extension Anatomy, we'll take a closer look at the source code of the Hello World sample and explain key concepts.

You can find the source code of this tutorial at: https://github.com/microsoft/vscode-extension-samples/tree/main/helloworld-sample. The Extension Guides topic contains other samples, each illustrating a different VS Code API or Contribution Point, and following the recommendations in our UX Guidelines.

Using JavaScript

In this guide, we mainly describe how to develop VS Code extension with TypeScript because we believe TypeScript offers the best experience for developing VS Code extensions. However, if you prefer JavaScript, you can still follow along using helloworld-minimal-sample.

UX Guidelines

This is also a good time to review our UX Guidelines so you can start designing your extension user interface to follow the VS Code best practices.