Le migliori estensioni di Visual Studio Code

Nell'ultimo decennio, lo sviluppo software è cresciuto, grazie soprattutto alle nuove tecnologie e all'interesse che le persone hanno verso di esse, basti pensare a Github che nel 2022 ha avuto circa 21 milioni di nuovi sviluppatori.

Gli IDE (Integrated Development Environment) sono strumenti che forniscono un ambiente per la scrittura, la compilazione, il debugging e la gestione dei progetti, andando a semplificare notevolmente il flusso di lavoro di chi sviluppa.

La scelta di un IDE è molto importante: essendo uno strumento di fondamentale utilizzo, in cui trascorrere la maggior parte del tempo, deve essere il più comodo possibile e avere tutte le caratteristiche che servono in termini di praticità ed esigenze di utilizzo.

Tra i più popolari, Visual Studio Code di Microsoft si è diffuso molto negli ultimi anni, soprattutto a causa del suo essere modulare: permette di installare estensioni e plugin che vanno a migliorare l'esperienza d'uso e velocizzare sia lo sviluppo del codice che del test.

Un altro plus di VSCode è il suo essere slegato da un linguaggio di sviluppo in particolare, permettendo a chi lo utilizza di usare sempre lo stesso ambiente, al di là di quale sia il linguaggio di riferimento.

E ancora, ci piace molto perché è un progetto open source, supportato sia da Microsoft che dalla community. “VSCodium”, ad esempio, è un fork open-source di Visual Studio Code, privo di telemetria da parte di Microsoft presente nella versione ufficiale. Questa scelta è particolarmente apprezzata da coloro che preferiscono una soluzione più orientata alla privacy e alla trasparenza, senza compromettere l'esperienza che offre Visual Studio Code.

L'IDE perfetto non esiste, è tutta una questione di preferenza personale; Visual Studio Code viene scelto da molti per la sua interfaccia semplice, l'essere leggero in termini di memoria e la possibilità di estendere le sue funzionalità grazie ad una ricca gamma di estensioni.

Nel nostro team c'è chi utilizza Visual Studio Code, e chi PyCharm. In questo articolo, ci concentreremo su VSCode e ti consiglieremo quelle che secondo noi sono le migliori estensioni di Visual Studio Code, che non possono assolutamente mancare dal tuo ambiente di sviluppo affinché sia più produttivo ed efficace.

Ecco la nostra lista. Buona lettura!

Ricordati di lasciare un commento alla fine dell’articolo, facci sapere che ne pensi e quali altre estensioni consiglieresti. Ti aspettiamo!

Leggi anche: I migliori strumenti per programmare con Python

Inserisce un’icona accanto al nome di alcune cartelle, per renderle piú riconoscibili.
È un’estensione di tipo “cosmetica”: non aggiunge funzionalità nuove, ma si limita ad abbellire quello che già viene mostrato. Ad esempio, accanto a ogni file Python apparirà il logo di Python, mentre accanto a .gitlab, il logo di Gitlab.
Può anche accadere che una cartella abbia nomi più generici come ‘font’: l’estensione pensa a questi casi aggiungendo il colore rosso con una piccola “A” come icona, in modo che sia più riconoscibile.

Oltre a questo, permette di configurare anche diverse preferenze grafiche, come l'opacità delle icone, il tema delle icone da utilizzare (Vue, React…) e il colore delle cartelle.

Grazie alle sue funzionalità, consente di avere un riferimento visivo chiaro e di impatto per tutti i file e le cartelle, una visione complessiva all'interno del progetto e di ricercare i file in maniera più comoda.

E poi, un tocco di colore al nostro IDE ci sta.

Markdown è un linguaggio di markup che viene utilizzato per formattare il testo in modo semplice e leggibile. È diventato lo standard per la scrittura di documentazione, README, e testi in generale. È possibile, infatti, scrivere in Markdown a prescindere dall'editor o dalla piattaforma in questione e questa caratteristica rende i file molto portatili, consentendo loro di essere visualizzati su qualsiasi sistema operativo, avendo la possibilità di poterli modificare con un qualsiasi editor di testo.

Esistono due estensioni che sono molto popolari tra gli utenti: stiamo parlando di Markdown Editor e Markdown All-in-one.

La prima è a tutti gli effetti un editor, mentre la seconda offre un insieme di funzionalità utili da usare con un qualsiasi file Markdown. Benché entrambe offrano delle funzioni esclusive, servono per semplificare e migliorare il processo di scrittura.

Le funzionalità piú interessanti sono:

