Photo par Aaron Barnaby

Quelques conseils lors du développement et de la publication d'extensions pour Azure DevOps

Gagnez du temps lors du développement de vos extensions

Posted by Damien Aicheh on January 16, 2020 · 6 mins

Dans cet article, je voudrais partager avec vous une liste de conseils rapides que je trouve personnellement utiles lors du développement d’extensions Azure DevOps. Cela vous aidera probablement à gagner du temps lors du débugage ou de la publication de votre extension.

Développement

Pour développer votre extension Azure DevOps il est recommandé de commencer par suivre la documentation Microsoft officielle; elle contient des exemples illustratifs qui en font un très bon point de départ. N’hésitez pas à consulter également le répertoire officiel Git pour voir comment les tasks actuelles ont été construites.

Utiliser les packages Npm

Lorsque vous développez une extension Azure DevOps, vous utilisez Typescript. Le Typescript sera transpilé en Javascript en utilisant la ligne de commande tsc. Cette commande compilera tous vos fichiers .ts dans votre projet et générera un fichier js pour chacun d’eux. Ce qui est intéressant avec Typescript, c’est que vous pouvez utiliser tous les packages npm dont vous avez besoin!

Accélérez le développement

Il est toujours recommandé de compiler votre propre extension localement pour tester ses résultats pendant la période de développement. Si votre task doit avoir une variable comme point d’entrée, vous devez l’exporter.

Pour ce faire, les étapes de base sont les suivantes:

  • Exportez vos variables une par une en utilisant une ligne de commande
  • Compiler l’extension
  • Lancez l’extension en exécutant le fichier .js généré

Il s’agit d’un processus répétitif et long. Pour résoudre ce problème, il est recommandé de créer un script. un vrai exemple pour cela est un Script Shell qui contient toutes vos variables, compile et exécute votre extension. Vous trouverez ci-dessous un exemple de script; veuillez noter que les variables sont exportées pour un Mac la syntaxe Windows est disponible sur documentation Microsoft:

export INPUT_SourceFolder="./../samples/icons" &&
export INPUT_Contents="**/*.png" &&
export INPUT_BannerVersionNamePosition="bottomRight" &&
export INPUT_BannerVersionNumberPosition="none" &&
export INPUT_BannerVersionNameText="mvp" &&
export INPUT_BannerVersionNameColor="#C5000D" &&
tsc &&
node launch-icon-badge.js

Les avantages de ce fichier sont:

  • peut être enregistré dans votre dépôt Git
  • savoir exactement quelles sont les variables que vous avez utilisées pour votre test
  • gagner du temps lorsque vous exécutez l’extension

Accéder aux fichiers de votre extension Azure DevOps

Lorsque vous souhaitez accéder à un fichier spécifique dans votre extension Azure DevOps, comme une police de caractère, vous pouvez le charger directement en utilisant un chemin relatif comme celui-ci:

'./my_font.ttf'

Cependant, cela fonctionnera localement, mais si vous déployez votre extension dans l’environnement Azure DevOps, cela ne fonctionnera pas et vous aurez un message vous disant que votre fichier est introuvable. Pour résoudre ce problème, vous devez utiliser un chemin absolu. Pour ce faire, chargez simplement votre fichier comme ceci:

path.join(__dirname, 'my_font.ttf')

Cela fonctionnera localement et en ligne.

Publication

Créer un package

Pour générer un package pour votre extension, c’est toujours la même chose dont vous avez besoin: installer les packages npm, builder et générer le fichier .vsix. Vous devrez également mettre à jour la version à l’intérieur de vss-extension.json. Voici un exemple:

cd myFolderTask
npm install
tsc
cd ..
tfx extension create --manifest-globs vss-extension.json

Vous pouvez optimiser ce script pour modifier la version de votre extension, en modifiant dynamiquement la clé version dans le fichier vss-extension.json.

Mettre à jour le package pendant le développement

Votre extension doit être uploadée en ligne afin de la tester dans un pipeline. Il est recommandé de faire vos tests en publiant votre extension en mode privé. Vous pouvez donc faire tout votre développement en toute sécurité. Pour ce faire, spécifiez-le simplement dans votre vss-extension.json comme ceci:

"public": false

Par défaut, le statut de votre extension est privé, mais vous devrez définir la propriété public à true lorsque vous publierez définitivement votre extension, elle sera donc déjà là.

Vous partagerez ensuite avec votre propre organisation pour pouvoir la tester. Lorsque vous effectuez tous vos tests, vous metterez à jour votre extension. J’ai remarqué que parfois mon agent de build conserve la version précédente de mon extension au lieu d’obtenir la nouvelle que j’ai récemment téléchargée. Pour éviter de perdre du temps, supprimez et réinstallez votre extension, puis partagez-la avec votre organisation et vous vous assurerez que vous utilisez la bonne version.

Définissez l’icône de votre extension

Si vous effectuez une task pour Azure DevOps, vous devrez ajouter une icône. La task nécessite plusieurs images:

  • Une icon.svg
  • Un icon.png aux dimensions 32x32

Si vous ne définissez pas les dimensions sur 32x32 pour votre icône, elle ne sera jamais affichée dans Azure DevOps.

Touche finale

J’espère que ces conseils vous aideront à développer vos propres extensions Azure DevOps. N’hésitez pas également à consulter mes tasks précédentes disponibles ici:

Happy coding!

N'hésitez pas à me suivre sur pour ne pas rater mon prochain tutoriel !