Skip to content

Creating VS Code Extension

Published by kksrini89 on April 19, 2020

Last updated on June 5, 2020

To follow along the theme of my blog, I would like to share with you on my Creating VS Code Extension process.

As you all know that, every week I publish one article on building anything with Vanilla JavaScript. But, This time I want to make it a little different on the Productivity side.

Introduction

I have been creating Vanilla JS Web Componentssince a few months. So I thought of making it as a reusable code-snippetfrom this process.

You can find my published Web Componentspackages from NPM site.

Creating VS Code Extension

I want you to understand and follow this Creating VS Code Extensionprocess in an easy way, so I walk you through the steps I followed while creating JS Web Component.

To keep things simple, I put up these processes in 3 different Major Categories. Prepare, Develop, and Publish.

Once you gone through these steps, you can also build your Own VS Code Extension.

Process

1. Extract/Construct the Repeated CODE

This step is to extract or construct your code which you want to make it as a Code Snippetso that others can make use of that.

Why Code Snippet?

This allows you to build your prototype or code implementation very fast instead of spending time on setting it up environment or other settings.

2. Snippet Generator

This is a very handy tool to generate your code snippet for VS CodeIDE in a matter of time. And even it provides support for different IDE such as Sublime, Atom.

Once your code snippets are ready, you can jump on the below steps which is to create the VS extension project files.

Develop

3. Create VS Code Extension Project

In order to generate the skeleton for this VS Code Extension project, you will need to install the below npm package,

> npm install -g yo generator-code

The above command will install the Yeoman generator(scaffolding tool) and the extension generator (generator-code).

> yo code

Once typed the above command, you will need to answer some questions to setup the project.

4. Create Code Snippet

You have done already creating snippet from the step 2. Grab it and paste it inside snippets.jsonfile like below,

{
    "Create Vanilla JS Web Component": {
        "prefix": "js-webcomponent",
        "body": [
          "class ${1:Hello}Component extends HTMLElement {",
          "   constructor() {",
          "     super();",
          "     this._shadowRoot = this.attachShadow({ mode:'open' });",
          "   }",
          "",
          "   static get observedAttributes() {",
          "     return [''];",
          "   }",
          "   ",
          "   connectedCallback() {",
          "     this._shadowRoot.appendChild(template.content.cloneNode(true));",
          "   }",
          "",
          "   attributeChangedCallback(name, oldVal, newVal) {",
          "   }",
          "}",
          "customElements.define('${2:vj-hello}', ${1:Hello}Component);",
          ""
        ],
        "description": "Create Vanilla JS Web Component"
    }
}

Quick Tip: ${1} and ${2}is to stop for entering a user-desired value (Ordering matters). Here I have prefilled the values for ${1: Hello}.

Publish

5. Essential Fields from Package.json file

The below fields you will have to fill before publishing your extension to VS code marketplace.

{
  "name": "<npm-pkg-name>",
  "categories": [
        "Snippets"
    ],
  "contributes": {
        "snippets": [
            {
                "language": "javascript",
                "path": "./snippets/snippets.json"
            }
        ]
  },
  "publisher": "<YOUR WISH>",
  "icon": "<ICON-filename-with-extension>",
  "version": "<extension-version>",
  "author": "WHO-Created",
  "repository": {
    "type": "git",
    "url": "<YOUR-project-github-link>"
  }
}

Iconfield should have 128 * 128size which is not SVG.

Categories, contributes and enginesare the fields prefilled with yeoman generator when creating project files. YOU don’t need to change this.

You can change contributes.snippetsfield entry only when you have multiple types of code snippet.

6. Package IT

Once done the above changes from the Publishcategory, You will have to Packageit now in order to publish it to the marketplace.

You will need to install vscenpm package,

> npm i vsce -g

> vsce -v (To verify whether it's installed)
a) Create .vsix file,

From the root of your project folder opened in the OS terminal, You will need to create vsix file like below,

> vsce package
b) Create Publisher Name,
> vsce create-publisher <publisher-name>

<publisher-name>is something what you have filled from package.json file and you will need to remember it for the future purpose also.

This command requires you to provide Personal Access Token and it can be generated from Azure Portal. Follow along this URL for obtaining Personal Access Token.

finally, publish your vs code extension by typing

> vsce publish

I would like to say one final word is that if you don’t want to go for creating an extension then there is one more way. I will write up that idea in my next article.

Published inJavaScript