Visual Studio Code e le estensioni

Uno dei punti forti di Visual Studio Code è sicuramente il grande supporto della comunità. Essendo un prodotto open source e ben documentato risulta di conseguenza anche facilmente estensibile.

Tale caratteristica si è tradotta in un numero enorme di estensioni disponibili per questo software, sviluppate dalla comunità ma anche da aziende che hanno reso disponibili estensioni per i linguaggi di punta del loro business (ad esempio il Java Server Language di Red Hat, da Eclipse, o il supporto ad Angular di Google).

Visual Studio Code suggerisce le estensioni

Normalmente il software consiglia le estensioni che più si adattano ad un progetto o a un sistema.

Già solo avviandolo dovreste aver notato ad esempio un pop-up posizionato in basso a destra che consiglia di installare il language pack specifico per la vostra lingua:

Se avete aperto un file con estensione specifica, supponiamo .java, avrete già notato anche un altro pop-up, in basso a destra, che invita ad installare le estensioni consigliate per quel linguaggio:

Nonostante il sistema si riveli abbastanza preciso, è comunque meglio controllare le estensioni consigliate attraverso il pulsante posto accanto ad "Installa", ovvero "Show Recommendations".

Installare le estensioni dalla sidebar

Il modo più semplice di installare le estensioni è sicuramente la procedura che può essere effettuata dalla sidebar.

In questo caso abbiamo accesso ad una comoda barra per le ricerche, appena inizieremo a scrivere il pannello mostrerà in automatico i risultati inerenti la query formulata.

In basso possiamo notare le estensioni consigliate da Visual Studio Code. Queste, rispetto a quanto detto prima, non mostrano risultati in base ai file aperti ma ad una serie di altri fattori, come i software installati, il sistema operativo corrente ed il workspace.

Dettagli di un'estensione

Una volta trovato il risultato desiderato possiamo procedere con l'installazione.

Si può interagire in vari modi con le estensioni del pannello, il pulsante in basso a destra le installa immediatamente (punto 1 dello screenshot). Se viene presentata una freccetta verso il basso sono presenti più versioni installabili (punti 2 e 3) e possiamo scegliere quale.

Ma se si clicca sull'estensione stessa, e non sul pulsante, possiamo vedere la pagina contenente la descrizione dell'estensione.

Moltissime estensioni descritte nella pagine dei dettagli presentano una Gif animata che ne mostra il funzionamento.

Autore verificato

Potete notare che alcuni autori hanno accanto un simboletto con una spunta. Sono autori verificati.

Questo elemento però non deve intaccare il vostro giudizio, le estensioni mostrate su Visual Studio Code son normalmente controllate dalla community. Gli autori verificati offrono in ogni caso una maggiore garanzia dal punto di vista della manutenzione.

Installare le estensioni da un sito Web

In alcuni casi potrebbe accadere che qualcuno vi voglia fornire un'estensione specifica o che sul Web venga raccomandata una particolare estensione. In quel caso basterà farvi inviare il link al titolo del martekplace.

L'indirizzo ufficiale inizia sempre con https://marketplace.visualstudio.com. Quando trovate un'estensione avrete la pagina del dettaglio con tanto di pulsante "Installa".

Installare le estensioni tramite console

Le estensioni si possono installare anche da console, per far questo serve però avere l'id o il nome intero dell'estensione. Non esiste un vero e proprio package manager che cerca le risorse desiderate anche su Internet.

Una volta trovato nome o id procediamo ad installare scrivendo:

code --install-extension nomeoid

Ad esempio, per installare la powermode abbiamo la seguente istruzione:

code --install-extension hoovercj.vscode-power-mode

La lista delle estensioni installate

Possiamo prelevare la lista delle estensioni installate digitando da console:

code --list-extensions

La lista delle estensioni è molto importante se si vuole preparare un backup!

Backup delle estensioni

Salvate la lista di estensioni su un file, fatto questo basterà creare uno script da command line per installarle una per volta.

Se avete una console bash o zsh (linux e MacOS) potrete scrivere:

for i in $(cat fileconestensioni); do
code --install-extension "$i"
done

Altrimenti da CMD line di Windows:

for /F "tokens=*" %A in (fileconestensioni) do code --install-extension %A

Dove vengono installate le estensioni?

Le estensioni vengono installate in una cartella all'interno della vostra home. Se questo termine non vi è familiare, la home è la directory che porta il nome del vostro utente.

Supponendo il nome utente "Pippo" avremo:

• su Windows la cartella C:\Users\Pippo;
• su MacOs la cartella /Users/Pippo;
• su Linux la cartella /home/pippo.

