How to create a VS Code extension

Hi there, in this article we would be creating an extension for VS Code and publishing it to the vscode marketplace.

Excited about that 🥰? Lets Start

What we are going to create?

We would be building an auto-complete extension that auto-completes the bootstrap snippets in an Html file.

Prerequisites

You must have node.js installed on your machine.

Step 1. Install Yo! 🤟🏻

Yes, you read that correctly. We have to install yo to create our vscode extension.

To install yo fire-up your terminal or command prompt.

Note: Windows users please open your command prompt as an administrator.

After being set type in the following command:

macOS:

sudo npm install -g yo

Windows:

npm install -g yo

Yo! you have successfully installed Yo 🎉

Step 2: Project setup

Setting up the project is really simple.

All you need to do is:

1. Create a new folder. Let us say “myFirstExtension”
2. Open your terminal or command prompt and navigate to the folder we have just created.
3. Run the following command

yo code

At this step, vscode extension generator would show up

From the given options choose New Code Snippets to create an auto-complete snippets extension.

After that being done, you would be prompted with some questions such as the name of the extension, description etc.

Also, there would be a prompt saying

“Enter the language for which the snippets should appear. The id is an identifier and is a single, lower-case name such as ‘PHP’, ‘javascript”

Type in html for this as we are creating snippets for HTML

Hora 🎉 ! You have successfully set up the project and we are now ready to code our extension.

Step 3: Code the extension.

Now you may close your terminals and command prompts and open the folder we created in the previous step. There you will notice a folder created with the name of your extension. Open this folder inside your favourite code editor. Like vscode in my case.

Now, head over to snippets folder and open snippets.json file.

At this point, your snippets.json file would we something like this

{}

Yep, it’s an empty object and we have to code our snippets inside this object.

Lets Code!

Code along with me:

prefix: what user would type to access the snippet
body: the body of the snippet. In this case Array of HTML tags

Yes that it! We have successfully created our first snippet.

So whenever users types “!start” in vscode the body of our snippet would be printed there.

You can Create multiple snippets by adding more objects to the main object

Wola! You have created your own very first extension 🥰

Just keep adding your snippets and create some great snippets.

Please post your extension links below because I cant wait to see what you have made.

Complete Bootstrap Snippets Code

https://gist.github.com/piyushgarg195/36fda82a1662e04618a34afbca293830

Step 4: Configuring the Extension

At this point, you have successfully created your vscode extension.

Now open package.json file present in your project folder.

In this file, we need to make a few changes as listed below:

1. Adding Publisher name in package.json

Line number #5

2. Updating Readme.md file

This file is the documentation of your extension. You need to edit this file before publishing your extension.

Finally: let's publish our extension

To publish your extension first you need to download vse tool by writing a command

macOS

sudo npm install -g vsce

Windows ( open command prompt as administrator)

npm install -g vsce

Now, after installing vse, navigate to your extension directory and open that directory in terminal or command prompt and type the following command

vsce package

After this you would be prompted with a message saying

“A ‘repository’ field is missing from the ‘package.json’ manifest file.
Do you want to continue? [y/N]”

Hit ‘y’ and press enter.

This would create <extension_name>.vsix file

Congratulation! you are now ready to publish it.

• Head over to https://marketplace.visualstudio.com/vscode and create your free account.
• After signing select publish extensions from the top right corner.

• Create a publisher

Note: Please make sure that the publisher name in package.json is same as you create a publisher here.

• Select + Create new extension and select visual studio from the dropdown

• Upload your .vsix extension

• Click Continue

Congrats! Your extension is now published! 😍

Do visit:

Top 10 visual studio code extensions 2020