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. :)

Visual Studio Extensions: SolutionColor

Non so a voi, ma a me capita molto spesso di lavorare con molte più istanze di Visual Studio aperte contemporaneamente.
Spesso, passando da una finestra all'altra, devo innanzitutto capire in che solution mi trovo e quindi ricercare quello che stavo guardando.
Ho provato anche ad usare il multidesktop, ma il risultato cambia poco.
L'unica soluzione che ho trovato più rapida e che mi fa perdere meno tempo è aggiungere un'estensione per Visual Studio 2015, molto semplice: https://marketplace.visualstudio.com/items?itemName=Wumpf.SolutionColor

Questa piccola estensione non fa altro che aggiungervi nella toolbar due pulsanti: il primo vi permette di selezionare un colore che vi andrà a ricolorare la toolbar della finestra di Visual Studio e il secondo vi azzera questa impostazione.
In questo modo potete andare a colorare le vostre finestre di Visual Studio in base alla solution e quindi ricordarvi a colpo d'occhio di quale progetto si tratta.
Attenzione che il colore lo memorizza in base alla posizione del file .sln e non del nome della solution, quindi se spostate i sorgenti, perdete l'impostazione.

That's all folks!

Visual Studio 2015: ottenere l'errore "Microsoft Web Deploy v3 or higher is recommended" durante la pubblicazione

Ultimamente mi è capitato che dopo aver installato Visual Studio 2017 su una macchina in cui era già presente Visual Studio 2015, la pubblicazione di un sito ASP.NET smettesse di funzionare con il seguente errore:

"Microsoft Web Deploy is not correctly installed on this machine. Microsoft Web Deploy v3 or higher is recommended."

Dopo varie prove sulla mia macchina virtuale, ho visto che è sufficiente reinstallare il componente Web Deploy aggiornato all'ultima versione, direttamente dal sito di Microsoft: https://www.iis.net/downloads/microsoft/web-deploy

Una volta reinstallato non importa riavviare il pc, ma basta chiudere e riaprire Visual Studio 2015 perchè tutto torni a funzionare.

I miei strumenti di lavoro

Ogni sviluppatore che conosco ama la sua macchina e per lui la miglior macchina per sviluppare è solo ed esclusivamente la sua.
Anche io, ovviamente, rientro in quella categoria.
Spesso però mi viene chiesto che strumenti uso per lavorare e come faccio ad essere produttivo (fingo molto bene :)).
Provo a fare una lista qua sotto degli strumenti principali che utilizzo io.
La lista che produrrò sarà fatta sulla base della mia macchina di sviluppo preferita, il mio Macbook Pro.
Ne ho anche un'altra: uno Spectre 360 di HP.

Hardware

Come ho scritto sopra, la mia macchina di sviluppo che preferisco adesso e con cui mi sono trovato meglio in assoluto è il Macbook Pro del 2014.
Tutti sanno che sono un fan boy di Microsoft, ma oggettivamente con questo hardware non ho mai avuto un problema.
Uno dei punti di forza è sicuramente la durata della batteria. Utilizzando solo OSx arriva fino a 7-8 ore (nonostante ormai i quasi 3 anni di attività).
Se uso una macchina virtuale con Windows per sviluppare, la batteria dura comunque 3 ore circa, quindi come un portatile "normale".
Molto bella anche la tastiera. I tasti sono molto robusti e permettono di scrivere molto velocemente grazie alla corsa non troppo lunga ma nemmeno troppo corta da non sentire la pressione del tasto stesso.
Retroilluminazione eccellente che non dà fastidio nemmeno al buio, cioè non sovrasta la luminosità del monitor (cosa che invece non mi piace nello Spectre).

Software

Office 2016 - link

Da quando è uscita la versione per OSx utilizzo praticamente solo questa e devo dire che mi trovo molto bene.
Le prime versioni avevano un po' di bug ma con gli aggiornamenti degli ultimi mesi tutto sembra molto stabile, sopratutto Outlook che era quello che soffriva più di tutti.
PowerPoint addirittura è molto più reattivo rispetto a quello Windows.

Camtasia - link

Spesso mi capita di registrare dei video per lavoro e per le mie attività di MVP. Ho provato diversi software gratuiti e alcuni a pagamento, ma devo dire che Camtasia è lo strumento migliore che abbia usato.
E' abbastanza semplice da usare per chi come me non è un grande appassionato di editing video, ma allo stesso tempo per gli utenti più avanzati permette di fare lavori di alta qualità.
Una delle features che preferisco, tra le tante, è la possibilità di inserire la webcam direttamente nella registrazione quando si registra lo schermo.
Trovate comunque la lista di tutte le features direttamente sulla homepage del prodotto.

Parallels Desktop - link

