Com crear plantilles i extensions de projecte per a Visual Studio 2019

Hola!

Recentment, vaig crear dues plantilles de projecte per a Vue JS + Asp.Net Core, totes dues amb extensions de Visual Studio 2019. Es van compartir al mercat de Visual Studio, com podeu veure a l’enllaç següent:

  • Plantilla Vue JS + Asp.Net Core 3.1

Voleu saber crear la vostra pròpia extensió i publicar la vostra pròpia plantilla? En cas afirmatiu, la resta de l’article és un procés pas a pas sobre com fer-ho.

Creació de projectes

El primer que heu de fer és crear un projecte que vulgueu compartir com a plantilla. En aquest article, demostraré pas a pas utilitzant el projecte Vue JS + Asp.Net Core que ja he publicat.

Exportació de projectes

Un cop creat el projecte, a Visual Studio 2019 aneu a l’opció del menú Projecte i trieu l’opció “Exportar plantilla”:

Hi ha dos tipus de plantilles: Plantilla de projecte i Plantilla d’element. Com en el nostre cas, creem una plantilla de projecte, he seleccionat l’opció subjacent:

El següent pas és configurar el nom, la descripció, la icona que es mostrarà als usuaris i la vista prèvia de la imatge. És realment important definir aquesta informació adequadament, de la màxima qualitat que pugueu, perquè apareixerà als usuaris finals que descarregueran i instal·laran la vostra plantilla / extensió.

I desmarqueu l'opció "Importa automàticament a Visual Studio". D’aquesta manera, podreu instal·lar l’extensió que creeu.

Finalment, el procés generarà una carpeta compacta que conté la mateixa plantilla, però no és el final de la creació:

Definició d’etiquetes

Quan creem un nou projecte a Visual Studio 2019, les plantilles apareixen juntament amb algunes etiquetes específiques, que ens ajuden a filtrar les plantilles:

Des de l’última versió de Visual Studio 2019, aquestes etiquetes són obligatòries per a aquells que vulguin publicar una extensió. Sense aquests, l’extensió s’instal·larà, però la plantilla no es mostrarà mai a la llista, fins i tot si l’usuari el cerca.

Per crear aquestes etiquetes, obriu la carpeta compacta que es va generar amb la plantilla al darrer pas i obriu el fitxer .vstemplate mitjançant un editor de text:

A la secció "Dades de plantilla", afegiu després de l'etiqueta "ProvideDefaultName" la referència de la llista d'etiquetes a la vostra plantilla, com ara plataforma, tipus de projecte, idioma, etc. En el meu cas, he especificat el següent:

La llista completa d’etiquetes disponible es troba a l’enllaç següent:

Creació de l’extensió

Amb la plantilla ja creada i les etiquetes establertes, ara és hora de crear el fitxer d'instal·lació per a l'extensió.

Per això, només heu de crear un projecte del projecte VSIX tipus:

Aquesta és l'estructura bàsica del projecte:

PS: Tanmateix, he creat el nom del projecte amb determinats caràcters especials com a "+", només per a propòsits d'ensenyament, eviti fer-ho en escenaris reals. És millor crear sense espais buits ni caràcters especials, com ara: TemplateVueJSAspNetCoreArtigoMedium, en lloc del nom que he posat. Evitarà problemes de creació, ja que a causa del VS es generaran espais i noms de forma automàtica amb aquest nom.

Incloure a l’arrel la referència de carpeta compacta a la plantilla. És important que la carpeta compacta contingui els canvis de fitxer .vstemplate amb les etiquetes que he esmentat abans. No ho oblidis.

Aquest projecte compta amb un fitxer manifest, que contindrà la informació de l’extensió i les instruccions d’instal·lació.

Si feu doble clic en aquest fitxer, s’obrirà com un formulari, que podreu emplenar camp per camp.

Canvieu acuradament tota la informació necessària amb qualitat, perquè també apareixerà a l’usuari final a la instal·lació i al mercat. A més, cal especificar correctament el camp “Autor”, ja que normalment té el nom LAPTOP.

Després d'això, feu clic a "Actius":

Elimineu els recursos existents, si n'hi ha, i feu clic a "Nou":

Trieu les opcions que poso i especifiqueu a la ruta la carpeta compacta que heu afegit al projecte.

Generació

Per crear el fitxer d’instal·lació, només cal crear el projecte en mode de llançament. Es generarà el fitxer .exe que s’utilitza per instal·lar l’extensió a VS.

Fet! La nostra extensió es va crear. Podeu provar-ho ara abans de publicar-lo al mercat de Visual Studio per veure si tot funciona bé.

Visual Studio Market Publicar

En cas que vulgueu publicar l'extensió al públic, podeu fer-ho a Visual Studio Marketplace.

Per fer-ho, aneu a marketplace.visualstudio.com i, després d’iniciar la sessió amb el vostre compte de Microsoft, aneu a les opcions següents:

Pengeu el .exe de l'extensió:

Ompliu el formulari amb la informació de plantilla i extensió. Com que aquesta informació serà pública, presteu atenció al detall.

Un cop finalitzat el procés, només cal guardar i esperar al procés d’aprovació. Això pot trigar uns minuts.

Conclusió

Espero que aquest article us hagi ajudat. Gràcies per llegir-lo.

A continuació, es mostren els meus perfils en xarxes socials No dubteu en connectar-vos i fer una pregunta. En aquests perfils, comparteixo freqüentment contingut sobre tecnologies web i esdeveniments informàtics.

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

També he creat recentment un canal de Youtube per contribuir a la comunitat tècnica mitjançant aquesta plataforma, centrada també en .NET Core, Vue JS, Azure i molt més. Si esteu interessats en aquests temes, us recomano que us subscriviu. Properament es publicarà contingut regularment, mentre estic configurant àudio, vídeo i contingut per oferir-vos una experiència d'alta qualitat.

Enllaç: https://www.youtube.com/channel/UC-KFGgYiot1eA8QFqIgLmqA