Making your own vscode extension

8 min readMay 31, 2020

So, recently i just made my first vscode extension… and it felt good!
This article will cover basic things to start creating a vscode extension and some of my experience in making it the first time.
One thing I want to say beforehand is that I am not an expert yet at this but what i can truly say is that nothing is as hard as it seems 😀

Lets talk about vs code abit

If you opened this article i believe you have at least ever heard or known about vscode (or some might say Visual Studio Code). If not then basically it’s a lightweight code editor developed by Microsoft.

Since vscode is a code editor, it can perform much more faster and lighter than typical IDE such as eclipse. But with that performance comes one disadvantage where IDE often provides better tool such as built-in linter, better code template, code versioning tool and some features such as auto complete.

But where vscode actually shines is the power of the community. Vscode allows installation of extensions that comes directly from vscode marketplace itself. This extensions allow for very flexible customization by user. Adding linter or any other features like colorful bracket and even putting nyan cat in your vscode!

Find out ‘why’ you to create one

Yes, ‘why’ is the keyword here. The first and foremost important thing to talk about when you want to start doing something, is asking yourself why do you want to make it? Most typical answers are usually for learning or gaining fame, or maybe even both, the more reasons there is, the more motivation you will have.

One thing i can say is, don’t need to think big yet, just make a tool that is very specific that maybe only you will use. There is always the first step in everything and in the end of day at least you help yourself with your extension.

I am starting it because of a particular precise reason, I want to make a tool that I myself can use to further increase my productivity and maybe even some small part of community nearby me. That’s why extensions that i made are very precise and have a very specific use case, because what I am not going for big mark, I am aiming to increase my productivity and learning something new, hell i think that is enough reasons for me! (Spoiler: it’s golang unit test template generator)

And obviously everything seemed impossible at the start, making vscode extensions looks like some genius level piece art of work (which obviously i am not). But yeah, who knows what’s coming, i got a lot of free time on my hand anyway might as well try it.

The very first Part

Obviously number one, you gotta need vscode, in case you don’t have one yet, i will just put the download link here.

Vs code extensions support two main languages, Javascript and Typescript. So having some knowledge in either of them is pretty mandatory.

Also, make sure you have nodejs installed since we are going to use a lot of npm here.

Generating template

Ah Template, how very convenient. vscode already have it owns template generator for use, let’s jump straight into it.

First, install your template generator with npm install -g yo generator-code

Afterwards, lets run it with yo code
And it will prompt out this weird head thing (?) and language selection, pick your preferred language and proceed (i picked javascript here)

Afterwards, you will need to edit your extension name and description here, you can just proceed with anything you prefer.

Now, a folder called hellovscode will be created in your home directory, open it with vscode with simply typing code hellovscode in the folder directory.

Use F5 to run your extension and another window will popup.
Now press ctrl+shift+p and find Hello World command, run it and a popup should come out on bottom right corner

Voila! You just run your first extension.
But what is actually happening with all that? Don’t worry i will explain some bits below, mainly on two files, on extension.js and package.json

Extension.js

This is where your you will mostly spend your time to code on. This file will contains all your code block and logical flow.

There isn’t much difference of this with normal nodejs code, one of the main difference is registering command. You will come upon this block vscode.commands.registerCommand('hellovscode.helloWorld' , in a nutshell that will register your function call to be used.
Another one is the frequent usage of vscode api and we will come back to that later on.

If you looked through the code, you will see this too vscode.window.showInformationMessage('Hello World from hellovscode!');
For experiment, try changing the value of the message and try running it again.

Package.json

This file is the one that basically will link the commands you created from extension.js and link it with commands that you defined.

You will see the command that you have registered above hellovscode.helloWorld being put as a part of command titled Hello World .
And that’s how the command actually linked to your code.

Apart from it, this file will also enable the command to be put on right click bar and filtering where the command should appear (file type)

Publishing

Just in case that you might want to publish, i will also put the how to here!

First and utmost importance, install vsce npm install -g vsce , we will use this for most of our time to publish.
If you don’t have microsoft account yet, you should register since we will be needing the access token here.
Once you got the account sign in to the marketplace. Create your organization and click on it, the screen below should be showing.

4. Now click on the upper right corner where the red circle is and select Personal Access Token, create your personal access token and choose all accessible organizations with full access.

5. Remember your token since that is going to be used when uploading your extension.

6. You will need to create your publisher identity now, go to your command prompt and type run vsce create-publisher YOUR_PUBLISHER_NAME .
Insert your human name, email and personal access token when prompted. Your publisher account should successfully be created.

7. It’s publishing time! Prepare your extension environment in command prompt and type vsce package this will package your extension to marketplace format and now type vsce publish

And that’s it, your extension will be published.
On a side note, when publishing you should modify your readme (at least the first part where it’s saying This is Readme for.. ) since vsce will detect it and ask you to modify the readme.

Some Tips

Now you should get some basic understanding of how vscode extensions work. Here, i will share on some things that i have learned.

Utilizing VS Code API

Vscode itself has provided a lot of API for you to utilize and make your vscode extension. Generally, you will meet several common obstacles like getting your cursor position, getting line position or maybe getting the hightlighted word. Those all can be tackled with using the vscode api.

I suggest you to read through their documentation and experimenting upon their api and even reading through their API code! With the amount of documentation inside the code itself, you should be able to somewhat figure out which api that will become your saving light.

Googling things (read the docs or code)

So when in doubt, just.. Google? Photo by Nathana Rebouças on Unsplash

Most of the time in our programming life, when we are stuck there is always Google or Stackoverflow that is helping us in our journey.
But this time it will not always be saving you.

First thing, googling for help in this is quite tricky like for example you want to get highlighted word on cursor, you might search for vs code extension how to get total line.. or such. And let me tell you, most of the time it will direct you to the real extension itself or give you manual on how to use the vscode itself.
One way that can make it easier for you is adding api keyword there like vs code extension api how to ...

Also, it is pretty hard to find the relevant answers in google because the developer community is not that huge. And doing vscode extensions might look intimidating for most people. Even though in reality, it is not exactly that hard.

That’s why some of the best ways in learning how to develop a vscode extensions are by reading the documentations or the code.

Github Example

I have provided a text manipulation example in my github repository which might help for code references (be careful for some messy code though!)
That code will generate some template unit test in Go Language.

Wrapping up

What i have covered here is just the utmost basic of creating a vscode extension. One message i want to keep giving is that it is not as hard as it looks like, sometime you just need to push yourself a bit and try to give a look yourself.

There might be a lot of challenges in the way but if you never even started, you are missing every single thing.

In the end, thanks for taking up your time, hope you do enjoy it and able to understand that whole bunch of things i just explained to you all.
And hopefully, you will also start making an extension too!

Happy coding to you all in this social distancing season.