Dunque troverete le estensioni nella cartella .vscode/extensions a partire dalla home.

Installare un'estensione manualmente

Un altro modo di installare un'estensione è quello di spacchettarla manualmente all'interno della cartella delle estensioni.

Questo metodo normalmente non è consigliabile, qualora troviate un pacchetto su Internet che promette di essere un'estensione per Visual Studio Code potrebbe comunque contenere del codice malevolo.

Le estensioni ufficiali del software sono quelle che potete tranquillamente installare tramite il pannello o i metodi di cui sopra.

Esistono naturalmente delle eccezioni, ad esempio qualora troviate un'estensione di qualcuno di cui vi fidate o che avete sviluppato voi stessi.

I temi sono estensioni

Sia i temi che personalizzano i colori di Visual Studio Code che quelli delle icone sono estensioni e normalmente son presenti nello store.

Installare un tema esterno

Così come potete installare manualmente un'estensione inserendola nella cartella apposita (che ricordiamo essere posizionata sotto la home, situata nel percorso .vscode\extensions) potete fare lo stesso con i temi.

Per quanto la mia raccomandazione sia la stessa precedente, ovvero di non fidarsi troppo di pacchetti trovati in giro per il Web, sui temi si può spesso chiudere un occhio.

Esistono infatti dei generatori di temi online come themer.dev.

Themer.dev

Themer.dev permette di creare un tema per varie piattaforme in maniera semplice e intuitiva. Accedete al sito, impostate il full screen (tasto F11 da Chrome) e iniziate a giocare con le impostazioni per rendere il vostro ambiente più gradevole.

Ricordatevi di premere su "Build your own" prima di iniziare:

Quando avete finito di personalizzare il tutto ricordatevi di spuntare "Visual Studio Code" dalla lista degli IDE e di cambiare il prezzo in 0$:

Dopo il download vi ritroverete con uno archivio zip. Scompattatelo ed entrate nella cartella VS Code. Li troverete la cartella da copiare in .vscode/extensions

Dovreste vedere il tema nella lista (menù "File>Preferenze>Tema Colori) dopo un riavvio dell'editor.

Disabilitare un'estensione

Se per un determinato periodo non avete più la necessità di utilizzare una determinata estensione, potreste pensare di disabilitarla.

Premete quindi il simbolo della rotellina nel pannello delle estensioni, vicino al nome dell'estensione che volete disabilitare:

Da qui premete il tasto "Disable" (o "Disabilita").

In questo modo potrete risparmiare risorse hardware se una determinata funzione non vi è utile, mantenendo comunque l'estensione e le relative impostazioni installate.

Riabilitare un'estensione

Per riabilitare un'estensione potete premere nuovamente la rotellina nel pannello delle estensioni. Questa volta sarà possibile cliccare su "Enable" (o "Abilita")

Disabilitare un'estensione da command line

Si può disabilitare un'estensione anche da linea di comando. Per farlo bisogna digitare:

code --disable-extension NOME

Tuttavia rispetto alla disabilizazione lato GUI, questo metodo funzionerà solo per la sessione corrente. Aprendo un'altra istanza di Visual Studio Code ritroveremo l'estensione riabilitata.

Inoltre un'estensione disabilitata lato terminale non può essere riabilitata.

Si possono disabilitare temporaneamente anche tutte le estensioni, il comando da digitare è in questo caso:

code --disable-extensions

Disabilitare estensioni per l'area di lavoro

Se una determinata estensione non è utile solo per un particolare progetto, potete pensare di disabilitarla nel contesto del workspace ad esso associato.

Ogni altro workspace vecchio o nuovo continuerà ad avere quell'estensione attiva e funzionante come prima.

Potete poi riabilitare l'estensione anche localmente, una volta disabilitata.

Disinstallare un'estensione

Se proprio un'estensione non fa esattamente quello che volete o non vi serve più, potete disabilitarla.

Sempre dal menù che si apre dalla rotellina potete premere il pulsante "Uninstall" (o "Disinstalla"):

Disinstallazione tramite command line

Potete disabilitare un'estensione dal terminale. Basta digitare:

code --uninstall-extension 'nomeestensione'

Ricarica necessaria

Alcune operazioni sulle estensioni (come installazione, disinstallazione e disabilitazione) possono richiedere un riavvio dell'ambiente di sviluppo.

Visual Studio Code vi notificherà questa necessità tramite la notifica "Reload Request" o "Ricarica Necessaria".

Basta cliccare su di essa per riavviare l'ambiente automaticamente.