VSTS Extension Template (w/ React and Webpack)

It is pretty clear to me nowadays that I always have a hard time trying to focus myself in a single subject to learn. Every time I start to study something cool, something, which is usually also pretty cool, gets my attention. This time VSTS extensions decided to get my attention.

Recently I realized that a feature that is pretty awesome on GitHub is not present on VSTS, and it is not even being tracked on VSTS UserVoice, so I decided to give it a shot and develop it myself, as an extension.

I am still working on my extension, but I realized that it took me some effort to put together the pieces I needed to develop this extension, and I decided that it would be a good idea to share this template with everyone who is interested in developing a new extension.

The template code can be accessed here. On the project README file you should find all the information you need to start creating your own extension!

To start a very simple VSTS extension is really easy, but on this template I already setup some nice tools that should make your life much easier and your development much more productive.

Wait… What is VSTS?

VSTS, which stands for Visual Studio Team Services, is a Cloud Based service offered by Microsoft for collaboration on code development.

As simple as it may sound, VSTS is actually a robust service that allows you to manage the entire flow of your application development. You can read a lot more about it on the links at the end of this post.

And, up to a certain limit, is free! 🙂

Why would I need this template?

You don’t really need it. Starting a new VSTS extension is a really straightforward process, and you can start one in 10 minutes, probably. The problem, or at least the hard and repetitive work, is in setting up the tools to make your development process decent and productive. That is where the template can help you.

The whole point of the template is to allow you to focus on your extension code, not having to worry about setting up the tools that you are going to need.

The tools setup on the template are:

  • React
    • For the user interface
    • It is, of course, setup with compiling JSX
  • Webpack
    • Webpack the module bundler that will take care of transpiling all the JSX code (and some other resources) to their final state
  • Jest
    • This is the Unit Testing Framework for our extensions 🙂
    • I didn’t even knew Jest until I decided to start this extension! It is created by Facebook and looks really nice and simple
    • This is the command line tool used by TFS and VSTS to do a lot of smaller tasks, and that includes managing extensions
    • This tool a simple npm package, so it will be installed with all the rest of the tools
  • Travis CI/CD
    • There is also a Travis CI/CD build partially setup on the project
    • This will require a little bit of manual work to make it work perfectly for your project
  • ESLint
    • To make our code look nice and follow minimum good practices.

The Code Editor

I must mention that the template also contains some configurations that would make it much easier to use with Visual Studio Code.

It is not really a requirement, but it will give you some extras, like a couple of suggested extensions to make it easier to use and some pre-configured tasks for running builds and tests with the default shortcut.


Please, let me know if you have any feedback on the template, and specially if you face some problem, I will definitively do my best to try to help.

You can also use the repository issues panel to report any problem or give any suggestions.

That is it, for now 🙂 I hope to be back really soon with more content


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.