Se si lavora in ambienti multipli, ad esempio il proprio sistema di sviluppo in locale o su server dedicato, il server di produzione, altri ambienti di sviluppo tutti aperti con l’editor preferito, la situazione comincia a diventare complicata. È un attimo confondere una finestra di editor e combinare un pasticcio considerevole.
Visual Studio di sua mostra nella intestazione della finestra il nome dell’ambiente, ma non è decisamente sufficiente a prevenire un minimo attimo di distrazione. Sarebbe meglio se le cornici fossero colorate. E quelle cornici sono quelle di sistema, sebbene facenti parte del programma. Per fortuna Visual Studio Code è scritto in Electron, e questo di fatto è composto in HTML5 e CSS3 oltre che JavaScript. Ecco che la cosa gioca a nostro favore.
Quindi come cambiare colore ad una workspace? La situazione tipica è quella relativa ad una finestra aperta in remote-ssh. La cosa interessante è che quanto andremo a spiegare di fatto rimane residente sul server, per cui una volta impostato anche altri colleghi che andranno ad attivare quella workspace si ritroveranno la finestra colorata. Lascio una immagine esplicativa dove abbiamo colorato una sessione di Visual Studio Code in Arancione.
Pertanto, dobbiamo aprire l’editor, nel caso di una remote-ssh o di un workspace su Docker, va aperta quella che intenderemo modificare. Una volta avviato il programma, andiamo su Impostazioni attivando il menu contestuale (icona ad ingranaggio in basso a sinistra). Dalla maschera delle impostazioni scegliere quelle relativa al workspace (nel caso in esempio una Remote SSH) quindi andare nella sezione “Workbench” e Aspetto.
In questa sottosezione è presente la voce “Color customization” che permette di aprire, o creare se non presente un file settings.json.
In questo file possiamo definire, nel formato JSON, i colori di riferimento alla pagina come da esempio
{
"workbench.colorCustomizations": {
"statusBar.background": "#ff0000",
"statusBar.noFolderBackground": "#ff0000",
"statusBar.debuggingBackground": "#42be11",
"activityBar.background": "#ff0000",
"titleBar.activeBackground": "#ff0000",
"titleBar.activeForeground": "#ff0000"
},
}Questo è un esempio che permette di cambiare i colori di contorno. Ma i parametri sono decisamente più corposi e possono essere reperiti alla pagina di documentazione del sito.
Come citato in precedenza, il file in questione viene salvato sull’ambiente di riferimento, quindi la home nel caso di una Remote-SSH oppure dentro l’immagine di un container Docker. Pertanto, aprendo quella workspace, anche da terzi, il file settings.json viene recuperato e messo in funzione con le sue direttive. Una vera comodità.