5 funzionalità di VS Code che mi fanno risparmiare tempo ogni giorno

Uso VS Code quasi ogni giorno. Una cosa che mi colpisce è che può fare moltissimo lavoro pesante per te. Devi fare modifiche ripetitive? Cercare file nella barra laterale? Riscrivere lo stesso boilerplate per la centesima volta? VS Code può facilitarti tutto questo. Immergiamoci per vedere come.

Modifica con più cursori

Uno dei compiti più controproducenti che si possano fare durante la programmazione è modificare la stessa cosa più e più volte. Supponiamo che un nome di variabile appaia 12 volte. Una classe CSS deve essere aggiornata in 8 posti. La cambi una volta, poi cerchi la prossima occorrenza, poi la successiva. Fino a quando la tua concentrazione è completamente esaurita, è un compito fastidioso che continua ad accumularsi.

Invece di modificare un posto alla volta, VS Code ti permette di posizionare più cursori e di scrivere in tutti contemporaneamente. Ogni battitura viene replicata su tutti i cursori, il che significa che le modifiche ripetitive richiedono improvvisamente secondi anziché minuti.

Il modo più semplice per iniziare è aggiungere i cursori manualmente:

Windows/Linux: Tieni premuto Alt e clicca dove vuoi creare un nuovo cursore
macOS: Tieni premuto Option e clicca

Per selezioni più intelligenti, posiziona il cursore su una parola e premi:

Ctrl + D (Windows/Linux) o Cmd + D (macOS) per selezionare la prossima occorrenza corrispondente
Ctrl + Shift + L (Windows/Linux) o Cmd + Shift + L (macOS) per selezionare tutte le occorrenze contemporaneamente

Una volta posizionati i cursori, basta digitare. VS Code fa il resto. La modifica con cursori multipli è perfetta per rifattorizzare variabili, modificare markup ripetitivo o pulire dati disordinati. Se vai un po' oltre, premendo Esc tornerai istantaneamente a un singolo cursore.

Navigazione rapida tra i file

Ogni progetto inizia piccolo. Poi all’improvviso ti trovi a lavorare in un codice con dozzine o centinaia di file. Controller, servizi, componenti, utilità, configurazioni. E salti continuamente da uno all’altro. Apri l’esplora file, scorri, espandi le cartelle, perdi il filo di dove eri e ripeti il processo.

VS Code ti offre modi più veloci per passare da un file all'altro senza mai toccare il mouse. L'arma segreta qui è Quick Open. Ti permette di cercare e aprire qualsiasi file nel tuo progetto quasi istantaneamente, usando solo la tastiera.

Aprilo con Ctrl + P (Windows/Linux) o Cmd + P (macOS). Inizia a digitare una parte del nome del file. VS Code utilizza la corrispondenza approssimativa, quindi non è necessario il nome esatto. Premi Invio per aprire il file.

Non devi fermarti lì. Se vuoi cercare simboli, funzioni o classi, digita @ nel menu Apri Rapido mentre il file a cui vuoi andare è selezionato e otterrai un elenco di quelli a cui puoi saltare.

Un altro utile shortcut che mi piace è navigare tra le schede aperte. Per passare a una scheda, puoi usare Alt + numero della scheda (1,2,3...) su Windows e Ctrl + numero della scheda su macOS. Se vuoi scorrere tra di esse, usa Ctrl + Tab. Questo è utile quando hai aperti pochi file e non vuoi usare il mouse ogni volta.

Anteprima dei file Markdown

Scrivere in Markdown senza un'anteprima è un po' come programmare senza eseguire la propria app. Sai che dovrebbe funzionare, ma indovini continuamente come apparirà davvero.

VS Code risolve questo permettendoti di visualizzare in anteprima i file Markdown direttamente all'interno dell'editor, affiancati al tuo codice sorgente. Scrivi su un lato, vedi il risultato reso sull'altro e rimani completamente concentrato.

Per visualizzare in anteprima un file Markdown in VS Code, apri un file Markdown. Avvia l'anteprima con Ctrl + Shift + V (Windows/Linux) o Cmd + Shift + V (macOS). Se vuoi vedere l'anteprima e il file originale affiancati, premi Ctrl + K e poi V.

Mentre digiti, l'anteprima si aggiorna in tempo reale, mostrando esattamente come il tuo Markdown verrà visualizzato.

Rinomina i simboli in tutto il file

Rinominare le cose è pericolosamente ingannevole. Cambi il nome di una variabile in un punto, poi trascorri i minuti successivi a cercare ogni altro riferimento, sperando di non sbagliare nessuno. Peggio ancora, un'operazione di trova e sostituisci fatta frettolosamente può rinominare cose che non dovrebbe, lasciando dietro di sé bug subdoli che si manifestano solo in seguito.

VS Code elimina il rischio con la rinominazione dei simboli. Invece di sostituire il testo alla cieca, comprende il tuo codice e rinomina il simbolo ovunque venga effettivamente utilizzato. Posiziona il cursore sulla variabile, funzione o simbolo che vuoi rinominare e premi F2. Digita il nuovo nome e premi Invio.

VS Code aggiorna istantaneamente ogni riferimento valido nel file (e spesso in tutto il progetto, a seconda del supporto linguistico).

Usa frammenti di codice

C'è un tipo speciale di frustrazione che nasce dal digitare lo stesso codice standard più e più volte. Un componente React, un blocco try/catch, un ciclo for e la configurazione di un test. Sai già come appare, ma le tue dita devono comunque fare tutto il lavoro.

Gli snippet di codice trasformano quella ripetizione in una scorciatoia. Gli snippet ti permettono di generare interi blocchi di codice con pochi tasti. Sono intelligenti, veloci e personalizzabili.

VS Code include snippet integrati per molti linguaggi. Basta iniziare a digitare qualcosa di familiare e premere Tab quando appare il suggerimento. In altri casi, puoi trovare estensioni per i linguaggi o framework con cui stai lavorando.

Ma la parte migliore dei frammenti è che puoi crearne di tuoi. Apri il Command Palette (Ctrl + Shift + P/Cmd + Shift + P) e cerca Configura Snippet. Puoi creare un frammento globale o scegliere un linguaggio.

Una volta salvati, i tuoi snippet personalizzati saranno disponibili ovunque.