Hvordan lage prosjektmaler og utvidelse for Visual Studio 2019

Hei!

Nylig opprettet jeg to prosjektmaler for Vue JS + Asp.Net Core, begge som Visual Studio 2019-utvidelser. De ble delt på Visual Studio markedet, som du kan se på lenken nedenfor:

  • Mal Vue JS + Asp.Net Core 3.1

Vil du vite hvordan du lager din egen utvidelse og publiserer din egen mal? Hvis ja, er resten av artikkelen en trinnvis prosess for hvordan du gjør det.

Prosjektopprettelse

Det første du må gjøre er å lage et prosjekt som du vil dele som mal. I denne artikkelen skal jeg demonstrere trinn for trinn ved å bruke Vue JS + Asp.Net Core-prosjektet jeg allerede har publisert.

Prosjekteksport

Når prosjektet er opprettet, gå til Visual Studio 2019 til Project-menyalternativet og velg alternativet "Export Template":

Det er to typer maler: Prosjektmal og Elementmal. Som i vårt tilfelle lager vi en prosjektmal, valgte jeg det underliggende alternativet:

Neste trinn er å konfigurere navn, beskrivelse, ikon som vises for brukere og forhåndsvisning av bilde. Det er veldig viktig å stille inn denne informasjonen riktig, så mye som mulig av høy kvalitet, fordi den vil vises for sluttbrukere som vil laste ned og installere malen / utvidelsen.

Og fjern merket for alternativet "Importer automatisk til Visual Studio". På den måten vil du kunne installere utvidelsen du oppretter.

Til slutt vil prosessen generere en kompakt mappe som inneholder selve malen, men det er ikke slutten av opprettelsen:

Definisjon av koder

Når vi lager et nytt prosjekt på Visual Studio 2019, vises malene sammen med noen spesifikke koder, som hjelper oss å filtrere malene:

Siden den siste versjonen av Visual Studio 2019, er disse taggene obligatoriske for de som ønsker å publisere en utvidelse. Uten disse vil utvidelsen bli installert, men malen vises aldri i listen, selv om brukeren søker etter det.

Hvis du vil lage disse taggene, åpner du den kompakte mappen som ble generert med malen i det siste trinnet og åpner .vstemplate-filen ved hjelp av en teksteditor:

I seksjonen “Maldata” legger du til etter taggen “ProvideDefaultName” tagglistehenvisningen til malen din, for eksempel plattform, prosjekttype, språk osv. I mitt tilfelle spesifiserte jeg som følger:

Den fullstendige tilgjengelige taglisten finner du på lenken nedenfor:

Opprettelse av utvidelsen

Med malen allerede opprettet og taggene satt, er det nå på tide å lage installasjonsfilen for utvidelsen.

For det er det bare å lage et prosjekt av typen VSIX Project:

Dette er den grunnleggende strukturen i prosjektet:

PS: men jeg opprettet prosjektnavnet ved å bruke spesielle tegn som "+", bare for undervisningsformål. Unngå å gjøre det i virkelige scenarier. Det er bedre å lage uten tomme mellomrom eller spesialtegn, sånn: MalVueJSAspNetCoreArtigoMedium, i stedet for navnet jeg satte. Det vil forhindre byggeproblemer, på grunn av at VS automatisk genererer navnefelt og klasser ved å bruke dette navnet.

Inkluder i roten den kompakte mappereferansen til malen din. Det er viktig at den kompakte mappen inneholder .vstemplate-filendringene med kodene jeg nevnte før. Ikke glem det.

Dette prosjektet har en manifest fil, som vil inneholde informasjonen i installasjonsinstruksjonene for utvidelsen.

Hvis du dobbeltklikker på den filen, vil den være åpen som et skjema, hvilken du kan fylle ut felt for felt.

Endre nøye all nødvendig info med kvalitet, fordi den også vil vises for den endelige brukeren på installasjonen og markedet. Det er også nødvendig å spesifisere feltet "Forfatter" på riktig måte, fordi det normalt har LAPTOP-navnet.

Etter det, klikk på “Assets”:

Fjern de eksisterende eiendelene, i tilfelle det er noen, og klikk "Ny":

Velg alternativene jeg la, og spesifiser den kompakte mappen du har lagt til i banen, i banen.

Generasjon

For å lage installasjonsfilen er det bare å bygge prosjektet i utgivelsesmodus. Den vil generere .exe-filen som brukes til å installere utvidelsen på VS.

Ferdig! Utvidelsen vår ble opprettet. Du kan teste den nå, før du publiserer på Visual Studio-markedet, for å se om alt fungerer bra.

Visual Studio Market Publiser

Hvis du vil publisere utvidelsen din for publikum, kan du gjøre det på Visual Studio Marketplace.

For å gjøre det, gå til marketplace.visualstudio.com, og etter å ha logget inn med Microsoft-kontoen din, går du til alternativene nedenfor:

Last opp .exe av utvidelsen:

Fyll ut skjemaet med malen og utvidelsesinfo. Siden informasjonen er offentlig, må du være oppmerksom på detaljene.

Når prosessen er ferdig, er det bare å lagre og vente på godkjenningsprosessen. Det kan ta noen minutter.

Konklusjon

Jeg håper denne artikkelen hjalp deg. Takk for at du leser den.

Nedenfor er mine sosiale medieprofiler. Ta gjerne kontakt og still et spørsmål. I disse profilene deler jeg ofte innhold om webteknologier og IT-arrangementer.

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

Jeg opprettet nylig en Youtube-kanal for å bidra til at det tekniske samfunnet bruker denne plattformen også, med fokus på .NET Core, Vue JS, Azure og mer. Hvis du er interessert i disse fagene, anbefaler jeg deg å abonnere. Snart blir utgitt innhold regelmessig, mens jeg setter opp lyd, video og innhold for å gi deg en opplevelse av høy kvalitet.

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