VSCode: zero to hero

Ottimizzare il tuo editor di codice e renderlo invidiabile ai tuoi colleghi. La guida al settaggio definitivo di VSCode

VSCode è tra gli editor di codice maggiormente usati nel mondo dello sviluppo software. Editor di codice open source sviluppato da Microsoft e rilasciato ufficialmente nel 2016, supporta una vasta gamma di linguaggi di programmazione.

Nel 2022, secondo un sondaggio organizzato sul sito di Stack Overflow, il 74,48% dei partecipanti utilizza VSCode.

In questo articolo vi proponiamo una guida per settare Visual Studio Code e renderlo professionale e maggiormente efficiente per il lavoro di sviluppatore software.

Tema

Il tema “Dark Modern” è vivamente consigliato. In questo modo abbiamo un equilibrio tra eleganza ed efficienza. Il contrasto del colore è perfetto, rendendo il lavoro sull’IDE meno stressante per gli occhi durante lunghe sessioni di codifica.

Un look sofisticato e raffinato che aggiunge un tocco di eleganza all’ambiente di sviluppo. Il tema “Dark Modern” è stato introdotto ad Aprile 2023 con la versione 1.78 di VSCode.

Il file settings.json e la finestra comandi

La finestra dei comandi è accessibile semplicemente con la combinazione di tasti Ctrl+Shift+P. Grazie a questo strumento avrai la possibilità di eseguire comandi e accedere a diverse funzionalità con pochi tasti. Una volta presa la mano, ti renderai conto della sua utilità, soprattutto in ottica di risparmiare tempo.

VIsualizzata la finestra dei comandi, digita “user settings” e ti ritroverai due opzioni: ” Prefeences: User settings (Json)” e “Preferences: Open User Settings”. Nel primo caso è possibile modificare tutte le impostazioni utilizzando un file JSON, mentre nella seconda opzione sarà disponibile un’interfaccia utente grafica (UI) per la configurazione.

TI consigliamo di scegliere in questo caso l’opzione più adatta a te in base alle tue esigenze e preferenze di codifica.

Il carattere

FIraCode può essere una scelta ottimale. Un carattere a spaziatura fissa che inserisce le legature di programmazione, il codice così sarà ancora più leggibile ed elegante.

Il carattere utilizzato nel tema “Dark Modern” non è solo bello da vedere ma cosa più importante è accessibile. I colori a basso contrasto rendono l’esperienza di codifica più confortevole e meno stancante.

I colori a basso contrasto aiutano a mantenere la concentrazione ed evitare distrazioni, se ti abbiamo convinto, puoi scaricarlo seguendo le istruzioni fornite dai creatori del carattere.

Menu di VSCode

Puoi nascondere il menu di VSCode per un’interfaccia più pulita e utilizzare scorciatoie per la navigazione come shortcut e azioni rapide.

"widow.menuBarVisibility":"compact"

Minimappa

La minimappa potrebbe distrarre durante la codifica, c’è un modo per recuperare spazio sullo schermo senza però perdere l’utilità che può avere durante il refactoring per esempio.

Modifichiamo le impostazioni, configurando la minimappa in modo che la sua visualizzazione avvenga solo quando passaimo il cursore sulla parte più a destra dell’editor. Così facendo, avremo meno distrazioni ma comunque la disponibilità della minimappa all’occorrenza.

"editor.minimap.autohide":true ,
"editor.minimap.enabled":true ,
"editor.minimap.renderCharacters":false ,
"editor.minimap.scale":1,
"editor.minimap.showSlider":"mouseover ",
"editor.minimap.side":"right",

La minimappa rimane uno strumento estremamente utile per orientarci nel nostro codice, tuttavia la visualizzazione eccessiva di caratteri complessi potrebbe essere un problema. Consigliamo quindi di ridurre la minimappa al valore 1.

Il cursore

Il cursore a volte può essere difficile da trovare, la sua colorazione predefinita non aiuta a individuarlo e si confonde con il testo.

"editor.cursorBlinking":"solid",
"editor.cursorSmoothCaretAnimation":"off",
"editor.cursorSurroundingLines":10,
"editor.cursorSurroundingLinesStyle":"default",
"workbench.colorCustomizations":{
"editorCursor. background":"#ff930f",
"editorCursor.foreground":"#ff930f",
}