Strumento che non può mancare a uno sviluppatore Microsoft. Molti preferiscono utilizzare Bootcamp per utilizzare Windows su un Mac, ma io ho provato tutti e due e preferisco Parallels.
Considerato che lo utilizzo sul Mac con 16Gb di ram, ho trovato l'ottimizzazione ideale configurando le macchine Windows con 8Gb di Ram e 128Mb di scheda grafica.
Inoltre, impostazione da non sottovalutare, ho disabilitato l'ottimizzazione in tempo reale del disco virtuale perchè porta via molte risorse, soprattutto rallenta di molto il disco.
Unico difetto che ha questa impostazione è che il disco virtuale occupa più spazio rispetto al normale, almeno che ogni tanto non si avvii una ottimizzazione manuale, ma con 512Gb di disco non ho mai avuto necessità di farlo.

Visual Studio 2015 - link

L'ambiente di sviluppo per eccellenza.
Credo che non ci sia bisogno molte presentazioni per questo prodotto.
L'unico ambiente di sviluppo che riesce ad essere ottimizzato sia per realizzare applicazioni web (come faccio io), sia per sviluppare applicazioni desktop e addirittura applicazioni mobile.
A corredo di Visual Studio 2015 ci sono poi molte estensioni che è possibile installare per aumentare la produttività e semplificare alcune operazioni, ma di questo ne parlerò in un post ad hoc più avanti.
E' uscita da poco la versione 2017 ma è ancora in RC. Ci sono grandi novità per questa nuova versione ma anche di questo ne parlerò in futuro.

Visual Studio Code - link

Come ho avuto già modo di parlarne in altri post sul mio blog, Visual Studio Code ha preso ormai da tempo il posto di Brackets e di Atom tra i miei strumenti di sviluppi preferiti.
Nonostante il nome ricordi molto il suo fratello maggiore Visual Studio 2015, questo editor ha tutto un altro scopo.
Si tratta infatti di un editor di testo avanzato e non di un IDE completo di lavoro.
Aggiungendo comunque un po' di estensioni si riesce a lavorare molto bene perchè ha intellisense, Git integrato e molti debugger che permettono di sviluppare tranquillamente in Php, NodeJS e Python.
Tra tutti gli strumenti che permettono di lavorare su queste tecnologie, sicuramente il migliore.

Internet Explorer e Edge - link

A differenza di tanti sviluppatori web, io per sviluppare sul web utilizzo Internet Explorer e Edge.
Google Chrome ha sicuramente una barra di sviluppo più ricca di strumenti di debug, ma a volte la trovo troppo complessa per eseguire semplici operazioni come la selezione e l'analisi del codice HTML puro e semplice.
Oltre a questo ormai ho preso come abitudine che se un'applicazione viene renderizzata correttamente su Edge al 90% lo fa anche su Chrome, Firefox, Opera e Safari.
Aggiungo infine una perfetta integrazione con Visual Studio durante le operazioni di debug.

Datagrip - link

Sicuramente SQL Server Management Studio è uno strumento perfetto per lavorare con database SQL Server, ma questo prodotto di Datagrip consente di collegarsi e lavorare su molti engine di database con la stessa user experience.
Oltre a questo ci risparmia dall'installare molti tool e di conseguenza tenerli sempre aggiornati per sfruttarli al meglio.
Il prezzo non è basso, ma ne vale veramente la pena.

 

Slide degli eventi di Ottobre [2016]

A ottobre è ricominciata ufficialmente la "stagione degli eventi" e quest'anno ho avuto l'opportunità di parlare a due di questi.

21 Ottobre - EtnaDev - ASP.NET Core e Docker

Secondo anno di fila che vengo chiamato come speaker a questo evento molto importante.
Uno dei pochi in Italia che ha più tracce contemporaneamente e tutte di sviluppo.
Durante la mia sessione ho parlato dei concetti base di ASP.NET Core 1.0 e di come fare il deploy su container Docker.
Qua sotto potete trovare le slide che ho utilizzato per la sessione.

22 Ottobre - 1nn0va -  Works with ASP.NET Core on Linux and Mac

Il giorno seguente sono volato (materialmente :)) a Pordenone per un altro evento.
Durante questa sessione ho parlato di come installare e configurare ASP.NET Core su Linux (Kubuntu 16.04) e sopratutto gli strumenti con cui è possibile lavorarci.
Primo fra tutti Visual Studio Code, che come ho già scritto altre volte, sta diventando il mio strumento di lavoro preferito e sopratutto quello che uso di più durante il giorno.
Qua sotto potete trovare le slide che ho usato per la sessione.

Visual Studio Code: le estensioni più utili

Ultimamente Visual Studio Code sta diventando il mio editor principale di lavoro per quanto riguarda lo sviluppo di applicazioni AngularJS o in generale applicazioni web.
Per ottimizzare i tempi di sviluppo e soprattutto arricchire l'editor di tante funzionalità, ho installato diverse estensioni che questo editor mette a disposizione.
Qua sotto potete trovare una lista di quelle che utilizzo io al momento.

1. HTML Snippet

Adatta per chi scrive tanto codice HTML e cerca velocità nella stesura delle pagine.
Molto semplice da usare in quanto basta scrivere il nome del tag che vogliamo andare ad inserire senza i simboli <> e premere tab.

Link: https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets
Comando: ext install html-snippets

2. HTML CSS Class Completion

