Negli articoli precedenti abbiamo visto gli strumenti principali che compongono Visual Studio Code e approfondito le estensioni che aumentano l'efficacia del Code Editor, oltre che migliorare il nostro lavoro.
Come abbiamo potuto osservare Visual Studio Code è quindi un editor di codice estremamente comodo e versatile. Utilizzato da molti sviluppatori e Web designer in quanto pratico ed intuitivo.
Una delle sue caratteristiche più apprezzate è la possibilità di personalizzare l'interfaccia di lavoro, permettendo ad ogni utente di adattare l'editor alle proprie esigenze e preferenze. Motivo per cui in questo articolo esploreremo alcune delle principali opzioni di personalizzazione disponibili in Visual Studio Code. Creeremo inoltre la base di lavoro per la creazione di un intero sito Web, del quale approfondiremo tutti gli aspetti pratici e tecnici all'interno delle prossime lezioni.
Come personalizzare l'interfaccia di lavoro di Visual Studio Code?
Il primo passo per personalizzare l'interfaccia di lavoro di Visual Studio Code consiste nello scegliere il tema. Ovvero l'impianto grafico del software che determinerà anche il colore del codice che scriveremo.
La personalizzazione del tema di Visual Studio Code è una delle opzioni più comuni per gli utenti che vogliono personalizzare l'interfaccia di lavoro dell'editor, ed è importante scegliere un tema che non solo risulti piacevole alla vista, ma che aiuti anche a ridurre l'affaticamento visivo e migliori la leggibilità del codice.
Scelta del tema
Il code editor offre una vasta gamma di temi predefiniti tra cui scegliere, ognuno dei quali ha il proprio stile e colore e tutti includono combinazioni di colori per l'editor, la barra laterale, il menu a discesa e altre componenti dell'interfaccia utente.
Il tema di default di Visual Studio Code si chiama Dark+ ed è un tema a mio parere molto bello, con colori scuri ed un buon contrasto. Tuttavia, se non dovesse piacerti questo tema non preoccuparti, Visual Studio Code offre molti altri temi tra cui scegliere.
Possiamo infatti scegliere un tema andando alla voce "Code" > "Preferenze > Tema > Tema colori”.
Cliccando su questa voce, possiamo vedere la lista dei temi disponibili di default o che abbiamo installato.
Logicamente possiamo anche scaricare ulteriori temi, esplorando il catalogo e scegliendo direttamente quale utilizzare attraverso il marketplace ufficiale di Visual Studio Code.
Qui è possibile navigare tra le estensioni ed ovviamente anche fra i temi, oltre che cercare nomi specifici, visualizzare anteprime e installare il tema desiderato.
Una volta trovato il tema che preferiamo, possiamo anche cercarlo direttamente all'interno di Visual Studio Code nella sezione delle estensioni.
Ovviamente, dopo aver cliccato sul pulsante "Installa" per attivarlo, dovremo tornare all'interno di "File > Preferenze > Tema > Tema colori" e selezionarlo.
Personalizzare le icone
Oltre al tema, è possibile personalizzare anche le icone presenti all'interno dell'editor, ovvero quelle icone che permettono di identificare gli elementi ed i file all'interno di Visual Studio Code.
Le icone in Visual Studio Code possono essere personalizzate per migliorare la leggibilità e l'organizzazione del codice. Possono essere inoltre utilizzate per identificare facilmente i diversi tipi di file e cartelle all'interno del progetto e possono anche essere utilizzate per indicare lo stato dei file nel controllo del codice sorgente.
Visual Studio Code offre la possibilità di utilizzare diversi set predefiniti di icone che possono essere integrate cercando all'interno del marketplace online oppure direttamente nella sidebar dedicata alle estensioni.
Selezioniamo Material Icon Theme, che oltre ad essere un'ottima estensione consente anche di personalizzare le icone a nostro piacimento.
L'estensione Material Icon Theme per Visual Studio Code è molto popolare per l'editor in quanto fornisce un insieme di icone colorate e ben progettate per migliorare la navigazione tra i file e le cartelle del progetto.
Dopo aver installato l'estensione dovremo attivarla andando nuovamente in "Code > Preferenze > Tema" ma questa volta selezionando "Tema icona File" ed ovviamente impostando Material Icon Theme come nuovo "Tema delle icone".
A questo punto noteremo che le icone dei nostri file saranno cambiate ed avranno un nuovo aspetto maggiormente riconoscibile.
Material Icon Theme è altamente personalizzabile e consente di scegliere tra una vasta gamma di icone per ciascun tipo di file. Così come di aggiungere icone personalizzate per specifici file o cartelle.
Material Icon Theme offre anche la possibilità di aggiungere icone personalizzate per file o cartelle specifici del progetto. Per farlo, dobbiamo creare un file chiamato material-icon-theme.json nella cartella .vscode del progetto e definire le icone personalizzate al suo interno.
Ecco un esempio di come si potrebbe definire una nuova icona per un file CSS:
{
"iconDefinitions": {
"custom-css-icon": {
"iconPath": "./images/css-icon.png"
}
},
"fileExtensions": {
".css": "custom-css-icon"
}
}In questo modo possiamo personalizzare maggiormente l'interfaccia di lavoro e trasformare Visual Studio Code nel nostro ambiente ideale.
Le scorciatoie da tastiera
Infine passiamo ad un altro aspetto molto importante per migliorare la produttività utilizzando Visual Studio Code, ovvero le scorciatoie da tastiera.
Le scorciatoie da tastiera sono uno strumento molto potente. Esistono centinaia di scorciatoie predefinite che possono essere utilizzate per accedere rapidamente alle funzioni più utilizzate dell'editor.
È possibile visualizzare l'elenco completo delle scorciatoie attraverso il percorso "Code > Preferenze > Tasti di scelta rapida".
Inoltre è possibile personalizzare le scorciatoie creando le proprie combinazioni di tasti, basta cliccare sopra l'icona di modifica del comando che vogliamo personalizzare e digitare la nuova combinazione.
Ora che abbiamo personalizzato a dovere il nostro Editor, entriamo nel vivo della guida e proseguiamo con lo sviluppo di un intero sito Web.
