Learn Something New: How to Create a VSCode Extenstion

Visual Studio Code, my current IDE of choice, has become a tad bit cooler because I contributed to it. (JK, I’m not the only reason)

Before I delve into my contribution, lets discuss what Visual Studio Code is. Well.. VSCode is the newest cross platform code editor provided to you by Microsoft. VS Code contains many tools such as debugging tools, Git control and etc. It is also customizable, in which you can change the shortcuts, theme and preferences. And to top it all off… VSCode is FREE! I tend to use VSCode for my Node projects; I have also used it for TypeScript and .NET projects.

(VSCode is not to be thought of as a replacement for Visual Studio, so please if you are looking for more tools and features, keep using Visual Studio)

VSCode also contains extensions that can be downloaded from the Visual Studio Marketplace (this is where I come in), and I created one. I created a StackOverflow Search extension that allows you to conduct a StackOverflow Search straight from VSCode. Check It Out 🙂 Extensions can be made by anyone and I am going to give you a brief overview of how! If you need help downloading and using extensions, go to this link for help.

First I used the Yeoman generator extension to get up and running! Whether you are using TypeScript or JavaScript to code your extension, the Yo generator will provide all the files needed to create a successful extension. More info on how to get started with the Yeoman generator extension can be found here!

I did my project in TypeScript. The object orientated nature of TypeScript makes creating different functionalities of the extension pretty easy. To get you started on how to get up to speed with a TypeScript extension here is a quick and simple Hello World example. This is actually what I started with and moved on from there. If you want something a bit more advanced try try this.

Your next step is to publish to the Visual Studio Marketplace! Wanna know how? You will need to use vsce, the publishing tool! All the steps are clearly written out here. You will need to sign in to a Visual Studio Online account, so be sure to create an account if you don’t have one.

And boom you are all done and ready to go. My advice before creating an extension is be sure to check that your idea doesn’t already exist in the marketplace and also… check out any npm modules that may help you achieve your goal a lot easier! I definitely used one in my project 🙂

Have any questions? Feel free to contact me!

 

Advertisements
Standard

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s