Creating a VSCode extension

December 03, 2019 - 2 min

Get up and running in minutes with this concise guide.

Generating Project Files

Install the pre-requisites and run the wizard:

npm install -g yo generator-code
yo code

You will be asked to choose JavaScript or TypeScript and for a project name. This creates a working VSCode extension which you will be able to run straight away.

Developing

Press F5 or go to Debug ---> Start Debugging to run the extension. This opens a new window which has the extension activated. You can begin testing the pre-built "Hello World" command.

The main file to get started with is extension.ts. If you console.log something, it will appear in the new window's console. You can open the console under Help --> Toggle Developer Tools.

If you want your code to run as soon as VSCode is launched, instead of the default which only runs when your commands are called, consider changing the activationEvents field in package.json to ["*"].

Getting Inspiration

Browse samples projects created by Microsoft here. For example, this extension shows how to create a status bar item displaying how many characters are selected.

My extension Terminal Zoom is a good example of creating status bar items, registering commands, and using quick pick menus.

Publishing

Install the publishing tool with npm install -g vsce
Create a personal access token using these steps
Create a publisher with vsce create-publisher (publisher name)
Add your publisher name to package.json: "publisher": "my-publisher-name"
vsce package
vsce publish

Updating

Once your extension is published and you make changes to your code, you can push updates by running the publish command followed by your choice of a version incrementor:

vsce publish [minor | major | patch]

This command updates your extension on the VSCode Marketplace, increments the version number in package.json, and creates a new commit with this change.