• Anteprima Istantanea: una delle caratteristiche più utili è la possibilità di visualizzare un'anteprima istantanea del documento Markdown direttamente nell'editor. Questo consente agli utenti di vedere come apparirà il testo mentre lo scrivono (Markdown Editor e Markdown All-in-one);
• "Table of Contents" Automatico: genera automaticamente un sommario del documento. Particolarmente utile per documenti più lunghi, consentendo una navigazione agevole attraverso le sezioni (Markdown Editor e Markdown All-in-one);
• Conversione in HTML: fornisce strumenti di conversione per trasformare il testo da Markdown a HTML, permettendo all'utente di condividere o distribuire la documentazione in un formato piú comodo e standard (Markdown Editor e Markdown All-in-one);
• Supporto a Tabelle: semplifica la creazione di tabelle, permettendo agli utenti di inserire ad esempio colonne nelle tabelle senza complicarsi troppo la vita con sintassi e spazi (Markdown Editor).

Tranne il supporto alle tabelle, le due estensioni si equivalgono e la scelta è puramente una tua preferenza: se preferisci avere un editor e non rinunciare alla gestione più comoda di tabelle, allora Markdown Editor è una scelta più consigliata. Viceversa, se preferisci qualcosa che si integra direttamente a VSCode senza un editor a parte, allora Markdown All-in-one è ciò che fa per te.

Una buona gestione del codice permette di lavorare in maniera più efficiente: Git permette di avere le diverse revisioni, e consente al team di sviluppo di avere il codice sincronizzato con ogni aggiornamento.

Storicamente esistevano sistemi come CVS e Subversion; da quando Git ha preso piede, ha cominciato a maturare sempre di più fino a diventare lo standard per chi scrive e mantiene codice.

GitLens è un'estensione molto popolare per Visual Studio Code che si integra con le maggiori piattaforme che sfruttano Git, ed offre un'insieme di funzionalità che migliorano l'esperienza.

Alcune delle funzionalità principali includono:

• Blame Annotations: mostra i dettagli delle modifiche di ogni riga in un file, l'autore e quando la modifica è stata effettuata, direttamente visualizzando il codice sorgente all'interno di VSCode;
  
• Visualizzazione della storia: permette di visualizzare in dettaglio la storia del repository Git sul quale attualmente si sta lavorando, inclusi commit, branch e merge;
  
• Ricerca commit: consente di eseguire ricerche all'interno del repository, filtrando per autore, data, hash e altro;
  
• Visualizzazione e confronto dei branch: fornisce una visualizzazione grafica per confrontare facilmente i branch.

Questa estensione è considerata indispensabile da molti di noi perché semplifica notevolmente il processo di sviluppo integrandosi completamente a VSCode e permettendo a chi sviluppa di non lasciare l'IDE sul quale sta lavorando in quel momento. Soprattutto nelle fasi di code review o di modifica del codice, indipendentemente da quanto siano invasive, rappresenta uno strumento essenziale.

Se ti piace sviluppare senza rinunciare alla comodità di avere tutto nel tuo ambiente di sviluppo, soprattutto mentre stai testando delle API, allora devi assolutamente provare Thunder Client.

Ecco alcune delle caratteristiche più interessanti:

• semplice da usare: ha una curva di apprendimento molto bassa, quasi inesistente, e l'interfaccia non ha niente da invidiare alle soluzioni standalone piú popolari. Sia che tu abbia già esperienza o che tu stia sviluppando degli endpoint per la prima volta, non avrai troppi problemi ad utilizzare questa estensione;
  
  
• supporta le collection: in caso di test di endpoint multipli, potrai creare dei gruppi di chiamate in modo tale da non dover inserire ogni volta headers e body. Ad esempio, potrai inserire tutte le chiamate relative ad un certo progetto in una collection specifica dedicata a quel progetto;
  
  
• genera gli snippet: questa è una delle feature che ci piace di più perché trasforma quello che hai inserito tramite l'interfaccia dell'estensione, in uno snippet di codice con relative librerie. In questo modo, potrai incollarlo nel sorgente o dove preferisci. Sono presenti circa 20 linguaggi, compresi i principali, e diverse librerie. Se ami utilizzare la riga di comando, hai anche la possibilità di usare cURL da Bash per specificare una richiesta con i relativi parametri direttamente sull'estensione, ed avere un URL già pronto all'uso da copia-incollare sul terminale e fare la richiesta con cURL;
  
  
• tutto in locale: tutte le chiamate vengono fatte dalla tua macchina, e i dati non vengono memorizzati altrove. È una buona feature di sicurezza, perché ad esempio nel caso tu stia sviluppando delle API interne, in cui hai bisogno di inserire dati sensibili, questi verranno salvati in locale.