Estensione utilissima per avere l'auto completamento delle classi CSS presenti nel vostro progetto web.
In automatico questa estensione fa una scansione dei vostri file CSS presenti nel workspace in modo da potervi proporre i nomi delle classi durante la scrittura del codice.
Per velocizzare il caricamento, utilizza una cache che può anche essere ricaricata a vostro piacimento con un apposito pulsante sulla barra di Visual Studio Code.

Link: https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion 
Comando: ext install html-css-class-completion

3. View in Browser

Una semplice estensione che esegue il browser di default del vostro sistema operativo, lanciando il file che avete selezionato al momento.

Link: https://marketplace.visualstudio.com/items?itemName=qinjia.view-in-browser 
Comando: ext install view-in-browser

4. Debugger for Chrome

Estensione scritta da Microsoft stessa, permette il debug delle vostre applicazione web direttamente da dentro Visual Studio Code.
Permette funzionalità avanzate di debug come breakpoints, watches e ha anche una sua console di output.

Link: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome 
Comando: ext install debugger-for-chrome

[Update 01/11/2016]

Per chi invece di usare Chrome, volesse usare altri browser, ci sono altre estensioni che possono essere installate: Edge, Safari, Firefox

[/Update]

5. ESLint

Per chi usa quotidianamente JavaScript sa che la cosa in cui si perde più tempo è il debug e soprattutto trovare gli errori di sintassi nel proprio codice.
Con questa estensione invece possiamo vedere subito se ci sono errori prima di eseguire il codice.
Con le ultime versioni è stata anche introdotta la possibilità di abilitare un "fix" automatico di alcuni errori sul salvataggio del file.

Link: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint 
Comando: ext install vscode-eslint

6. jQuery Code Snippets

Questa estensione mette a disposizione oltre 130 snippet di codice jQuery.
Per utilizzarla è molto semplice: basta scrivere "jq" e selezionare lo snippet da utilizzare.

Link: https://marketplace.visualstudio.com/items?itemName=donjayamanne.jquerysnippets 
Comando: ext install jquerysnippets

7. Git History

Un client Git è già presente buit-in in Visual Studio Code fin dalle prime versioni. Questa estensione infatti non va a sostituire quello, che funziona molto bene, ma va ad aggiungere alcune funzionalità interessanti come ad esempio la history di un singolo file e una visualizzazione dei branch e della history del proprio progetto.
Per utilizzarlo sono presenti 3 nuovi comandi che si possono utilizzare direttamente dalla barra:

  • View Git History
  • View File History
  • View Line History

Link: https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory 
Comando: ext install githistory

8. C#

Credo che questa estensione non abbia bisogno di presentazioni.
Comunque installandola, viene aggiunto il supporto al linguaggio per eccellenza di Microsoft. Non solo un supporto, ma syntax highlighting, IntelliSense, Go To Defintion e tanto altro.

Link: https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp 
Comando: ext install csharp

9. vscode-icons

Il miglior set di icone per Visual Studio Code. Da qualche versione a questa parte dell'editor, hanno aggiunto un supporto migliorato ai temi e alla personalizzazione anche di questo aspetto non da sottovalutare per velocizzare il riconoscimento dei files.
Questo set è sicuramente il migliore.

Link: https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons 
Comando: ext install vscode-icons

10. beautify

Questa estensione internamente usa il servizio http://jsbeautifier.org/ per ottimizzare e rendere "più belli" i vostri file JavaScript, HTML, CSS e Json.
Può essere lanciato manualmente oppure, cambiando le impostazioni nel file di configurazione, può agire anche al salvataggio dei vostri files.

Link: https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify 
Comando: ext install beautify

[Update 09/11/2016]

11. Document This

Documentare il codice JavaScript è molto importante, sopratutto in progetti grandi e su cui lavorano più persone.
Questa estensione semplifica un po' la vita a noi sviluppatori che, di norma, non abbiamo voglia di fare questa attività (io per primo!).
Per usarla è molto semplice perchè basta usare degli shortcut da tastiera con il cursore all'interno di una funzione e l'estensione aggiunge in testa alla funzione la documentazione un template di navigazione compatibile con JSDoc (che se non conoscete vi consiglio di guardare).

Link: https://marketplace.visualstudio.com/items?itemName=joelday.docthis 
Comando: ext install docthis

[/Update]

[Update 17/11/2016]

12. AutoFileName

Questa estensione vi aggiunge una funzionalità molto utile durante lo sviluppo di pagine HTML.
Vi consente di ottenere la lista dei file presenti in una cartella mentre digitate un percorso relativo rispetto al file in cui vi trovate.
Praticamente non dovete ricordarvi a memoria il nome del file che volete includere. :)

Link: https://marketplace.visualstudio.com/items?itemName=JerryHong.autofilename 
Comando: ext install autofilename

[/Update]

Conclusioni

Questa è solo una prima lista delle estensioni che al momento utilizzo quotidianamente e che cercherò di aggiornare via via che ne scopro altre o che comunque sia reputerò interessanti.

Stay tuned!