Nous avons vu dans un précédent article les bases pour créer une extension pour VSTS, c’est-à-dire les prérequis nécessaires ainsi que la structure de la solution Visual Studio.

Cependant avant de pouvoir utiliser l’extension il reste l’étape de publication.

Publier une extension pour VSTS consiste à :

  • Créer le package vsix qui contient le manifest
  • Uploader ce package dans le publisher du Visual Studio Marketplace
  • Publier les fichiers dans un web site tiers (comme azure)

Les prérequis

Le mode d’hébergement

Il existe 2 modes d’hébergement des fichiers nécessaires (html, js, css, …) pour l’extension :

Soit les fichiers sont hébergés dans un hébergeur tiers comme par exemple un web site Azure.
Dans ce cas :

  • Le fichier manifest vss-extension.json contient la propriété baseUri avec l’url en https (VSTS étant en https, il ne peut appeler qu’une url en https) de ce web site et ne contient pas la propriété files
  • Seul le fichier vss-extension.json sera inclus dans le package vsix à publier

Soit tous les fichiers sont inclus dans le package à publier.
Dans ce cas :

  • Le fichier vss-extension.json contient la propriété files avec la liste des répertoires et fichiers nécessaires à l’extension et qui seront inclus dans le package vsix à publier.
  • La propriété baseUri ne doit pas être présente

vss extensions files

L’étendue de visibilité

L’étendue de visibilité de l’extension se configure dans le fichier vss-extension.json dans la propriété public qui par défaut est réglé à false.

Pour pouvoir rendre une extension public, il a des prérequis ainsi qu’un processus qui est disponible ici.

Pour utiliser une extension privée il faut la partager avec les comptes VSTS auquels ont souhaite donner les droits d’utiliser l’extension.

Création d’un publisher

Le publisher est l’espace de stockage où sont uploadées les packages. Chaque compte liveID peut avoir plusieurs publisher.

Pour créer un publisher :

Publier Extension publisher

Dans le fichier vss-extension.json remplir la propriété publisher avec l’ID créée.

Mise à jour du fichier manifest

Dans le fichier manifest il faut rajouter la propriété “targets”: [ { “id”: “Microsoft.VisualStudio.Services ” } ] qui n’est pas présente dans le template.

Création du package

Une fois tous les prérequis remplis, c’est-à-dire que le publisher est créé, que le mode d’hébergement est choisi, et donc que le fichier vss-extension.json est correctement rempli, nous pouvons générer le package vsix qui sera uploadé dans le publisher.

La première chose à faire avant la création du package est la compilation du projet afin de générer le fichier JavaScript js à partir du fichier TypeScript.

La génération du package se fait en ligne de commande grâce à l’outils vset qui doit être récupérer par le gestionnaire de packages npm

npm install vset –save-dev

Une fois installé, dans une invite de commande se placer dans le répertoire du projet, et lancer la commande

vset package

Publier extension vset package

Remarques

Comme expliqué dans le précédent article, le template de projet fourni pour les extensions possède une bibliothèque d’aide pour la génération et la publication de l’extension.

Pour profiter de cette aide il faut installer le client Grunt via npm et compiler le projet, le package est automatique généré.

De mon coté, j’ai installé l’extension  à Visual Studio Grunt Luncher qui permet d’exécuter les commandes Grunt directement à partir de Visual Studio

 

grunt vs

Publier extension grunt

A l’issue de cette exécution le package vsix est généré dans le répertoire du projet, son nom est composé du publisher ID, du nom de l’extension et de sa version.

Publier extension vsix

Publier une extension pour VSTS

Après la génération du package il ne reste plus que l’upload du package et son partage dans le publisher.

Pour uploader un extension, il faut se rendre dans votre publisher puis cliquer sur le bouton Upload new extension.

Publier extension upload

Une fois l’upload terminé, puisque l’extension est privée il faut la partager pour qu’elle puisse être accessible et utilisable dans un compte VSTS.

Pour cella cliquer sur le bouton Share et saisir le compte VSTS auquel vous voulez donnez les droits d’utiliser l’extension.

PublierExtVSTS011

Publication dans un site web tiers

Dans le cas où l’on souhaite que les fichiers de l’extension soient hébergés sur un web site tiers, il faut publier les fichiers.

Cette publication peut se faire directement via Visual Studio.

Toute la documentation pour hebérger les fichiers dans azure est ici https://www.visualstudio.com/en-us/integrate/extensions/publish/publish-azure

Installer l’extension

L’extension étant accessible dans votre compte VSTS vous devez tout de même l’installer pour l’utiliser.

Dans le manager d’extension, les extensions privées et partagées se trouvent dans la rubrique Shared with this Account

install extension

La procédure d’installation est expliquée dans l’article sur la présentation du Visual Studio Marketplace.

Exécution de l’extension

Dès que l’extension est installée, vous pouvez directement l’utiliser.

sample extension VSTS

Conclusion

Cette petite série d’articles a montré un aperçu des extensions pour VSTS, comment créer et publier son extension.
Avec les extensions il est possible de faire bien plus que cette exemple. Il est aussi possible d’étendre le formulaire d’un work item, ou créer sa tâche de build, la documentation officielle peut vous être très utile.