Create Extension for Visual Studio Code

Thursday November 11, 2021

(This is a follow-up to a question asked during my recent Visual Studio Code talk)

Visual Studio Code already has an extensive library of extensions. But, if you’d like to create your own, it’s not difficult to get started. These instructions are for Linux, but it should be easy to adapt them to another operating system.

If they aren’t already installed, you need to install the following:

Node.js
Git

Then, open a terminal, and install Yeoman and VS Code Generator:

sudo npm install -g yo generator-code

Create a new project directory (e.g., “new_extension”) and cd into it:

mkdir new_extension
 
cd new_extension

Run Yeoman to generate a project:

yo code

I answered the project generator questions as follows:

Project types:

> New Extension (TypeScript)
New Extension (JavaScript)
New Color Theme
New Language Support
New Code Snippets
New Keymap
New Extension Pack
New Language Pack (Localization)
New Web Extension (TypeScript)
New Notebook Renderer (TypeScript)

What’s the name of your extension? HelloWorld

What’s the identifier of your extension? helloworld

What’s the description of your extension? (I left this blank)

Initialize a git repository? Yes

Bundle the source code with webpack? No

Which package manager to use?

> npm
yarn

(Project is generated)

Do you want to open the new folder with Visual Studio Code?

> Open with 'code'
Skip

Inside the editor, press F5. This will compile and run the extension in a new Extension Development Host window. (A new instance of Visual Studio Code)

Once the new instance starts up, press F1 to display the command palette. Start typing “Hello World” in the command palette, and when you see the “Hello World” extension match, press [ENTER] to run it.

“Hello World from HelloWorld!” will display in a toast message.

Close 2nd instance of VS Code.

To make a simple change to the extension:

1. Open src/extension.ts.

2. Change the message text in the call to showInformationMessage to “Hello VS Code”:

let disposable = vscode.commands.registerCommand('helloworld.helloWorld', () => {
	// The code you place here will be executed every time your command is executed
	// Display a message box to the user
	vscode.window.showInformationMessage('Hello VS Code');
});