Project sjablonen en extensie maken voor Visual Studio 2019

Hoi!

Onlangs heb ik twee projectsjablonen gemaakt voor Vue JS + Asp.Net Core, beide als Visual Studio 2019-extensies. Ze werden gedeeld op Visual Studio-marktplaats, zoals je kunt zien op de onderstaande link:

  • Template Vue JS + Asp.Net Core 3.1

Wilt u weten hoe u uw eigen extensie kunt maken en uw eigen sjabloon kunt publiceren? Zo ja, dan is de rest van het artikel een stapsgewijs proces om dat te doen.

Project creatie

Het eerste dat u moet doen, is een project maken dat u als sjabloon wilt delen. In dit artikel zal ik stap voor stap demonstreren met behulp van het Vue JS + Asp.Net Core-project dat ik al heb gepubliceerd.

Project exporteren

Zodra het project is gemaakt, gaat u in Visual Studio 2019 naar de menuoptie Project en kiest u de optie "Sjabloon exporteren":

Er zijn twee soorten sjablonen: projectsjabloon en itemsjabloon. Omdat we in ons geval een projectsjabloon maken, heb ik de onderliggende optie geselecteerd:

De volgende stap is het configureren van de naam, beschrijving, pictogram dat aan gebruikers wordt getoond en het afbeeldingsvoorbeeld. Het is erg belangrijk om deze informatie zo goed mogelijk in te stellen, zo hoog als je kunt, omdat het zal verschijnen voor eindgebruikers die je sjabloon / extensie zullen downloaden en installeren.

En schakel de optie "Automatisch importeren naar Visual Studio" uit. Op die manier kunt u de extensie die u maakt installeren.

Ten slotte genereert het proces een compacte map die de sjabloon zelf bevat, maar dit is niet het einde van de creatie:

Definitie van tags

Wanneer we een nieuw project maken op Visual Studio 2019, verschijnen de sjablonen samen met enkele specifieke tags, die ons helpen de sjablonen te filteren:

Sinds de nieuwste versie van Visual Studio 2019 zijn deze tags verplicht voor degenen die een extensie willen publiceren. Zonder deze wordt de extensie geïnstalleerd, maar de sjabloon wordt nooit in de lijst weergegeven, zelfs niet als de gebruiker daarnaar zoekt.

Om deze tags te maken, opent u de compacte map die in de laatste stap met de sjabloon is gegenereerd en opent u het .vstemplate-bestand met een teksteditor:

Voeg in de sectie "Sjabloongegevens" na de tag "ProvideDefaultName" de taglijstverwijzing toe naar uw sjabloon, zoals platform, projecttype, taal, enz. In mijn geval heb ik het volgende gespecificeerd:

De volledige beschikbare tag-lijst is te vinden op de onderstaande link:

Creatie van de extensie

Met de sjabloon al gemaakt en de tags ingesteld, is het nu tijd om het installatiebestand voor de extensie te maken.

Maak daarvoor gewoon een project van het type VSIX Project:

Dit is de basisstructuur van het project:

PS: ik heb de projectnaam echter gemaakt met bepaalde speciale tekens als "+", alleen voor leerdoeleinden, vermijd dat alsjeblieft in echte scenario's. Het is beter om te creëren zonder lege spaties of speciale tekens, zoals dat: TemplateVueJSAspNetCoreArtigoMedium, in plaats van de naam die ik heb opgegeven. Het voorkomt build-problemen, omdat de VS automatisch naamruimten en klassen genereert met die naam.

Voeg in de root de compacte mapverwijzing naar uw sjabloon toe. Het is belangrijk dat de compacte map de .vstemplate-bestandswijzigingen bevat met de tags die ik eerder noemde. Vergeet dat niet.

Dit project heeft een manifestbestand dat de informatie over de installatie-instructies van de extensie e zal bevatten.

Als u dubbelklikt in dat bestand, wordt het geopend als een formulier, dat u veld voor veld kunt invullen.

Verander zorgvuldig alle noodzakelijke informatie met kwaliteit, want het zal ook aan de eindgebruiker in de installatie en op de markt verschijnen. Het is ook noodzakelijk om het veld "Auteur" correct op te geven, omdat het normaal gesproken de LAPTOP-naam heeft.

Klik daarna op "Activa":

Verwijder de bestaande middelen, als die er zijn, en klik op "Nieuw":

Kies de opties die ik heb geplaatst en geef in het pad de compacte map op die u aan het project hebt toegevoegd.

Generatie

Om het installatiebestand te maken, bouwt u gewoon het project in de releasemodus. Het genereert het .exe-bestand dat wordt gebruikt om de extensie op VS te installeren.

Gedaan! Onze extensie is gemaakt. U kunt het nu testen, voordat u op de Visual Studio-marktplaats publiceert, om te zien of alles goed werkt.

Visual Studio Market Publish

Als u uw extensie voor het publiek wilt publiceren, kunt u dat doen op Visual Studio Marketplace.

Ga hiervoor naar marketplace.visualstudio.com en ga na inloggen met uw Microsoft-account naar de onderstaande opties:

Upload de .exe van uw extensie:

Vul het formulier in met de sjabloon- en extensie-info. Let goed op, aangezien die informatie openbaar zal zijn.

Zodra het proces is voltooid, slaat u gewoon op en wacht u op het goedkeuringsproces. Dat kan een paar minuten duren.

Gevolgtrekking

Ik hoop dat dit artikel je heeft geholpen. Bedankt voor het lezen.

Hieronder staan ​​mijn social media profielen. Voel je vrij om contact te maken en een vraag te stellen. In deze profielen deel ik regelmatig inhoud over webtechnologieën en IT-evenementen.

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

Ik heb onlangs ook een YouTube-kanaal gemaakt om bij te dragen aan de technische gemeenschap die ook dit platform gebruikt, gericht op .NET Core, Vue JS, Azure en meer. Als je geïnteresseerd bent in deze onderwerpen, raad ik je aan om je in te schrijven. Binnenkort zal regelmatig inhoud worden uitgebracht, terwijl ik audio, video en inhoud aan het opzetten ben om u een ervaring van hoge kwaliteit te bieden.

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