Visual Studio Code Example Extension

Code

In this topic, we'll teach you the fundamental concepts for building extensions. Make sure you have Node.js and Git installed, then install Yeoman and VS Code Extension Generator with:

The generator scaffolds a TypeScript or JavaScript project ready for development. Run the generator and fill out a few fields for a TypeScript project:

Then, inside the editor, press F5. 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:

Example: code -extensions-dir Set the root path for extensions. Code -list-extensions List the installed extensions. Code -show-versions Show versions of installed extensions, when using -list-extension. Code -install-extension (extension-id extension-vsix-path) Installs an extension. Code -uninstall-extension ( ) Uninstalls an extension. Code -enable-proposed-api Enables proposed API features for extensions. The Azure Functions extension for Visual Studio Code lets you locally develop functions and deploy them to Azure. If this experience is your first with Azure Functions, you can learn more at An introduction to Azure Functions. The Azure Functions extension provides these benefits: Edit, build, and run functions on your local development computer.

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

Example

Developing the extension

Let's make a change to the message:

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

You should see the updated message showing up.

Here are some ideas 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.

Visual Studio Code Example Extensions

Visual Studio Code Example Extension

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 view in the left to check a variable's value. The Debug Console allows you to evaluate expressions.

Visual Studio Code Extensions Download

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.

Visual studio code file extensions

Visual Studio Code Example Extension Tool

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

C++ Visual Studio Code Example

Using JavaScript

Visual Studio Code Example Extension Letter

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.