Comment créer des modèles de projet et une extension pour Visual Studio 2019

Salut!

Récemment, j'ai créé deux modèles de projet pour Vue JS + Asp.Net Core, tous deux en tant qu'extensions Visual Studio 2019. Ils ont été partagés sur Visual Studio Marketplace, comme vous pouvez le voir sur le lien ci-dessous:

  • Modèle Vue JS + Asp.Net Core 3.1

Souhaitez-vous savoir comment créer votre propre extension et publier votre propre modèle? Si oui, le reste de l'article est un processus étape par étape sur la façon de le faire.

Création de projet

La première chose que vous devez faire est de créer un projet que vous souhaitez partager en tant que modèle. Dans cet article, je vais démontrer étape par étape en utilisant le projet Vue JS + Asp.Net Core que j'ai déjà publié.

Exportation de projet

Une fois le projet créé, sur Visual Studio 2019 allez dans l'option de menu Projet et choisissez l'option «Exporter le modèle»:

Il existe deux types de modèles: le modèle de projet et le modèle d'élément. Comme dans notre cas, nous créons un modèle de projet, j'ai sélectionné l'option sous-jacente:

L'étape suivante consiste à configurer le nom, la description, l'icône qui sera affichée aux utilisateurs et l'aperçu de l'image. Il est vraiment important de définir correctement ces informations, autant que possible, car elles apparaîtront aux utilisateurs finaux qui téléchargeront et installeront votre modèle / extension.

Et décochez l'option «Importer automatiquement dans Visual Studio». De cette façon, vous pourrez installer l'extension que vous créez.

Enfin, le processus va générer un dossier compact qui contient le modèle lui-même, mais ce n'est pas la fin de la création:

Définition des balises

Lorsque nous créons un nouveau projet sur Visual Studio 2019, les modèles apparaissent avec des balises spécifiques, qui nous aident à filtrer les modèles:

Depuis la dernière version de Visual Studio 2019, ces balises sont obligatoires pour ceux qui souhaitent publier une extension. Sans ceux-ci, l'extension sera installée, mais le modèle ne sera jamais affiché dans la liste, même si l'utilisateur le recherche.

Pour créer ces balises, ouvrez le dossier compact qui a été généré avec le modèle à la dernière étape et ouvrez le fichier .vstemplate à l'aide d'un éditeur de texte:

Dans la section «Données de modèle», ajoutez après la balise «ProviderDéfaut» la référence de la liste de balises à votre modèle, comme la plate-forme, le type de projet, la langue, etc. Dans mon cas, j'ai spécifié ce qui suit:

La liste complète des balises disponibles se trouve sur le lien ci-dessous:

Création de l'extension

Avec le modèle déjà créé et les balises définies, il est maintenant temps de créer le fichier d'installation pour l'extension.

Pour cela, il suffit de créer un projet de type Projet VSIX:

Voici la structure de base du projet:

PS: cependant j'ai créé le nom du projet en utilisant certains caractères spéciaux comme «+», juste à des fins pédagogiques, veuillez éviter de le faire dans des scénarios réels. Il vaut mieux créer sans espaces vides ni caractères spéciaux, comme ça: TemplateVueJSAspNetCoreArtigoMedium, au lieu du nom que j'ai mis. Cela évitera les problèmes de construction, car le VS générera automatiquement des espaces de noms et des classes en utilisant ce nom.

Incluez à la racine la référence du dossier compact à votre modèle. Il est important que le dossier compact contienne les modifications du fichier .vstemplate avec les balises que j'ai mentionnées précédemment. N'oublie pas ça.

Ce projet a un fichier manifeste, qui contiendra les informations sur les instructions d'installation de l'extension e.

Si vous double-cliquez sur ce fichier, il sera ouvert comme un formulaire que vous pourrez remplir champ par champ.

Modifiez soigneusement toutes les informations nécessaires avec qualité, car elles apparaîtront également à l'utilisateur final dans l'installation et sur le marché. En outre, il est nécessaire de spécifier correctement le champ «Auteur», car il a normalement le nom LAPTOP.

Après cela, cliquez sur «Actifs»:

Supprimez les actifs existants, s'il y en a, et cliquez sur «Nouveau»:

Choisissez les options que je mets et dans le chemin spécifiez le dossier compact que vous avez ajouté au projet.

Génération

Pour créer le fichier d'installation, il s'agit simplement de construire le projet en mode release. Il générera le fichier .exe utilisé pour installer l'extension sur VS.

Terminé! Notre extension a été créée. Vous pouvez le tester maintenant, avant de publier sur la place de marché Visual Studio, pour voir si tout fonctionne correctement.

Visual Studio Market Publish

Si vous souhaitez publier votre extension au public, vous pouvez le faire sur Visual Studio Marketplace.

Pour ce faire, accédez à marketplace.visualstudio.com et, après vous être connecté avec votre compte Microsoft, accédez aux options ci-dessous:

Téléchargez le .exe de votre extension:

Remplissez le formulaire avec le modèle et les informations d'extension. Comme ces informations seront publiques, faites attention en détail.

Une fois le processus terminé, enregistrez et attendez le processus d'approbation. Cela pourrait prendre quelques minutes.

Conclusion

J'espère que cet article vous a aidé. Merci de l'avoir lu.

Voici mes profils de réseaux sociaux. N'hésitez pas à vous connecter et à poser une question. Dans ces profils, je partage fréquemment du contenu sur les technologies Web et les événements informatiques.

Twitter: https://twitter.com/alemalavasi Linkedin: https://www.linkedin.com/in/alexandremalavasi/

J'ai également créé récemment une chaîne Youtube pour contribuer à la communauté technique utilisant également cette plateforme, axée sur .NET Core, Vue JS, Azure et plus encore. Si vous êtes intéressé par ces sujets, je vous recommande de vous abonner. Le contenu sera bientôt publié régulièrement, pendant que je configure l'audio, la vidéo et le contenu pour vous offrir une expérience de haute qualité.

Lien: https://www.youtube.com/channel/UC-KFGgYiot1eA8QFqIgLmqA