Come usare Visual Studio Code
Ti sei da poco avvicinato al mondo della programmazione e, per scrivere i tuoi file, ti è stato suggerito di scaricare Visual Studio Code: un editor gratuito di Microsoft che offre la possibilità di scrivere in numerosi linguaggi. Avendo letto online diverse recensioni positive riguardanti questo software, hai deciso di scaricarlo sul tuo computer e adesso vorresti capire come muovere i tuoi primi passi al suo interno.
Le cose stanno così, dico bene? Allora lascia che sia io a darti una mano e spiegarti come usare Visual Studio Code. Nei prossimi paragrafi di questa guida, infatti, sarà mio compito mostrarti per prima cosa la procedura dettagliata per scaricare e installare questo editor di Microsoft, fornendoti anche le indicazioni necessarie per usarlo in italiano. Successivamente, troverai una panoramica delle principali funzionalità e anche le istruzioni per iniziare a scrivere il tuo primo file.
Come dici? È proprio quello che volevi sapere? Allora non perdiamo altro tempo prezioso ed entriamo nel vivo di questo tutorial. Tutto quello che devi fare è ritagliarti cinque minuti di tempo libero da dedicare alla lettura dei prossimi paragrafi e seguire attentamente le indicazioni che sto per darti. Provando a metterle in pratica, sono sicuro che riuscirai a capire il funzionamento di Visual Studio Code e iniziare a prendere dimestichezza con questo editor. Buona lettura!
Indice
- Come installare Visual Studio Code
- Come usare Visual Studio Code in italiano
- Come usare Visual Studio Code: HTML
- Come usare Visual Studio Code: C++
- Come usare Visual Studio Code: Python
- Come usare Visual Studio Code online
Come installare Visual Studio Code
Prima di spiegarti nel dettaglio come usare Visual Studio Code, qualora non lo avessi ancora fatto, lascia che ti mostri la procedura per scaricare e installare questo software sul tuo computer.
Innanzitutto, devi sapere che Visual Studio Code può essere usato su PC equipaggiati con Windows 10 e versioni successive (es. Windows 11) ed è avviabile su architetture a 64 bit e ARM. Su Mac, invece, è richiesto macOS 11 o versioni successive e funziona sia su Mac con processore Intel che con chip Apple Silicon.
Detto ciò, collegati al sito ufficiale di Visual Studio Code e premi sul pulsante Download for Windows/Download for Mac che visualizzi a schermo in modo da scaricare la versione corretta del software a seconda del sistema operativo installato sul tuo computer.
Completato lo scaricamento, se hai un PC Windows, fai doppio clic sul file .exe appena scaricato, apponi il segno di spunta accanto all’opzione Accetto i termini del contratto di licenza e clicca sul pulsante Avanti per tre volte consecutive. Nella schermata Selezione processi aggiuntivi, abilita le preferenze di tuo interesse e premi sui pulsanti Avanti e Installa.
Attendi, quindi, che la barra d’avanzamento raggiunga il 100% e fai clic sulla voce Fine, per terminare l’installazione e avviare Visual Studio Code.
Se, invece, hai un Mac, apri il pacchetto ZIP appena scaricato e sposta l’app di Visual Studio Code contenuta al suo interno nella cartella Applicazioni di macOS. Accedi, poi, alla cartella in questione, fai clic destro sull’icona di Visual Studio Code e seleziona l’opzione Apri per due volte consecutive, per avviare il software e aggirare le limitazioni imposte da Apple verso le applicazioni provenienti da sviluppatori non certificati (operazione che va eseguita solo al primo avvio).
Come usare Visual Studio Code in italiano
Come avrai modo di constatare al primo avvio di Visual Studio Code, l’interfaccia del software è in lingua inglese e agendo dalle impostazioni di quest’ultimo non è disponibile alcuna opzione che permetta di cambiare la lingua. Tuttavia, se la tua intenzione è quella di usare Visual Studio Code in italiano è sufficiente installare un’estensione ufficiale di Microsoft.
A prescindere dal sistema operativo installato sul tuo computer, accedi alla sezione Extensions di Visual Studio Code premendo sull’icona dei tre quadrati e un rombo visibile nella barra laterale a sinistra e scrivi "italiano" nel campo Search comparso in alto.
A questo punto, seleziona l’estensione Italian Language Pack for Visual Studio Code di Microsoft e fai clic sul relativo pulsante Install. Completata l’installazione dell’estensione, operazione che richiede pochi secondi, premi sulla voce Change language and restart, visibile nel box comparso in basso a destra, in modo riavviare Visual Studio Code.
Così facendo, dovrebbe essere automaticamente impostata la lingua italiana. In caso contrario, digita il comando
Configure Display Language nel campo Search in alto, seleziona questa opzione dal menu apertosi e, poi, scegli la voce Italiano (it).
In ogni caso, visualizzerai la schermata Introduzione dalla quale, oltre a poter sùbito creare un nuovo file, puoi avviare una breve procedura di configurazione selezionando l’opzione Introduzione a VS Code che visualizzi in prossimità della voce Procedure dettagliate.
Così facendo, puoi personalizzare il tema di VS Code premendo sulla voce Scegli il tema e scegliendo quello che preferisci tra i temi mostrati a schermo (es. Moderno scuro, Moderno chiaro, Contrasto elevato scuro ecc.). Puoi anche cliccare sulla voce Visualizza altri temi in modo da visualizzare ulteriori temi.
Durante la procedura di configurazione guidata, selezionando l’opzione Usa gratuitamente funzionalità di intelligenza artificiale con Copilot, puoi anche abilitare l’uso di Copilot, l’assistente di Microsoft basato sull’intelligenza artificiale che puoi usare per generare codice in più file, correggere errori, porre domande sul codice e molto altro ancora.
Infine, puoi anche abilitare l’opzione Guarda le esercitazioni video, che permette di accedere a una serie di video tutorial sull’utilizzo di VS Code. Ovviamente puoi anche evitare di abilitare le opzioni che non sono di tuo interesse.
In ogni caso, completata la configurazione e personalizzazione di VS Code, premi sulla voce Contrassegna come completato Sezione successiva in modo da tornare alla schermata Introduzione. Da qui, cliccando sulla voce Informazioni sulle nozioni fondamentali, anche questa disponibile nella sezione Procedure dettagliate, puoi avviare una breve procedura che ti aiuterà a muovere i primi passi su VS Code.
Per quanto riguarda l’interfaccia di VS Code, questa è composta da due barre principali, una posta in alto e una a sinistra, e un’area centrale. Nella barra in alto trovi un utile motore di ricerca che, come visto in precedenza per la lingua italiana, permette di effettuare numerose operazioni. Inoltre, se attivo, puoi anche richiamare Copilot e avviare una nuova chat cliccando sull’icona della nuvoletta, collocata accanto al motore di ricerca.
Tramite la barra laterale a sinistra, invece, puoi accedere a singole funzionalità e sezioni di Visual Studio Code.
- Esplora file — mostra la struttura delle cartelle e dei file del progetto, consentendoti di aprire, creare, rinominare o eliminare documenti direttamente dall’interfaccia. È la sezione principale da cui gestire i file su cui stai lavorando.
- Cerca — permette di eseguire ricerche testuali all’interno dell’intero progetto, con la possibilità di sostituire termini in più file contemporaneamente. È utile per trovare rapidamente variabili, funzioni o porzioni di codice specifiche.
- Controllo del codice sorgente — consente di gestire il versionamento del codice tramite Git, visualizzare le modifiche apportate ai file, creare commit, gestire branch e sincronizzare il lavoro con repository remoti come GitHub o Azure Repos.
- Esegui con debug — serve per avviare l’esecuzione del codice e analizzarne il comportamento. Da qui puoi impostare punti di interruzione, controllare variabili e verificare passo passo il flusso logico del programma per individuare errori o malfunzionamenti.
- Estensioni — permette di ampliare le funzionalità di VS Code installando plugin dedicati a nuovi linguaggi, strumenti di sviluppo, temi grafici o integrazioni con servizi esterni, personalizzando così l’ambiente di lavoro in base alle tue esigenze.
Inoltre, sempre agendo nella barra laterale a sinistra, puoi cliccare sull’icona dell’omino per richiamare il menu Account, tramite il quale puoi accedere con il tuo account Microsoft o GitHub in modo da sincronizzare automaticamente impostazioni, estensioni e preferenze su più dispositivi ed effettuare altre operazioni.
Premendo, invece, sull’icona della rotella d’ingranaggio, puoi richiamare rapidamente alcuni menu (es. quello per creare un nuovo profilo, funzione particolarmente utile per salvare diverse configurazioni personalizzate dell’editor) e accedere alle impostazioni del software, dalle quali puoi modificare tema, font, scorciatoie da tastiera e altre opzioni relative all’interfaccia e al comportamento dell’editor.
Come usare Visual Studio Code: HTML
Adesso che hai ben chiaro come è strutturata l’interfaccia di Visual Studio Code, vediamo più nel dettaglio come usare il software in questione per scrivere in HTML.
HTML (sigla del termine HyperText Markup Language) è una delle colonne portanti di Internet e di qualsiasi pagina Web. Senza questo linguaggio di markup (dunque non parliamo di un linguaggio di programmazione in senso stretto, in quanto serve solo a definire la struttura dei dati — in questo caso le pagine Web — senza richiedere alcuna operazione logica o algoritmo alla macchina), probabilmente non saresti in grado di leggere guide come questa e non solo.
Per creare un nuovo file, selezione l’opzione Esplora file nella barra laterale a sinistra e, in prossimità della voce Editor aperti (se non la visualizzi, fai clic sull’icona dei tre puntini e seleziona la voce Editor aperti), premi sull’icona del foglio e del +, per creare un nuovo file di testo. In alternativa, puoi anche selezionare le opzioni File > Nuovo file di testo collocate nel menu in alto o utilizzare le scorciatoie da tastiera.
Una volta creato un nuovo file di testo, il primo passaggio da effettuare è quello di salvarlo in modo da indicare sùbito l’estensione del file, che in questo caso è HTML. Premi, quindi, sull’icona del floppy disk posta in prossimità della voce Editor aperti (o fai clic sulle voci File > Salva con nome), scegli dove salvare il file e inseriscine il nome comprensivo di estensione (es. test.html).
Clicca, poi, sul pulsante Salva in modo da salvare il file in locale e consentire a VS Code di capire la tipologia di linguaggio utilizzato. In questo modo, potrai iniziare a scrivere in HTML e il software ti suggerirà automaticamente il singolo tag o la porzione di codice da utilizzare.
Per esempio, per iniziare un nuovo file la prima porzione di codice da inserire è quella che serve a definire la versione del linguaggio e la sintassi da usare. In questo caso, puoi semplicemente scrivere "HTML" nel campo Genera codice e automaticamente visualizzerai un menu con suggeriti singoli tag o porzioni di codice: selezionando l’opzione html:5 puoi inserire tutta la porzione di codice necessario a indicare la versione del linguaggio da usare.
Questa funzionalità è particolarmente utile per generare automaticamente una porzione di codice senza doverlo scrivere manualmente e si applica a numerosi comandi. Per capire meglio il suo utilizzo, ti faccio ulteriori esempi: digitando il comando "ul>li" e selezionando questa opzione dal menu apertosi, puoi inserire automaticamente il codice necessario per creare una lista. Allo stesso modo puoi fare per creare una tabella, inserendo il comando "table>td>tr".
In ogni caso, puoi anche scrivere manualmente tenendo in considerazione che ogni tag, per essere integrato correttamente, dev’essere strutturato in modo tale da indicare il suo inizio e la sua fine. Per esempio, se volessi utilizzare il tag p dedicato alla definizione di un paragrafo, digita il codice presente qui sotto.
<p>Hello World!</p>
Come puoi notare, ogni tag viene aperto e chiuso utilizzando parentesi uncinate presenti sulla tua tastiera, ricordandoti però di includere uno slash (/) all’interno del tag di chiusura.
Esistono tantissimi altri tag importanti utilizzati, ad esempio, per creare titoli (<h1>, <h2>, <h3> ecc.), incorporare i link (<a href="indirizzo-link">frase link</a>) oppure scrivere in corsivo (<i>) e tutti questi condividono le stesse regole strutturali mostrate in precedenza.
Per imparare a scrivere un file HTML, puoi dare un’occhiata alla mia guida su come creare una pagina HTML o quelle più specifiche dedicate a centrare il testo, inserire un’immagine, centrare una tabella e andare a capo.
Inoltre, potrebbe esserti utile seguire qualche corso (ne trovi ben fatti e gratuiti anche su YouTube, come quello di Andrea Ciraolo) e/o leggere qualche libro dedicato all’argomento.
HTML: La guida completa alla programmazione web per principianti Impar...
Imparare a programmare con HTML e CSS
Tieni presente che le modifiche apportate al file non vengono salvate automaticamente e l’icona del pallino bianco che appare accanto al nome del file, indica appunto che ci sono modifiche non salvate. Per procedere al salvataggio, puoi premere sull’icona del floppy disk, selezionare le opzioni File > Salva o utilizzare le scorciatoie da tastiera (ctrl+s su PC Windows e cmd+s su macOS).
Come ti ho accennato nelle righe precedenti di questa guida, accedendo alla sezione Estensioni di VS Code puoi installare gratuitamente alcuni strumenti aggiuntivi. Tra quelle che ti consiglio di provare c’è Prettier, che consente di formattare il testo nel modo corretto e facilitarne la lettura. Questa è utile non solo per programmare in HTML ma anche in CSS e Javascript.
In ogni caso, per installare una nuova estensione, così come ti ho spiegato poc’anzi per impostare la lingua italiana, è sufficiente accedere alla sezione Estensioni, scrivere il nome dello strumento di tuo interesse nel campo Cerca le estensioni nel Marketplace e cliccare sul pulsante Installa relativa a quella di tuo interesse.
Come usare Visual Studio Code: C++
Sviluppato nel 1983, C++ è un linguaggio di programmazione basato sugli oggetti e utilizzato in svariati ambiti del mondo dell’informatica, dallo sviluppo di applicazioni d’uso comune fino ad arrivare a programmi dedicati alla ricerca scientifica e persino i videogiochi.
Seppur Visual Studio Code supporti questo linguaggio e per utilizzarlo è sufficiente creare un nuovo file e salvarlo con estensione .cpp, proprio come ti ho mostrato nelle righe dedicate all’uso di VS Code con HTML, per una migliore esperienza è consigliato installare l’estensione C/C++ di Microsoft.
Anche in questo caso, è sufficiente accedere alla sezione Estensioni cliccando sulla relativa icona nella barra laterale a sinistra, scrivere "C/C++" nel campo Cerca le estensioni nel Marketplace e, nei risultati della ricerca, cliccare sul pulsante Installa relativo all’estensione in questione.
Oltre a ciò, dovrai installare un compilatore, ovvero un programma in grado di interpretare le righe di codice che hai scritto in modo da renderle avviabili sul tuo computer. Un buon compilatore per Windows è sicuramente MinGW, un compilatore g++ che puoi scaricare in modo del tutto gratuito. Come alternativa, compatibile anche per macOS e Linux, puoi prendere in considerazione GCC.
Per approfondire l’argomento e conoscere la procedura dettagliata per scaricare e installare un compilatore, puoi fare riferimento alla mia guida su come scaricare C nella quale trovi tutto spiegato nel dettaglio.
Una volta impostato l’ambiente di sviluppo del tuo nuovo foglio, è bene tenere a mente alcune delle regole principali della scrittura in C++. A differenza di HTML, che come mostrato in precedenza faceva uso dei tag, C++ è un vero e proprio linguaggio di programmazione e la sua sintassi si basa sull’utilizzo di elementi come statement, direttive, operatori, variabili e soprattutto le librerie necessarie a seconda del programma da scrivere.
Parlando in termini pratici, utilizza i tasti della tastiera e cerca di replicare su Visual Studio Code quanto segue, ovvero un piccolo programma in grado di stampare il messaggio Ciao Mondo! come output.
#include
int main(void){
printf("Ciao, mondo!\n);
return 0;
}
A questo punto, salva il tuo progetto cliccando sul menu File, in alto a sinistra, e successivamente sulla voce Salva in esso contenuta. Puoi anche velocizzare l’operazione premendo la combinazione di tasti ctrl+s su PC Windows e cmd+s su macOS.
Fatto ciò, clicca sul pulsante ▶︎, in alto a destra, e seleziona l’opzione C/C++: gcc dal menu apertosi: il file verrà compilato ed eseguito nella sezione Terminale di VS Code che appare automaticamente in basso.
Come accennato nel caso precedente, le applicazioni di C++ non si fermano di certo a questo semplice esempio e in giro esistono tantissime guide scritte, come il mio tutorial su come programmare in C, in grado di insegnarti le basi di questo linguaggio di programmazione.
Prima di buttarti sulla pratica (assicurandoti sempre sulla validità dei contenuti), puoi valutare di seguire qualche corso online come quelli disponibili su Udemy e/o di cercare libri interessanti sull’argomento.
Corso di informatica C e C++. Percorsi modulari per linguaggi di progr...
Fondamenti di programmazione in C++. Algoritmi, strutture dati e ogget...
Come usare Visual Studio Code: Python
Flessibile, facile da imparare e, soprattutto, molto popolare: Python è, attualmente, uno dei linguaggi di programmazione più utilizzati al mondo ed è in grado (un po’ come C++) di soddisfare un’enorme quantità di esigenze.
Ne fanno principalmente uso quei programmatori che lavorano nel campo dell’analisi dei dati e nello sviluppo di algoritmi di machine learning quindi a stretto contatto con le intelligenze artificiali, ma può anche essere utilizzato per la gestione di calcoli matematici, interfacce grafiche per siti Web e addirittura per sviluppare un videogioco.
Per questo non dovresti sorprenderti se ti dico che anche Visual Studio Code supporta questo fantastico linguaggio di programmazione, ma dovrai comunque eseguire qualche passaggio in più per migliorare la tua esperienza. Per prima cosa, assicurati di aver installato Python correttamente seguendo le indicazioni che trovi nella mia guida su come installare Python.
Il passaggio successivo è quello di installare una specifica estensione all’interno di Visual Studio Code: avvia, dunque, il software in questione, accedi alla sezione Estensioni cliccando sulla relativa icona (quella dei quadrati e un rombo) nella barra laterale a sinistra e scrivi "python" nel campo Cerca le estensioni nel Marketplace.
Adesso, seleziona l’estensione Python di Microsoft e clicca sul relativo pulsante Installa, per aggiungerla a VS Code. Allo stesso modo ti consiglio di procedere per installare anche l’estensione Phyton Debugger, complementare a quella principale e che serve specificamente per il debugging, cioè per eseguire il codice passo per passo, ispezionare variabili, impostare breakpoint e analizzare il flusso di esecuzione.
Fatto questo, avrai completato i preparativi per iniziare a scrivere con Python su Visual Studio Code. Tutto quello che devi fare ora è accedere alla sezione Esplora risorse, cliccare sull’icona del foglio e del + per creare un nuovo file di testo (puoi anche agire da File > Nuovo file) e salvarlo con estensione .py: così facendo, VS Code riconoscerà automaticamente che intendi scrivere in Phyton.
Il bello del codice attorno a Python è anche la sua somiglianza con il già discusso C++. Stiamo parlando quindi di un linguaggio di programmazione basato sugli oggetti e che quindi condivide alcune delle sue funzioni e caratteristiche con l’esempio precedente. Tuttavia, Python è un linguaggio ancora più veloce sia da scrivere e da imparare. Per esempio, ricordi il sempreverde Hello World!? Se in C++ bisognava introdurre lo statement dedicato all’output di quella frase, all’interno di Python il tutto viene sintetizzato in una singola riga di codice.
print("Hello World!)
A questo punto, salva le modifiche che hai apportato al file premendo sull’icona del floppy disk presente in Esplora risorse o agendo da File > Salva, fai clic destro all’interno dell’editor di Visual Studio Code e seleziona le opzioni Run Python e Run Phyton File in Terminal. Seguendo queste indicazioni, dovresti aver creato un file che, una volta avviato sul terminale, darà come risultato la scritta Hello World!.
Come anticipato all’inizio del capitolo, la versatilità di Python lo rende particolarmente adatto a svolgere una grande quantità di operazioni e ognuna di esse richiede un livello di conoscenza del linguaggio che varia a seconda della loro complessità. Per questo, ti consiglio (come nei casi precedenti), di esplorare il più possibile ciò che ti offre il Web, a partire dalla mia guida su come programmare in Phyton.
Inoltre, potresti dare un’occhiata alla documentazione ufficiale di Visual Studio Code, dare uno sguardo ai video tutorial sparsi su YouTube, prendere parte a uno dei corsi online presenti su piattaforme come Udemy (gratis o a pagamento) e leggere un bel libro dedicato all’argomento.
Programmare con Python for dummies
Automatizzare le cose noiose con Python. Programmazione pratica per pr...
Come usare Visual Studio Code online
Se ti stai chiedendo se è possibile usare Visual Studio Code online, sarai contento di sapere che la risposta è affermativa seppur con alcune limitazioni.
Microsoft, infatti, mette a disposizione una versione interamente basata sul Web del suo celebre editor di codice, accessibile gratuitamente da qualsiasi browser moderno, senza dover installare nulla sul computer. Si chiama Visual Studio Code for the Web e può essere raggiunto collegandosi al suo sito ufficiale.
L’interfaccia è praticamente identica a quella della versione desktop, per cui, se hai già imparato a usare Visual Studio Code sul tuo computer, ti troverai sùbito a tuo agio. Una volta aperto il sito, puoi iniziare a scrivere o modificare codice, aprire file presenti sul tuo dispositivo oppure lavorare direttamente su repository remoti ospitati su GitHub o Azure Repos. In questo modo, puoi apportare modifiche rapide al codice ovunque ti trovi, anche da un computer sul quale non puoi o non vuoi installare nuovi programmi.
La versione Web di Visual Studio Code funziona sui principali browser, come Chrome, Edge, Firefox e Safari, e può essere utilizzato anche su tablet garantendo così una certa flessibilità in mobilità. Tuttavia, le funzioni disponibili dipendono dal browser in uso: quelli che supportano la File System Access API (come Chrome ed Edge) permettono di aprire intere cartelle e salvare i file direttamente sul disco locale, mentre su altri browser potresti essere limitato alla modifica di singoli file.
Come puoi ben immaginare, trattandosi di una versione che gira completamente nel browser, alcune funzioni della versione desktop non sono disponibili. Per esempio, non è possibile utilizzare il terminale integrato, eseguire o debuggare i programmi e neanche avviare compilazioni locali.
Anche il supporto alle estensioni è parziale: puoi installare solo quelle compatibili con l’ambiente Web, mentre le estensioni più complesse, che richiedono accesso diretto al sistema operativo o a risorse esterne, restano esclusive della versione desktop. Inoltre, alcuni comandi da tastiera potrebbero comportarsi diversamente, poiché certi shortcut sono riservati al browser stesso.
Detto ciò, puoi scrivere codice in tantissimi linguaggi, con evidenziazione della sintassi, completamento automatico e anteprima di file Markdown, esattamente come nella versione installata sul computer. Per HTML, CSS e JavaScript, puoi agire allo stesso modo della versione desktop, mentre per altri linguaggi, come Python, C++ o Java, il supporto è più limitato, ma comunque sufficiente per modifiche rapide o per consultare il codice.
In sintesi, Visual Studio Code per il Web è la soluzione ideale per chi ha bisogno di intervenire velocemente su un progetto, controllare file di codice o fare piccole modifiche senza dover avviare l’app desktop. Non sostituisce completamente la versione installata, ma rappresenta un ottimo strumento per lavorare in qualsiasi momento, anche in mobilità, e da qualunque dispositivo connesso a Internet. Maggiori info qui.
In qualità di affiliati Amazon, riceviamo un guadagno dagli acquisti idonei effettuati tramite i link presenti sul nostro sito.
Autore
Salvatore Aranzulla
Salvatore Aranzulla è il blogger e divulgatore informatico più letto in Italia. Noto per aver scoperto delle vulnerabilità nei siti di Google e Microsoft. Collabora con riviste di informatica e cura la rubrica tecnologica del quotidiano Il Messaggero. È il fondatore di Aranzulla.it, uno dei trenta siti più visitati d'Italia, nel quale risponde con semplicità a migliaia di dubbi di tipo informatico. Ha pubblicato per Mondadori e Mondadori Informatica.
