Create Extension for Visual Studio Code [Jim's Blog]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
<span class="iconify mr-1 svg-loading" data-icon="mdi:arrow-left"></span>====== Create Extension for Visual Studio Code ======

<wrap lo>Thursday November 11, 2021</wrap>

(This is a follow-up to a question asked during my recent [[posts:2021:2021.11.11_-_visual_studio_code_the_swiss_army_knife_of_editors_tech_talk|Visual Studio Code talk]])

Visual Studio Code already has an [[https://marketplace.visualstudio.com/VSCode|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.

===== Prerequisites =====

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

  * [[https://nodejs.org/en/|Node.js]]
  * [[https://git-scm.com/|Git]]

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

<code bash>
sudo npm install -g yo generator-code
</code>

===== Create a Project =====

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

<code bash>
mkdir new_extension

cd new_extension
</code>

Run Yeoman to generate a project:

<code bash>
yo code
</code>

I answered the project generator questions as follows:

Project types:

<code>
> 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)
</code>

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?

<code>
> npm
yarn
</code>

//(Project is generated)//

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

<code>
> Open with 'code'
Skip
</code>

===== Running the Project =====

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.

===== Make Changes To Project =====

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”:

<code javascript>
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');
});
</code>

3. Press [F5] to run the project, then run the “Hello World” extension in the new instance, again.

You should see the new “Hello VS Code” text in the toast message.

===== Next Steps =====

This has been a simple walkthrough. For more information, please refer to [[https://code.visualstudio.com/api/get-started/your-first-extension|this article]], which is what I followed.