How to create a VS Code extension

How to create a VS Code extension

Piyush Garg
·Apr 22, 2020·

5 min read

Subscribe to my newsletter and never miss my upcoming articles

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:

{
  "start":{
     "prefix": "!start",
      "body": [
        "<html>",
        "</html"
      ],
    "description": "Basic Starter Template"
  }
}
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

{
  "start":{
     "prefix": "!start",
      "body": [
        "<html>",
        "</html"
      ],
    "description": "Basic Starter Template"
  },
  "h1":{
    "prefix": "!h1",
    "body": [
        "<h1>",
        "</h1"
      ],
     "description": "Basic html tag"
  }
}

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.

{
    "name": "bootstrap-snippets",
    "displayName": "bootstrap-snippets",
    "description": "A simple Bootstrap snippets",
    "version": "0.0.1",
    "engines": {
        "vscode": "^1.44.0"
    },
    "categories": [
        "Snippets"
    ],
    "contributes": {
        "snippets": [
            {
                "language": "html",
                "path": "./snippets/snippets.json"
            }
        ]
    }
}

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

1. Adding Publisher name in package.json

{
    "name": "bootstrap-snippets",
    "displayName": "bootstrap-snippets",
    "description": "A simple Bootstrap snippets",
    "publisher": "piyushgarg",
    "version": "0.0.1",
    "engines": {
        "vscode": "^1.44.0"
    },
    "categories": [
        "Snippets"
    ],
    "contributes": {
        "snippets": [
            {
                "language": "html",
                "path": "./snippets/snippets.json"
            }
        ]
    }
}

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.

  • 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 Best vscode extensions to make your development smooth and powerful.medium.com

Did you find this article valuable?

Support Piyush Garg by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors
 
Share this