Visual Studio Code: scrivere un extension pack

Qualche mese fa avevo scritto un articolo, che ho aggiornato nel tempo, con le estensioni più utili per Visual Studio Code.
Dalle ultime versioni di Visual Studio Code è stata aggiunta la possibilità di aggiungere delle estensioni denominate "Template Pack" che in realtà sono delle raccolte di estensioni stesse.
In questo modo non dobbiamo installarle tutte una ad una, ma è possibile farlo con un passaggio unico.

Vediamo come fare per creare un Template Pack personalizzato.

Installare Yeoman

Per chi non sapesse cosa sia, Yeoman, in breve, è un generatore di codice da riga di comando che vi permette di creare nuovi progetti a partire da dei template.
Se non lo avete ancora installato sulla vostra macchina, dovete installarlo e installare anche il template per creare progetti per Visual Studio Code.
L'installazione è molto semplice.
Dovete aprire una finestra del command prompt, o una finestra di PowerShell o un terminale di vostro piacemento (anche su Mac e Linux) e inserire il seguente comando:

npm install --global yo

Per controllare che sia tutto a posto una volta che ha finito l'installazione, potete utilizzare il seguente comando:

yo --version

Installare in generatore di Code

Una volta installato Yeoman, bisogna installare il template per Visual Studio Code.
Per farlo, basta lanciare il seguente comando:

npm install -g yo generator-code

Creare l'Extension Pack

A questo punto, non dobbiamo altro che lanciare Yeoman con il rispettivo generatore per Visual Studio Code:

yo code

Nel vari template che si presenteranno, selezionate l'ultimo: New Extension Pack.

Adesso Yeoman vi farà alcune domande, tra cui se volete già aggiungere al vostro template, le estensioni correntemente installate nel vostro Visual Studio Code, il nome della vostra estensione e il vostro publisher name (cioè quello che gli altri utenti vedranno sul marketplate).
Fatto questo, potete lanciare il seguente comando per aprire il vostro progetto direttamente in Visual Studio Code:

cd <nome della vostra estensione>
code .

Personalizzare la vostra estensione

Una volta aperto Visual Studio Code, potete aprire il file package.json e iniziare a inserire i pacchetti che volete includere nella vostra estensioni.
C'è un tag apposito dove inserire i nomi, ricordandosi di inserirli nel formato "publisherid.extensionname".
Nell'esempio di codice, trovate alcuni dei pacchetti che ho inserito nella mia estensione:

    "extensionDependencies": [ 
        "abusaidm.html-snippets",
        "Zignd.html-css-class-completion",
        "qinjia.view-in-browser",
        "msjsdiag.debugger-for-chrome",
        "dbaeumer.vscode-eslint",
        "donjayamanne.jquerysnippets",
        "donjayamanne.githistory",
        "HookyQR.beautify",
        "joelday.docthis",
        "JerryHong.autofilename",
        "eamodio.gitlens"
    ]

Pubblicare l'estensione sul Marketplace

Una volta creata la vostra estensione, potete decidere di pubblicarla sul marketplace di Visual Studio oppure di testarla in locale.
Nella seconda ipotesi basta copiare i files che avete creato con Yeoman dentro la cartella %USERPROFILE%\.vscode\extensions e riavviare Visual Studio Code.
Per Linux e per Mac, la cartella dove inserire l'estensione è la seguente: ~/.vscode/extensions.

Se invece volete pubblicare la vostra estensione sul Marketplace, la procedura è un po' più lunga.

Per prima cosa dovete installare l'utility da riga di comando che si chiama vsce:

npm install -g vsce

Finita l'installazione dovete andare nel vostro tenant di Visual Studio Team Services al link: vostrotenant.visualstudio.com.
Una volta effettuato il login dovete cliccare sul vostro avatar e dopo sul link "Security".

A questo punto dovete cliccare sul pulsante "Add" sopra la griglia con la lista dei vostri "Personal Access Token" e crearne uno nuovo.

N.B. un vincolo molto importante per il corretto funzionamento è quello di selezionare in "Accounts" la voce "All Accessible Accounts".

Salvatevi il vostro token perchè servirà successivamente e soprattutto non potete più recuperarlo dalla griglia con la lista.
Adesso dovete creare il vostro publisher name con il seguente comando:

vsce create-publisher publisher_name

In questa fase il tool vi chiederà di inserire il Personal Access Token che avete creato in precedenza.
Adesso dovete aprire il file "package.json" e inserire alla voce "publishername" del json, quello che avete inserito in questa fase.
Effettuate il login con il comando:

vsce login publisher_name

Se avevate già creato il publisher name in precedenza e non avevate ancora effettuato il login nella stessa sessione, vi verrà chiesto di nuovo il Personal Access Token.

Adesso non vi rimane che spostarvi nella cartella del vostro progetto e lanciare i comandi di pubblicazione del vostro pacchetto.
I comandi per farlo sono:

vsce publish minor
vsce publish major
vsce publish patch

Facendo in questo modo, il vostro file "package.json" viene aggiornato automaticamente con il numero di versione corretto, quindi non dovete farlo a mano.

Per controllare che sia tutto andato a buon fine, potete andare a link della vostra estensione, che avrà il seguente formato: https://marketplace.visualstudio.com/items?itemName=publishername.nomepacchetto

Add comment

Loading