Extension development

Getting started

Visit the sample extension repository for instructions on building your first Azure DevOps extension:

https://github.com/Microsoft/azure-devops-extension-sample

Migrating from the older VSS.SDK

The Visual Studio Marketplace was introduced in 2015 as a way for third-party developers to extend the set of features offered by Azure DevOps (previously Visual Studio Team Services and TFS). Extensions that contributed web UI used the VSS.SDK JavaScript library to interact with the Azure DevOps web UI. At that time, the Azure DevOps web UI was based on technologies such as jQuery and requireJS. Extensions could leverage the same jQuery controls used in the product within their extensions. Since then, however, the majority of the Azure DevOps web UI has been converted to new React-based components.

The new Azure DevOps extension sample uses a new Azure DevOps SDK along with the React-based components in the Azure DevOps UI library described in this site. The new extension model offers a number of benefits over the older model:

  1. Performance: Azure DevOps pages are removing the need to load older JavaScript libraries like jQuery, requireJS, and a large amount of internal legacy code that was built on those technologies. Whenever a VSS.SDK-based extension is loaded, it forces those libraries to be loaded not only in the extension iframe, but also in the host frame. It is a lot of extra code for the browser to parse, compile, and execute, and it can significantly increase the time to load the page and display extension content. The extension sample also leverages webpack to produce a single bundle containing the minimal amount of code that your extension needs. The result is far fewer network requests required to load the extension's UI.

  2. Consistent UI: The jQuery-based controls used in VSS.SDK-based extensions have been replaced in most areas of the Azure DevOps UI. Using the React-based Azure DevOps UI components ensures that an extension's UI will match the UI used by other parts of the product.

  3. Theming: Theming, including a dark theme preview, was introduced on the service in October 2018 (and coming to a future version of Azure DevOps Server). The new UI components are fully theme aware. Extension developers building UI exclusively with Azure DevOps UI components generally do not have to do anything to support different themes. The new Azure DevOps SDK allows extensions to honor the current user theme even with custom components. Some additional information can be found in the Theming section below.

Theming

Azure DevOps extensions that display web UI should honor the user's preferred theme. There are two main steps to reaching this goal:

  1. Use azure-devops-ui components where possible. These components are designed to honor the user theme without any additional work.
  2. For custom UI, use the SASS variables that ship with azure-devops-ui when referencing colors.

Reference Azure DevOps global styles

When consuming the 2.164.0 version or later of the azure-devops-ui package, extensions should import the Azure DevOps global styles in order to get the same look and feel (font family, font sizes, hyperlink treatment, etc.) of Azure DevOps pages. This can be done with the following import:

import "azure-devops-ui/Core/override.css";