Generate Team Services extension starter kit with the Yeoman generator VSTS-EXT

  • Article

We’ve been developing extensions for the Visual Studio Marketplace for a while. An observation we’ve made is that we have spent a lot of time building basic extension architectures, managing the latest version of the SDK and typing, creating consistent folder structures, and configuring manifests.

“Never let humans do a computer’s job” – Donovan Brown

As part of our efforts to embrace DevOps and continuously improve our engineering process, we built a Yeoman-based tool to generate an extension template (or starter kit). It’s based on the latest version of the SDK folder and file architecture, and the manifest file is set up with your input data parameters. Simple! Consistent!

POST UPDATED: April 7, 2017 – v1.0,23 Support for widgets added and future roadmap updated.
SNAGHTML494148d

What do you need to get started?

Before to use the generator, some tools are required:

  • Install NodeJs, version 6.9.5 LTS or higher
  • Install yeoman

npm install -g yo

  • Install grunt

npm install -g grunt

  • install Tfx-cli

npm install -g tfx-cli

  • Install typescript

npm install -g typescript

Get the VSTS extension generator

 imageimage

To download the latest generator, run the npm command

npm install -g generator-team-services-extension

Now have everything you need to generate your extension template.

How to use the generator

The yeoman generator is based on 3 steps:

  • User launches the generator from the command line
  • Generator asks user for input
  • Generator creates the extension code skeleton

Launch the generator

  • Launch Command Prompt
  • Path to the root folder where you would like to create the extension
  • Run the command yo team-services-extension, where yo is Yeoman, and team-services-extension the generator name

SNAGHTML4948f79

Prompt user for information and scaffold the extension

The generator asks user for information to scaffold the extension. The first question is the choice of the extension type. For this release, you can generate extension hub or build/release custom task. We plan to extend the generator to all extensions types. The next  questions are used by the generator for scaffolding the manifest and folder structure.

The extension generator actions is in 3 steps:
SNAGHTML495a3c8

  1. The generator ask input parameters from user to configure the extension
    • The extension code is fully compatible with Visual Studio And Visual Studio Code, by choosing the IDE in the latest input generator “Do you intend to use Visual Studio”.
    • If you choose to use Visual Studio, the generator creates sln and csproj files and the extension folder is in sub folder.
  2. The generator copy and create all extensions folders and files in the new extension structure
  3. The generator call commands for :
    • Get all npm dependencies packages needed for the extension
    • Get the latest SDK and typing, and copy it in the correct folder
    • Compile the typescript code
    • Create the extension package (vsix)

Review the generated extension scaffolding

Explore the generated scaffolding in your selected root folder, which now contains:

  • Extension folder

  • Node_modules folder

  • Test folder (jasmine tests)

  • Typing folder

  • Sample marketplace assets

  • Dist folder that contain compiled typescript file

  • Generated extension package

    3

You’re ready to test this sample extension to upload the vsix package to your publisher.

The goal of this tool is to accelerate the setup of new extensions in a consistent manner, allowing you to focus on developing and testing the extension.

What’s next?

  • Expect a few hotfixes as we improve the generator and action your feedback
  • Add the Widget dashboard template generator DONE v1.0.23
  • Integration and reference with Application Insight
  • Add vsts token as User configuration parameter
  • In custom task add the user choice to use nodejs script instead powershell

Feedback

We need your feedback! Here are some ways to connect with us:

  • Add a comment below
  • Ping us on twitter image