Che lo si voglia chiamare IDE o editor di codice, dovrebbe essere comunque chiaro che la parte centrale di Visual Studio Code è l'area di scrittura del testo. Scopriamone le caratteristiche.
L'editor
L'editor di testo si trova a destra della sidebar nella sua interfaccia di default, prima di poter operare su file bisogna aprire un progetto o una cartella.
Apriamo un progetto
Se abbiamo aperto Visual Studio Code per la prima volta è molto probabile che, cliccando l'icona dell'explorer sul pannello, si presenti un interfaccia con due pulsanti:
- uno per aprire la cartella;
- l'altro per clonare il repository.
Alternativamente possiamo sempre aprire una nuova cartella utilizzando la menubar: "File > Open Folder" (o "File > Nuova Cartella").
Una volta aperta una cartella, l'explorer ne mostrerà il contenuto con una visualizzazione ad albero.
Le righe che contengono file saranno contrassegnate con icone che ne simboleggiano la natura (js per JavaScript, parentesi graffe per json, etc.).
Al contrario le icone dovrebbero presentare soltanto un simbolo che contrassegna se queste sono aperte (o espanse) o chiuse (o collassate). Solo nel primo caso ne potrete vedere il contenuto.
Tuttavia alcune di queste caratteristiche potrebbero variare nel caso in cui installiate un tema icone.
In corrispondenza del nome della cartella principale vediamo 4 icone.
In ordine da sinistra a destra:
- Possiamo creare un nuovo file con la prima icona.
- Con la seconda icona creeremo una nuova cartella.
- La terza icona serve, nel caso in cui ci fossero delle modifiche esterne al programma, per ricaricare il contenuto della cartella.
- L'ultima icona serve a "collassare" tutte le sottocartelle. Utile se si hanno molte sottocartelle espanse e si vuole ripartirle con ordine e cercare un file o una cartella specifica.
Lavorare su file
Una volta aperta una cartella o un progetto, basterà cliccare su un file per per poterlo aprire e modificare.
Come comportamento predefinito, se non modificate nulla, cliccando su un altro file il vecchio file verrà chiuso. Questo comportamento è chiamato modalità anteprima.
Altresì, se effettuate una qualunque modifica su un file, cliccando su uno nuovo quest'ultimo verrà aperto in una nuova tab.
Le tab vengono visualizzate per impostazioni predefinita in alto. Il titolo della tab cambia stile in base allo stato di modifica del file:
- Nome della tab in corsivo: il file è in modalità anteprima.
- Accanto al nome è presente un pallino nero: il file è stato modificato ma non salvato.
- Nome della tab scritto normalmente: il file è stato modificato e salvato.
Esistono in realtà altri stati del file, descritti da colori e icone diverse che riguardano il versioning del file o il numero di problemi ed errori indicati da un language server.
Di questi stati parleremo in altre sezioni.
Minimap
La funzione di minimap è presente in molti editor, anche quelli più semplici.
Essa consente di avere un'anteprima minimizzata di tutto il codice, generalmente posizionata sulla destra. Cliccando su quest'anteprima è possibile spostarsi in modo molto rapido sul codice.
Troverete la minimap a destra dell'editor anche su Visual Studio Code.
Lavorare su più riquadri
È possibile aprire sulla vista più file in contemporanea, in riquadri diversi.
Per questa funzionalità bisogna trascinare il file dalla tab explorer all'editor, posizionandolo in uno dei quattro punti cardinali, in base a dove lo si vuole visualizzare. Nell'azione di trascinamento vedremo colorarsi in anteprima l'area in cui si aggancerà il file:
Visualizzare i file su dei riquadri è molto utile se si devono effettuare confronti di più file contemporaneamente o per avere sempre sott'occhio più file che appartengono ad uno stesso flusso di operazioni chiamato "a catena".
Editor aperti
Oltre ad avere le varie tab in alto sull'editor è possibile visualizzare tutti gli editor aperti nella lista dei file dell'explorer.
Per attivare questa funzionalità bisogna cliccare accanto alla scritta "EXPLORER" ("ESPLORA RISORSE" in italiano) dove sono presenti i tre puntini. Quindi cliccare su "Open Editors" (o "Editor Aperti").
Una volta abilitata la spunta vedrete un nuovo menu a tendina giusto sopra il nome del progetto aperto, qui appariranno tutti i file aperti, sia in altre tab che in riquadri.
Cliccando su uno di questi file l'editor corrispondente otterrà il focus, potremo quindi scrivere in quel file.
Nello specifico più tab aperte entreranno a far parte di uno stesso gruppo di file. Se si utilizzano invece i riquadri, questi creeranno un nuovo gruppo di file.
Portandosi al di sopra di un file aperto è possibile chiuderlo attraverso la crocetta che appare sulla sinistra del nome.
Valgono anche qui le stesse convenzioni sul nome del file, in corsivo appariranno i file aperti in modalità anteprima, se appare invece un pallino nero significa che sono presenti modifiche non salvate.
Accanto al nome del menu a tendina, ovvero "Open Editors", vedremo anche un etichetta con il numero di file non salvati, se presenti.
È possibile trascinare in questo menù i file da un gruppo ad un altro, modificandone quindi il riquadro.
Attenzione però: se lasciate un gruppo vuoto il riquadro verrà soppresso, vi ritroverete quindi tutti i file in una sola schermata.
Se non vi sono riquadri divisi, il menù "Open Editors" non mostra gruppi.
Menù Contestuale e workspace
Il menù contestuale è quel pop-up che viene visualizzato premendo il pulsante destro del mouse su un determinato elemento.
Su Visual Studio Code quest'ultimo subisce molte variazioni in base al contesto ed all'elemento di riferimento.
Menù contestuale su pannello
In base all'elemento selezionato e la zona del pannello o dell'editor in cui cliccherete, il menu contestuale (quello con tasto destro, per intenderci) cambierà il suo contenuto.
Partiamo dal menù che si presenta cliccando su una zona vuota del pannello explorer, da qui potrete:
- creare nuovi file ("New file").
- Creare nuove cartelle ("New folder").
- Aprire la cartella corrente nel gestore di file del sistema ("Open containing folder").
- Aggiungere cartelle al nostro workspace ("Add Folder to Workspace").
- Aprire impostazioni specifiche per la cartella ("Open Folder Settings").
Se si clicca su un file in particolare si aggiungono alcune opzioni a quelle viste prima. Le più interessanti sono:
- "Open to the Side" (o "Apri lateralmente") che apre il file in un riquadro a se stante.
- "Select for Compare" ("Seleziona per il confronto"): seleziona un file per il confronto.
- "Compare with selected" ("Confronta con selezionati"): quest'opzione appare solo se è stato premuto "Select for compare" e mostra il confronto tra i due file riga per riga in stile
diff. - Tutte le impostazioni di copia/incolla/taglia e che di norma son disponibili sui file.
Alcune funzioni cambiano in base al tipo di file, ad esempio in un progetto Java troveremo la possibilità di creare e gestire il pom.xml di maven, oppure di eseguire una specifica classe Java ed eseguirne il debug.
Workspace
Il concetto di "workspace" è da analizzare non solo come progetto, esso può unire più cartelle in diversi punti del sistema senza spostarle "fisicamente". Molto utile da un punto di vista organizzativo.
Menù contestuale su editor
Il menu contestuale sull'editor cambia in base al contenuto del file e alle estensioni installate.
Il più scarno possibile dovrebbe essere simile a questo che contiene quelle che sono le operazioni più comuni.
Con le giuste estensioni il menù non solo aumenta di molto nel numero di voci, ma aiuterà a ottimizzare e automatizzare i flussi di lavoro con diverse opzioni aggiuntive.
Pannello inferiore
È da introdurre infine il pannello inferiore
Le opzioni che interessano il file editing son sicuramente quelle sulla destra, dove troviamo indicate:
- numero di linea su cui giace il cursore.
- Il numero di colonna.
- Il carattere di indentazione usato (tab o spazio, con anche la sua dimensione).
- La codifica del file (UTF-8 nel caso di sistemi UNIX like)
- Il terminatore di riga (LF nei sistemi UNIX like)
- La natura del file, o comunque il linguaggio in cui è scritto.
Ogni opzione è anche cliccabile, per cambiarne il valore. Potete quindi modificare rapidamente (e temporaneamente) numero di linea, carattere di indentazione, codifica etc., senza passare dalle impostazioni.