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

Utilizzare Visual Studio Code per collegarsi a SQL Server

Qualche post fa avevo fatto una lista delle estensioni per Visual Studio Code che utilizzo e che ritengo utili.
Una delle ultime che ho provato e ritengo comodissima è l'estensione per collegarsi ed eseguire query su SQL Server: https://aka.ms/mssql-marketplace

Questa estensione, ancora in preview, permette di connettersi a SQL Server, Azure SQL Server e SQL Data Warehouse.
Oltre a questo ha un intellisense che funziona molto bene e sopratutto permette di visualizzare i risultati delle query in una griglia, direttamente dentro Visual Studio Code.

Per installare l'estensione è molto semplice, come sempre.
Potete andare direttamente nel pannello delle estensioni di Visual Studio Code, cercare "mssql" e installare il primo risultato fra quelli proposti.
Se invece siete amanti dei comandi, potete premere Ctrl + Shift + P e immettere il comando: "ext install mssql".

La prima connessione

A questo punto non ci resta che effettuare la prima connessione a un database.
Per farlo è sufficiente premere Ctrl + Shift + P e scrivere "sql".
Vi compariranno in un menu a tendina tutti i comandi disponibili per il nuovo plugin appena installato.
Selezionado "MS SQL: Connect" partirà un wizard che vi guiderà alla connessione del database.
Se la connessione avrà esito positivo, nella barra in basso a destra potete vedere a che database siete connessi e con che utenza.

Eseguire la prima query

Una volta che vi sarete connessi, potete eseguire le query come in un normalissimo SQL Management Studio.
Se create, per esempio, un file denominato "query.sql" e ci inserite una query del tipo:

SELECT * FROM dbo.Product
WHERE dbo.Product.ShowOnHomePage = 1
GO

Potete eseguirla sul vostro database, semplicemente utilizzando la sequenza di tasti Ctrl + Shift + E.

Immediatamente i vostri risultati saranno visualizzati all'interno della stessa schermata di Visual Studio Code, sotto la vostra query.

Se invece i risultati vi venissero visualizzati di lato, potete cambiarne la posizione, selezionando dal menu "View", il comando "Toggle Editor Group Layout".

Operazioni sulla griglia dei risultati

Oltre ad avere informazioni utilissime come il numero de righe interessate dalla vostra query e soprattutto il tempo di esecuzione, Visual Studio Code vi mette a disposizione alcune funzionalità sulla griglia molto interessanti.
Ad esempio se cliccate con il tasto destro sulla griglia e seleziona "Select all" e successivamente "Save as JSON" vi vengono esportate le righe a video in un file JSON che potete utilizzare come volete.
Stessa cosa con un file CSV.
Un'altra funzione molto utile nel menu contestuale nella griglia è la possibilità di copiare le righe nella clipboard, con anche le intestazioni.
Questo vi permette per esempio di incollare i risultati in un file Excel in modo semplice e veloce.

 

Ovviamente tutto quello che ho scritto sopra, è disponibile sia per Mac e Linux.
Direi che non è poco. :)