Create Your Own VS Code Extension

When the marketplace extensions are not enough for you, there’s only one choice: to dive into the world of VS Code extension development. With it’s simple yet powerful API that will let you customize your experience whatever you like.

VS Code presents a highly customizable experience as a code editor. There are thousands of free extensions for you to choose. The VS Code team made it really easy to create your own extensions.

Extensions in VS Code are implemented using an Extension API. It’s so powerful that even some base features of the code editor are made with it. The Extension API can change almost everything from VS Code: looks, add components and support new programming languages.

This API is not complicated, starting to work with it is really simple.

The First Steps

Start by installing Yeoman and the VS Code Extension Generator. Input this commands,

npm install -g yo generator-code

Then execute the following command,

yo code

This will create a new folder. Open it VS Code and press F5. This will run the default new extension on a new window. Press ctrl+p and write,

>MyExtensionName

Changes to the behaviour of the extension can be made by changing the file extension.ts.

How Does It Work?

Mainly it makes use of three things: Activation Events, Contribution Points & VS Code API.

Activation Events. Events that cause your extension to become active.

Contribution Points. Static declarations made in the package.json

VS Code API. The set of JavaScript API that can be used in your extension code.

File Structure

The package.json file forms the Extension Manifest. Its most important fields are,

  • name and publisher:  these are used to form a unique ID for the extension.
  • main: the entry point file for the extension.
  • activationEvents and contributes: the Activation Events and Contribution Points are defined.
  • engines.vscode: specifies the minimum version of VS Code API that your extension is compatible with.

The Extension Entry File exports two functions, activate and deactivate. activate is executed when your Activation Event happens. deactivate gives you a chance to clean before your extension becomes deactivated.

Finally..

Remember to check if there’s an existing extension before going out there and making your own. You can find it in an Open Source project, and you could give back something instead.

For more info on this topic → VS Code API

If you have any questions feel free to drop me a line at [email protected].

Focus Mode

Contact Request

Close

We will call you right away. All information is kept private