Come creare modelli di progetto ed estensione per Visual Studio 2019

Ciao!

Di recente, ho creato due modelli di progetto per Vue JS + Asp.Net Core, entrambi come estensioni di Visual Studio 2019. Sono stati condivisi sul marketplace di Visual Studio, come puoi vedere dal link seguente:

  • Template Vue JS + Asp.Net Core 3.1

Vuoi sapere come creare la tua estensione e pubblicare il tuo modello? Se sì, il resto dell'articolo è una procedura passo-passo su come farlo.

Creazione del progetto

La prima cosa che devi fare è creare un progetto che desideri condividere come modello. In questo articolo, dimostrerò passo per passo utilizzando il progetto Vue JS + Asp.Net Core che ho già pubblicato.

Esportazione del progetto

Una volta creato il progetto, su Visual Studio 2019 vai all'opzione di menu Progetto e scegli l'opzione "Esporta modello":

Esistono due tipi di modelli: modello di progetto e modello di elemento. Come nel nostro caso stiamo creando un modello di progetto, ho selezionato l'opzione sottostante:

Il prossimo passo è configurare il nome, la descrizione, l'icona che verrà mostrata agli utenti e l'anteprima dell'immagine. È davvero importante impostare correttamente queste informazioni, per quanto sia di alta qualità, perché appariranno agli utenti finali che scaricheranno e installeranno il tuo modello / estensione.

E deseleziona l'opzione "Importa automaticamente in Visual Studio". In questo modo, sarai in grado di installare l'estensione che stai creando.

Infine, il processo genererà una cartella compatta che contiene il modello stesso, ma non è la fine della creazione:

Definizione dei tag

Quando creiamo un nuovo progetto su Visual Studio 2019, i modelli vengono visualizzati insieme ad alcuni tag specifici, che ci aiutano a filtrare i modelli:

Dall'ultima versione di Visual Studio 2019, questi tag sono obbligatori per coloro che desiderano pubblicare un'estensione. Senza quelli, l'estensione verrà installata, ma il modello non verrà mai mostrato nell'elenco, anche se l'utente lo cerca.

Per creare questi tag, aprire la cartella compatta che è stata generata con il modello nell'ultimo passaggio e aprire il file .vstemplate utilizzando un editor di testo:

Nella sezione "Dati modello", aggiungere dopo il tag "ProvideDefaultName" il riferimento dell'elenco di tag al modello, ad esempio piattaforma, tipo di progetto, lingua, ecc. Nel mio caso, ho specificato come segue:

L'elenco completo dei tag disponibili è disponibile al seguente link:

Creazione dell'estensione

Con il modello già creato e i tag impostati, ora è il momento di creare il file di installazione per l'estensione.

Per questo, basta creare un progetto del tipo VSIX Project:

Questa è la struttura di base del progetto:

PS: tuttavia ho creato il nome del progetto usando alcuni caratteri speciali come "+", solo a scopo didattico, per favore evita di farlo in scenari reali. È meglio creare senza spazi vuoti o caratteri speciali, come quello: TemplateVueJSAspNetCoreArtigoMedium, invece del nome che ho messo. Eviterà problemi di compilazione, poiché VS genererà automaticamente spazi dei nomi e classi usando quel nome.

Includi nella radice il riferimento della cartella compatta al tuo modello. È importante che la cartella compatta contenga le modifiche al file .vstemplate con i tag che ho menzionato prima. Non dimenticarlo.

Questo progetto ha un file manifest, che conterrà le informazioni sull'estensione e le istruzioni di installazione.

Se fai doppio clic su quel file, sarà aperto come un modulo, che puoi compilare campo per campo.

Cambia con attenzione tutte le informazioni necessarie con qualità, perché appariranno all'utente finale anche nell'installazione e nel mercato. Inoltre, è necessario specificare correttamente il campo "Autore", poiché normalmente ha il nome LAPTOP.

Successivamente, fai clic su "Risorse":

Rimuovere le risorse esistenti, nel caso ce ne siano, e fare clic su "Nuovo":

Scegli le opzioni che ho inserito e nel percorso specifica la cartella compatta che hai aggiunto al progetto.

Generazione

Per creare il file di installazione, sta semplicemente creando il progetto in modalità di rilascio. Genererà il file .exe utilizzato per installare l'estensione su VS.

Fatto! La nostra estensione è stata creata. Puoi provarlo ora, prima di pubblicare sul mercato di Visual Studio, per vedere se tutto funziona bene.

Pubblicazione sul mercato di Visual Studio

Nel caso in cui desideri pubblicare l'estensione al pubblico, puoi farlo su Visual Studio Marketplace.

Per farlo vai su marketplace.visualstudio.com e, dopo aver effettuato l'accesso con il tuo account Microsoft, vai alle opzioni seguenti:

Carica il .exe della tua estensione:

Compila il modulo con il modello e le informazioni sull'estensione. Poiché tali informazioni saranno pubbliche, prestare attenzione in dettaglio.

Una volta terminato il processo, è sufficiente salvare e attendere il processo di approvazione. Potrebbero volerci alcuni minuti.

Conclusione

Spero che questo articolo ti abbia aiutato. Grazie per averlo letto.

Di seguito sono riportati i miei profili sui social media. Sentiti libero di connetterti e porre una domanda. In questi profili, condivido spesso contenuti su tecnologie Web ed eventi IT.

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

Di recente ho anche creato un canale Youtube per contribuire alla comunità tecnica usando questa piattaforma, focalizzato su .NET Core, Vue JS, Azure e altro. Se sei interessato a questi argomenti, ti consiglio di iscriverti. Presto verranno rilasciati regolarmente i contenuti, mentre sto configurando audio, video e contenuti per offrirti un'esperienza di alta qualità.

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