Con un colore di sfondo come “#ff930f” avremo una distinzione del cursore rispetto al tema scuro, rendendolo più visibile.

Con l’impostazione “cursorSurroundingLines” sarà possibile avere un offset di 10 righe durante lo scorrimento, aiutando così a mantenere la posizione nel codice.

Ritardo hovering

Il ritardo dell’hovering nella sua impostazione predefinita risulta essere troppo lento per chi ha fretta, andiamo quindi a modificarlo in base alle nostre esigenze:

"editor.hover.delay":300,
"workbench.hover.delay":1,

Grazie ad un ritardo al passaggio del mouse impostato su 300 millisecondi, si raggiunge un equilibrio tra reattività e usabilità. Il ritardo consente di navigare velocemente nel codice senza attivare involontariamente il passaggio del mouse.

Parentesi

In VSCode è presente una funzionalità incorporata denominata evidenziazione delle coppie di parentesi che consente di identificare facilmente le coppie di parentesi corrispondenti nel codice. 

Abilitando l’evidenziazione delle coppie di parentesi orizzontali, puoi tenere traccia delle parentesi di apertura e chiusura corrispondenti mentre scorri verso l’alto e verso il basso il codice.

Inoltre, il rendering del rientro e l’evidenziazione del rientro attivo possono essere utili durante la navigazione nel codice.

"editor.guides.bracketPairs":true ,
"editor.guides.bracketPairsHorizontal":"active",
"editor.guides.highlightActiveBracketPair":true ,
"editor.guides.highlightActiveIndentation":true ,
"editor.guides.indentation":true ,
"editor.bracketPairColorization.enabled":true ,
"editor.bracketPairColorization.independentColorPoolPerBracketType":true ,

Eventi in evidenza

Durante il debug e la lettura del codice risulta utile abilitare l’evidenziazione nel codice:

"editor.occurrencesHighlight":true ,

Scorrimento

Le prestazione e l’usabilità hanno la precedenza sull’interfaccia utente complessa, disabilitiamo quindi lo scorrimento fluido. Con lo scorrimento fluido attivo può verificarsi un sovraccarico non necessario che influenza le prestazioni complessive.

Lo scorrimento continuo invece può tornare utile, quando si lavora con file lunghi e densi di righe di codice. Così possiamo mantenere il senso della posizione e a tracciare facilmente la posizione, in modo simile a come funzionano i breadcrumb nella navigazione.

"workbench.list.smoothScrolling":true ,
"editor.fastScrollSensitivity":5,
"editor.smoothScrolling":false ,
"editor.stickyScroll.enabled":true ,

Drag&Drop

Per evitare il trascinamento e il rilascio accidentale durante la digitazione è possibile disattivare questa funzione tramite le impostazioni del touchpad nel sistema operativo

"editor.dragAndDrop":false ,

A capo automatico

Per evitare lunghe file di codice e vogliamo evitare l’utilizzo del mouse il più possibile con l’opzione per mandare a capo una lunga riga di codice evitiamo lo scorrimento

"editor.wordWrap":"active"

CodeLens

Code Lens risulta utile durante azioni rapide come il debug e l’esecuzione di test

"editor.codeLens":true

Formattazione in incolla e salvataggio

Abilitando la funzione di formattazione automatica nell’editor evitiamo il fastidio di formattare manualmente il codice. Configuriamo per l’attivazione al salvataggio del file o quando si incolla il testo.

Così facendo abbiamo la garanzia che il codice sia formattato coerentemente senza dover metterci le mani.

"editor.formatOnPaste":true ,
"editor.formatOnSave":true ,
"editor.formatOnType":false ,

Estensioni VSCode

Codesnap

Con CodeSnap è possibile creare un’immagine del codice chiara ed elegante, basta evidenziare la parte del codice interessata e attivare la funzione.

Conventional Commits

Grazie a questa estensione è possibile eseguire un commit git con una struttura predefinita.

Diff

Diff consente di confrontare 2 file di testo

Seguendo questi consigli il vostro IDE risulterà più efficiente e ottimizzato per il vostro lavoro. Speriamo che questa mini-guida vi torni utile e vi aiuti a lavorare meglio con il vostro VSCode.