Sådan oprettes projektskabeloner og udvidelse til Visual Studio 2019

Hej!

For nylig oprettede jeg to projektskabeloner til Vue JS + Asp.Net Core, begge som Visual Studio 2019-udvidelser. De blev delt på Visual Studio markedsplads, som du kan se på linket herunder:

  • Skabelon Vue JS + Asp.Net Core 3.1

Vil du vide, hvordan du opretter din egen udvidelse og offentliggør din egen skabelon? Hvis ja, er resten af ​​artiklen en trin for trin, hvordan du gør det.

Projektoprettelse

Den første ting du skal gøre er at oprette et projekt, som du vil dele som en skabelon. I denne artikel demonstrerer jeg trin for trin ved hjælp af det Vue JS + Asp.Net Core-projekt, jeg allerede har offentliggjort.

Projekteksport

Når projektet er oprettet, skal du på Visual Studio 2019 gå til menuen Projekt og vælge indstillingen "Eksporter skabelon":

Der er to typer skabeloner: Projektskabelon og Elementskabelon. Som i vores tilfælde opretter vi en projektskabelon, valgte jeg den underliggende mulighed:

Det næste trin er at konfigurere navn, beskrivelse, ikon, der vises for brugerne og billedeksempel. Det er virkelig vigtigt at indstille disse oplysninger korrekt, så meget som du kan bruge den høj kvalitet, fordi de vises for de endelige brugere, der vil downloade og installere din skabelon / udvidelse.

Og fjern markeringen i indstillingen "Importer automatisk til Visual Studio". På den måde kan du installere den udvidelse, du opretter.

Endelig genererer processen en kompakt mappe, der indeholder selve skabelonen, men det er ikke slutningen på oprettelsen:

Definition af tags

Når vi opretter et nyt projekt på Visual Studio 2019, vises skabeloner sammen med nogle specifikke tags, der hjælper os med at filtrere skabeloner:

Siden den seneste version af Visual Studio 2019 er disse tags obligatoriske for dem, der ønsker at udgive en udvidelse. Uden disse vil udvidelsen blive installeret, men skabelonen vises aldrig på listen, selvom brugeren søger efter det.

For at oprette disse tags skal du åbne den kompakte mappe, der blev genereret med skabelonen i det sidste trin og åbne .vstemplate-filen ved hjælp af en teksteditor:

I afsnittet "Skabelondata" skal du tilføje efter tagget "ProvideDefaultName" taglistehenvisningen til din skabelon, såsom platform, projekttype, sprog osv. I mit tilfælde specificerede jeg som følger:

Den fulde tilgængelige tagliste kan findes på nedenstående link:

Oprettelse af udvidelsen

Med den skabelon, der allerede er oprettet og de indstillede tags, er det nu på tide at oprette installationsfilen til udvidelsen.

Til dette skal du bare oprette et projekt af typen VSIX Project:

Dette er projektets grundlæggende struktur:

PS: dog oprettede jeg projektnavnet ved hjælp af visse specialtegn som “+”, bare til undervisningsformål, undgå at gøre det i rigtige scenarier. Det er bedre at oprette uden tomme mellemrum eller specialtegn, sådan: TemplateVueJSAspNetCoreArtigoMedium, i stedet for det navn, jeg har angivet. Det forhindrer build-problemer, fordi VS genererer automatisk navneområder og klasser ved hjælp af dette navn.

Inkluder i roden den kompakte mappehenvisning til din skabelon. Det er vigtigt, at den kompakte mappe indeholder .vstemplate-filændringerne med de tags, jeg nævnte før. Glem ikke det.

Dette projekt har en manifest fil, der vil indeholde oplysningerne i installationsvejledningen til filtypenavnet.

Hvis du dobbeltklikker på den fil, vil den være åben som en formular, hvilken du kan udfylde felt for felt.

Skift omhyggeligt al den nødvendige information med kvalitet, fordi den også vises for den endelige bruger på installationen og markedspladsen. Det er også nødvendigt at specificere feltet "Forfatter" korrekt, fordi det normalt har LAPTOP-navnet.

Klik derefter på “Aktiver”:

Fjern de eksisterende aktiver, hvis der er sådanne, og klik i "Ny":

Vælg de indstillinger, jeg har lagt, og angiv i den sti den kompakte mappe, som du har tilføjet til projektet.

Generation

For at oprette installationsfilen er det bare at opbygge projektet i frigørelsestilstand. Det genererer .exe-filen, der bruges til at installere udvidelsen på VS.

Færdig! Vores udvidelse blev oprettet. Du kan teste det nu, før du offentliggør på Visual Studio-markedet, for at se, om alt fungerer fint.

Visual Studio Market Publish

Hvis du vil offentliggøre din udvidelse til offentligheden, kan du gøre det på Visual Studio Marketplace.

For at gøre det skal du gå til marketplace.visualstudio.com og gå efter nedenstående indstillinger, når du er logget ind på din Microsoft-konto:

Upload .exe af din udvidelse:

Udfyld formularen med skabelonen og udvidelsesinfo. Da disse oplysninger er offentlige, skal du være opmærksom i detaljer.

Når processen er færdig, skal du bare gemme og vente på godkendelsesprocessen. Det kan tage et par minutter.

Konklusion

Jeg håber, at denne artikel hjalp dig. Tak, fordi du læser det.

Nedenfor er mine profiler på sociale medier. Du er velkommen til at oprette forbindelse og stille et spørgsmål. I disse profiler deler jeg ofte indhold om webteknologier og it-begivenheder.

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

Jeg oprettede også for nylig en Youtube-kanal for at bidrage til det tekniske samfund ved hjælp af denne platform også, med fokus på .NET Core, Vue JS, Azure og mere. Hvis du er interesseret i disse emner, anbefaler jeg dig at tilmelde dig. Snart frigives indhold regelmæssigt, mens jeg konfigurerer lyd, video og indhold for at give dig en oplevelse af høj kvalitet.

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