Bootstrapping Azure DevOps extensions with Yeoman

Matisse Hack

Azure DevOps has evolved over the last several years, which has resulted in many improvements to the extension landscape. Many engineering teams use this extension functionality heavily to customize their development environment exactly how they want it. When people first get started building an extension, they often deploy the extension to the Visual Studio Marketplace and use the browser’s built-in debugging tools. Although this approach works, we wanted to demonstrate a faster way to debug right in Visual Studio Code using hot reload.

The azure-devops-extension-hot-reload-and-debug repo already demonstrates this scenario, but we also wanted to offer developers an easy way to bootstrap their own projects. Our Yeoman generator will create a new, clean extension project for you and handle the details of filling in the required config files with the correct values.

Although the TFX CLI offers a command (tfx extension init) that will bootstrap an extension project, it does not contain the necessary bits for this hot reload and debugging scenario.

How to generate a new project

1. If you already have Node.js installed, you can use npm to install Yeoman:

   npm install -g yo
   

2. Yeoman is just the scaffolding engine so it doesn’t know how to generate an Azure DevOps extension project. We will need to install our generator that knows the specifics of how the extension should be set up:

   npm install -g @microsoft/generator-azure-devops-extension
   

3. Now that we have the Yeoman engine and the Azure DevOps extension generator installed we can use Yeoman to run the generator (we can leave off the package’s generator- prefix because Yeoman knows to only look for packages with this prefix):

   yo @microsoft/azure-devops-extension
   

4. The generator will ask you to fill in several parameters:

   • Extension ID: The unique ID that you want to publish your extension under.
   • Extension name: The name that users will see in the Visual Studio Marketplace and Azure DevOps.
   • Extension description: A short description that users will see in the Visual Studio Marketplace and Azure DevOps.
   • Extension publisher ID: The Visual Studio Marketplace publisher ID under which you want to publish the extension. To learn more see Package and publish extensions.

The result

The generator creates a new folder with the following folder structure (the folder’s name will be the extension ID you chose during creation):

.
├── .eslintrc.js
├── .gitignore
├── .vscode
│   └── launch.json
├── README.md
├── configs
│   ├── dev.json
│   └── release.json
├── img
│   └── world.png
├── package.json
├── src
│   └── hub
│       ├── hub.html
│       ├── hub.scss
│       └── hub.tsx
├── tsconfig.json
├── vss-extension.json
└── webpack.config.js

What’s next?

Now that you have generated a new project, you are ready to start debugging. Refer to the generated readme in your new project for instructions on how to get started. You should also check out our blog post for an in-depth look at how these features work.

Matisse Hack Software Engineer, Developer Services

Follow