L’interfaccia di VS Code raccoglie strumenti con responsabilità diverse. Prima di usare un’area, conviene sapere che cosa mostra e quale programma produce le informazioni. Il testo nell’editor è il sorgente; un messaggio nel terminale può essere il risultato di un processo; una sottolineatura può provenire da un servizio che analizza il linguaggio.
In questa pagina riconosciamo le aree. Nella pagina 1.5 torneremo sui pannelli operativi con comandi e casi concreti. Non serve memorizzare tutte le icone subito: l’immagine generale e l’indice permettono di ritrovare l’area pertinente.
Schermata iniziale
La schermata iniziale può proporre creazione o apertura di file, cartelle recenti, introduzioni e personalizzazioni. Il suo contenuto varia secondo versione, profilo e stato dell’applicazione. Una finestra senza cartella aperta non è un errore: l’editor è semplicemente in attesa di un contesto di lavoro.
Per iniziare un progetto si apre una cartella, non si scrive necessariamente nella pagina iniziale. Il comando File → Open Folder / Apri cartella prepara l’Esplora file e il contesto delle ricerche. Un file singolo può essere aperto direttamente, ma non dà sempre gli stessi strumenti dell’intero progetto.
Account, sincronizzazione e assistenza AI possono avere punti di accesso visibili. Non sono indispensabili per le operazioni fondamentali mostrate qui. È utile distinguere una proposta introduttiva da un requisito della toolchain: scegliere un tema non installa Python, e accedere a un account non configura il compilatore C++.
Immagine generale delle aree
Schermata Microsoft, documentazione VS Code. Fonte · CC BY 3.0 US. Riprodotta senza modifiche; versione e lingua possono differire dalla tua installazione.
La schermata contiene un progetto reale e due editor affiancati. Il codice mostrato non deve essere copiato per seguire la guida: serve come sfondo concreto alla mappa. Le lettere sono già presenti nell’immagine ufficiale e collegano le aree alla spiegazione.
| Lettera | Nome nella schermata | Come lo riconosci | Che cosa permette |
|---|---|---|---|
| A | Activity Bar | Colonna stretta con icone | Scegliere Esplora file, Ricerca, Git, debug ed estensioni |
| B | Primary Side Bar | Area con l’albero delle cartelle | Consultare la vista selezionata |
| C | Editor Groups | Schede e documenti al centro | Leggere e modificare uno o più file |
| D | Panel | Area sotto gli editor | Aprire terminale, diagnostica e log |
| E | Status Bar | Striscia lungo il bordo inferiore | Leggere contesto, linguaggio, posizione e codifica |
La disposizione è personalizzabile. Un pannello può essere spostato e la barra laterale può essere nascosta. Se un’immagine mostra il terminale in basso ma la propria finestra lo mostra a destra, si cercano nome e funzione, senza assumere che la configurazione sia sbagliata.
Barra dei menu e accesso ai comandi
I menu raccolgono azioni su file, modifica, selezione, visualizzazione, esecuzione e terminale. Alcune voci aprono un pannello; altre modificano il documento; altre richiamano un processo. Il contesto può abilitare o disabilitare un comando: un’azione su un simbolo richiede normalmente un documento e un servizio del linguaggio appropriati.
Windows
La barra dei menu compare normalmente nella finestra o secondo il layout scelto. Se è nascosta, il tasto Alt può renderla accessibile in configurazioni comuni. La Command Palette permette di cercare l’azione senza ricordarne il menu.
Linux
La posizione e l’aspetto dei menu dipendono anche dal desktop e dalla configurazione della finestra. Se una combinazione viene intercettata dal sistema, si usa il comando dal menu oppure si personalizza la scorciatoia in VS Code.
macOS
I menu dell’applicazione compaiono nella barra del sistema quando VS Code è l’app attiva. Si controlla quindi quale applicazione abbia il focus prima di cercare File o Visualizza. La Command Palette resta disponibile nella finestra dell’editor.
Il menu Terminale è un buon esempio della distinzione: Nuovo terminale apre una shell; non esegue automaticamente il file aperto nell’editor. Per avviare quel file serviranno il comando adatto e il relativo interprete o compilatore.
Barra delle attività
La barra delle attività è la colonna di icone indicata con A. Ogni icona sceglie una vista. L’icona Esplora file porta alle cartelle, Ricerca ai risultati testuali, Controllo del codice sorgente alle informazioni del repository, Esegui e debug alle sessioni, Estensioni alla gestione dei componenti.
Selezionare una vista non modifica automaticamente il progetto. Passare da Esplora file a Estensioni cambia ciò che si vede nella barra laterale. Un’icona aggiunta da un’estensione non indica un nuovo linguaggio già installato nel sistema: indica un nuovo accesso nell’interfaccia.
Per lavorare con calma si lascia aperta la vista utile al momento. Durante la creazione dei file serve Esplora file; durante l’installazione di un componente serve Estensioni; durante il debug serviranno le viste della sessione. Imparare questa relazione evita di cercare cartelle dentro la schermata delle estensioni.
Barra laterale ed Esplora file
L’Esplora file mostra le cartelle e i documenti del workspace. I triangoli espandono o comprimono directory; selezionare un file lo apre nell’editor. Le azioni di creazione, rinomina e spostamento operano sul filesystem, quindi producono effetti anche fuori da VS Code.
Una sottocartella non coincide con un gruppo di editor. La prima organizza i file sul disco; il secondo dispone documenti già aperti sullo schermo. La sezione Open Editors / Editor aperti può elencare documenti anche quando appartengono a percorsi differenti.
Schermata Microsoft, documentazione VS Code. Fonte · CC BY 3.0 US. Riprodotta senza modifiche; versione e lingua possono differire dalla tua installazione.
Una cartella può essere mostrata in forma compatta quando contiene soltanto un’altra cartella. Il percorso reale continua ad avere più livelli. Se un file non compare, può essere escluso dalla visualizzazione: non si conclude subito che sia stato cancellato. Nella pagina 1.6 costruiremo una struttura minima e riconosceremo la radice.
Area dell’editor, schede e gruppi
L’area centrale mostra i documenti. Ogni scheda identifica un file aperto; il documento attivo riceve le modifiche di tastiera. La posizione del cursore e la selezione determinano dove un inserimento o un comando avrà effetto. Un file aperto in due gruppi rimane un unico file: non è stato duplicato sul disco.
Una scheda in anteprima può essere riutilizzata quando si seleziona un altro documento. Il doppio clic su un file o il comando di mantenimento della scheda ne rende stabile l’apertura secondo la configurazione. Il nome in corsivo è un indizio comune della modalità anteprima.
Schermata Microsoft, documentazione VS Code. Fonte · CC BY 3.0 US. Riprodotta senza modifiche; versione e lingua possono differire dalla tua installazione.
Il comando Split Editor divide l’area in gruppi. È utile per affiancare HTML e CSS, sorgente e configurazione o due parti dello stesso file. La divisione riguarda l’interfaccia e non avvia un secondo programma.
Schermata Microsoft, documentazione VS Code. Fonte · CC BY 3.0 US. Riprodotta senza modifiche; versione e lingua possono differire dalla tua installazione.
L’indicatore di modifica sulla scheda segnala che il contenuto visibile non è ancora identico all’ultima versione salvata. Un processo esterno può leggere ancora il file sul disco: questa è una causa frequente di «ho cambiato il programma ma il risultato è uguale».
Pannello inferiore e strumenti operativi
Il pannello indicato con D ospita viste differenti. Terminale esegue una shell e ospita processi interattivi. Problemi raccoglie diagnostica riconosciuta. Output presenta canali di messaggi. Debug Console appartiene al debugger. Una scheda selezionata decide quale contenuto si sta leggendo.
Non si digitano comandi della shell nel pannello Problemi o in un canale Output aspettandosi un avvio. Il terminale è l’area appropriata per comandi come python main.py o node app.js. Il debugger, invece, ha una propria configurazione e una propria console.
Nascondere il pannello non interrompe necessariamente il processo che sta eseguendo. Un server potrebbe continuare a occupare una porta anche se il terminale non è visibile. Per capire lo stato si riapre la vista e si legge il prompt o l’output del processo.
Schema esplicativo originale creato per il capitolo.
Barra di stato
La barra di stato mostra informazioni sul documento e sull’ambiente. Posizione del cursore, indentazione, codifica, terminatori di riga e modalità linguaggio sono elementi frequenti. Estensioni e integrazioni possono aggiungere interprete, branch o contesto remoto.
Il linguaggio viene dedotto normalmente dal nome del file. Un main.py salvato correttamente è riconosciuto come Python; un file senza estensione può restare testo semplice. Se il riconoscimento non è quello atteso, si può selezionare la modalità, ma prima si controlla il nome reale.
La codifica determina come i byte rappresentano i caratteri. I terminatori LF e CRLF indicano convenzioni di fine riga differenti. Non è necessario cambiarli per ogni file: si mantengono le convenzioni del progetto. Una modifica casuale può produrre un diff esteso senza cambiare il comportamento desiderato.
Un indicatore remoto significa che parte del lavoro avviene altrove. In questo primo capitolo useremo principalmente il contesto locale. È comunque importante sapere che la barra di stato può descrivere il luogo in cui si trovano runtime e file, non soltanto l’aspetto del documento.
Command Palette
La Command Palette cerca azioni per nome. È utile quando non si ricorda la posizione nei menu e quando un’estensione aggiunge un comando. Si apre normalmente con Ctrl+Shift+P su Windows e Linux, Cmd+Shift+P su macOS.
Schermata Microsoft, documentazione VS Code. Fonte · CC BY 3.0 US. Riprodotta senza modifiche; versione e lingua possono differire dalla tua installazione.
La ricerca rapida dei file usa un’interfaccia simile, normalmente richiamata con Ctrl+P o Cmd+P. Il prefisso > identifica la ricerca dei comandi; senza quel prefisso si possono cercare file. Questo dettaglio aiuta a capire perché digitare un nome produca risultati differenti.
Alcuni comandi esistono solo dopo l’installazione della relativa estensione. Se Python: Select Interpreter non compare, si controlla il supporto Python. Se compare ma non trova interpreti, si controlla il software esterno. La palette offre l’accesso, mentre i prerequisiti determinano ciò che l’azione può fare.