Con tutte queste funzionalità puoi dimenticarti dei tool intermedi (come Postman o Curl, per fare un esempio) e trasformare il tuo Visual Studio Code in un piccolo laboratorio dove sarà possibile testare gli endpoint per il backend che stai sviluppando.

Non potevamo non citarla: è una specie di bacchetta magica per chi sviluppa i propri fogli di stile su Visual Studio Code. Basterà passare sopra un elemento in un file HTML, tenendo premuto CTRL, ed ecco che sarà subito possibile vedere gli stili CSS associati.

È possibile anche aprire un file CSS particolare se si conosce il nome del selettore da modificare o visualizzare: ad esempio, se l’elemento in questione è chiamato "griglia", basterà premere CTRL+P e scrivere "#griglia" per poi premere invio ed andare direttamente sul file che contiene la regola.

Inoltre, supporta i file SCSS, permettendo quindi un supporto che comprende non solo i classici file CSS.

CSSPeek è un'estensione per Visual Studio Code che consente di esplorare rapidamente i fogli di stile e visualizzare i selettori CSS senza necessariamente andare ad aprire una singola finestra per ogni file. Per noi è comodissima, perché ci consente di modificare il CSS in maniera più rapida e veloce.

È un’estensione fondamentale se sviluppi progetti in Django. Tra le tante funzionalità molto utili che offre, ti permette di fare il syntax highlighting sia di tutti i template HTML, riconoscendo tutti i templatetag di Django, sia dei vari snippet CSS o Javascript all'interno di un template HTML.

Questa estensione ti consente di collegarti tramite SSH a server remoti. Una volta installata viene creato un file "config" che ti permette di aggiungere la configurazione per il remote server.

Un esempio di configurazione:

Host nome_arbitrario
HostName ip_oppure_dominio
User username
Port 22
IdentityFile path_alla_chiave_ssh

Come dice il nome stesso, si tratta di un’estensione utile per la gestione dei progetti, in quanto permette di aggiungere dei tag e poter organizzare i vari progetti su cui stai lavorando per trovare subito quello che cerchi ed avere una situazione chiara, pulita e organizzata.

Questo strumento permette di cambiare le maiuscole del testo selezionato convertendolo in vari formati, dai classici upper, lower, camel ai più particolari snake, kebab, pascal, sentence.

Sono entrambi strumenti molto utili per velocizzare la scrittura del codice. Auto Close Tag è un’estensione che aggiunge automaticamente, mentre si scrive il codice, i tag di chiusura degli elementi HTML/XML. Auto Rename Tag, invece, se stiamo rinominando un tag HTML/XML, aggiorna automaticamente anche il tag accoppiato. Non possono assolutamente mancare al tuo VSCode!

ESLint e Prettier sono due tool utili per migliorare la qualità del codice. La buona notizia è che esistono le relative estensioni per integrarli a Visual Studio Code e sfruttare le loro funzionalità comodamente dal proprio ambiente di sviluppo. Con EsLint puoi analizzare il codice JavaScript scritto per identificare e risolvere una serie di problemi come errori nella sintassi e nella logica del codice o nello stile. Prettier è un’estensione che aiuta la formattazione del codice in vari linguaggi. Sia EsLint che Prettier sono configurabili in base ad una serie di regole concordate dal gruppo che lavora sul codice, in modo da formattare e trovare e/o eliminare tutta una serie di problemi prima che il codice stesso sia committato e mandato nel repository.

***

La nostra carrellata di estensioni per Visual Studio Code è giunta al termine. Sia che tu stia muovendo i primi passi o che tu conosca già a menadito VSCode, speriamo ti sia stata utile per scoprire nuovi spunti su come velocizzare i processi di ideazione, manutenzione e sviluppo del codice, oltre al lavoro sui tuoi progetti.

Adesso però vogliamo sapere che ne pensi: quali sono le tue estensioni preferite? Ci sono altre estensioni che secondo te dovrebbero entrare in questa lista?

Scrivici nei commenti qui sotto, oppure sui social. Ci trovi su X, Facebook, Mastodon e Linkedin.

Alla prossima!

***

Se ti è piaciuto questo articolo:
- Leggi anche: I migliori strumenti per programmare con Python
- Leggi anche: I migliori strumenti per lo sviluppo frontend