Create Visual Studio Team Services extension

By Mirek on (tags: extension, visual studio, VSTS, categories: tools, web)

In this post I will give you a couple of hints and tips on hot to start creating and deploying an extension for Visual Studio Team Services. Keep reading…

Visual Studio Team Services aka VSTS (formerly Visual Studio Online) allows to extend its functionality by installing external applications. Those applications, called extensions, are available in the VSTS marketplace and can be installed directly to your VSTS account.
In this post I will give you couple of links that speeds up development of your own VSTS extension.

VSTS extension is basically a piece of HTML, CSS and JavaScript. You can use any of the available tools to develop the extension. All you have to do is to stick to some rules about calling the VSTS API. On the Microsoft documentation pages there are quite extensive guides on how to start with the extension, how to create it, build it and how to publish it to the market place. There is also a number of sample extensions which you can download and use as your starting point.

As a boilerplate for your extension I recommend the Yeoman generator VSTS-EXT. This tool simply generates all required files, configurations, downloads neccesary SDK’s and prepares the extension to be build and publish.

image

Once you have your extensions compiled into a .visx file you can upload it to the marketplace. Just go to publisher portal and create new publisher for you VSTS account. Once you upload you extension file you have to share it with your VSTS account to be able to install.

vsts_share

Clipboard02

Then you can simply view your extension

Clipboard01

and install it on your account as this is shared with your account only

Clipboard03

One of onother usefull tools I found during the development of the VSTS extension is the Contributions Guide. This is a public free extension which you can add to your VSTS account and which gives you some usefull info. It basically shows you all the places in VSTS UI you can extend with your extension. It also gives you a content of the current context.

Clipboard04

In the next post I will show you how to develop you VSTS extension with the live debug mode on VSTS !