Modifica di base

Visual Studio Code è prima di tutto un editor e include le caratteristiche necessarie per una modifica altamente produttiva del codice sorgente. Questo argomento ti porta attraverso le basi dell’editor e ti aiuta a muoverti con il tuo codice.

Scorciatoie da tastiera

Essere in grado di tenere le mani sulla tastiera quando si scrive codice è cruciale per un’alta produttività. VS Code ha un ricco set di scorciatoie da tastiera predefinite, oltre a permetterti di personalizzarle.

• Riferimento delle scorciatoie da tastiera – Impara le scorciatoie da tastiera più comunemente usate e popolari scaricando il foglio di riferimento.
• Installa un’estensione Keymap – Usa le scorciatoie da tastiera del tuo vecchio editor (come Sublime Text, Atom e Vim) in VS Code installando un’estensione Keymap.
• Personalizza le scorciatoie da tastiera – Cambia le scorciatoie da tastiera predefinite per adattarle al tuo stile.

Selezioni multiple (multi-cursore)

VS Code supporta più cursori per veloci modifiche simultanee. Puoi aggiungere cursori secondari (resi più sottili) con Alt+Click. Ogni cursore opera indipendentemente in base al contesto in cui si trova. Un modo comune per aggiungere più cursori è con ⌥⌘↓ (Windows Ctrl+Alt+Down, Linux Shift+Alt+Down) o ⌥⌘ (Windows Ctrl+Alt+Up, Linux Shift+Alt+Up) che inseriscono cursori sotto o sopra.

Nota: Il driver della tua scheda grafica (per esempio NVIDIA) potrebbe sovrascrivere queste scorciatoie predefinite.

⌘D (Windows, Linux Ctrl+D) seleziona la parola al cursore, o la prossima ricorrenza della selezione corrente.

Tip: Puoi anche aggiungere più cursori con ⇧⌘L (Windows, Linux Ctrl+Shift+L), che aggiunge una selezione ad ogni occorrenza del testo correntemente selezionato.

Modificatore multi-cursore

Se vuoi cambiare il tasto modificatore per applicare cursori multipli a Cmd+Click su macOS e Ctrl+Click su Windows e Linux, puoi farlo con l’impostazione editor.multiCursorModifier. Questo permette agli utenti provenienti da altri editor come Sublime Text o Atom di continuare ad usare il modificatore da tastiera con cui hanno familiarità.

L’impostazione può essere impostata su:

• ctrlCmd – Corrisponde a Ctrl su Windows e Cmd su macOS.
• alt – L’esistente predefinito Alt.

C’è anche una voce di menu Use Ctrl+Click for Multi-Cursor nel menu Selection per attivare rapidamente questa impostazione.

I gesti Go To Definition e Open Link rispetteranno anche questa impostazione e si adatteranno in modo da non entrare in conflitto. Per esempio, quando l’impostazione è ctrlCmd, i cursori multipli possono essere aggiunti con Ctrl/Cmd+Click, e l’apertura dei link o l’andare alla definizione possono essere invocati con Alt+Click.

Riduci/espandi la selezione

Riduci rapidamente o espandi la selezione corrente. Attiva con ⌃⇧⌘← (Windows, Linux Shift+Alt+Left) e ⌃⇧⌘→ (Windows, Linux Shift+Alt+Right).

Ecco un esempio di espansione della selezione con ⌃⇧⌘→ (Windows, Linux Shift+Alt+Destra):

Selezione colonna (box)

Posiziona il cursore in un angolo e poi tieni premuto Shift+Alt mentre trascini nell’angolo opposto:

Nota: Questo cambia in Shift+Ctrl/Cmd quando si usa Ctrl/Cmd come modificatore multi-cursore.

Ci sono anche associazioni di tasti predefinite per la selezione delle colonne su macOS e Windows, ma non su Linux.

Tasto	Comando	ID comando
⇧⌥⌘↓ (Windows Ctrl+Shift+Alt+Down, Linux )	Selezione colonna giù	cursorColumnSelectDown
⇧⌥⌘↓ (Windows Ctrl+Shift+Alt+Up, Linux )	Selezione colonna su	cursorColumnSelectUp
⇧⌥⌘← (Windows Ctrl+Shift+Alt+Left, Linux )	Selezione colonna a sinistra	cursorColumnSelectLeft
⇧⌥⌘→ (Windows Ctrl+Shift+Alt+Destra, Linux )	Selezione colonna a destra	cursorColumnSelectRight
⇧⌥⌘PageDown (Windows Ctrl+Shift+Alt+PageDown, Linux )	Selezione colonna pagina giù	cursorColumnSelectPageDown
⇧⌥⌘PageUp (Windows Ctrl+Shift+Alt+PageUp, Linux )	Column Select Page Up	cursorColumnSelectPageUp

Puoi modificare i tuoi keybindings.json per legarli a qualcosa di più familiare, se vuoi.

Modalità selezione colonne

L’impostazione utente Editor: Column Selection controlla questa funzione. Una volta che questa modalità è inserita, come indicato nella barra di stato, i gesti del mouse e i tasti freccia creeranno una selezione di colonne per impostazione predefinita. Questa commutazione globale è accessibile anche tramite la voce di menu Selection > Column Selection Mode. Inoltre, si può anche disabilitare la modalità di selezione delle colonne dalla barra di stato.

Save / Auto Save

Di default, VS Code richiede un’azione esplicita per salvare le tue modifiche sul disco, ⌘S (Windows, Linux Ctrl+S).

Tuttavia, è facile attivare Auto Save, che salverà le tue modifiche dopo un ritardo configurato o quando il focus lascia l’editor. Con questa opzione attivata, non c’è bisogno di salvare esplicitamente il file. Il modo più semplice per attivare Auto Save è con il toggle File > Auto Save che attiva e disattiva il salvataggio dopo un ritardo.

Per un maggiore controllo su Auto Save, apri le impostazioni Utente o Area di lavoro e trova le impostazioni associate:

• files.autoSave: Può avere i valori:
  • off – per disabilitare il salvataggio automatico.
  • afterDelay – per salvare i file dopo un ritardo configurato (default 1000 ms).
  • onFocusChange – per salvare i file quando il focus esce dall’editor del file sporco.
  • onWindowChange – per salvare i file quando il focus esce dalla finestra VS Code.
• files.autoSaveDelay: Configura il ritardo in millisecondi quando files.autoSave è configurato su afterDelay. L’impostazione predefinita è 1000 ms.

Hot Exit

VS Code ricorda le modifiche non salvate ai file quando si esce per default. L’uscita a caldo viene attivata quando l’applicazione viene chiusa tramite File > Esci (Codice > Esci su macOS) o quando viene chiusa l’ultima finestra.

Puoi configurare l’uscita a caldo impostando files.hotExit ai seguenti valori:

• "off": Disabilita l’uscita a caldo.
• "onExit": L’uscita a caldo sarà attivata quando l’applicazione viene chiusa, cioè quando l’ultima finestra viene chiusa su Windows/Linux o quando viene attivato il comando workbench.action.quit (dalla Command Palette, scorciatoia da tastiera o menu). Tutte le finestre senza cartelle aperte saranno ripristinate al prossimo avvio.
• "onExitAndWindowClose": L’uscita a caldo sarà attivata quando l’applicazione viene chiusa, cioè quando l’ultima finestra viene chiusa su Windows/Linux o quando viene attivato il comando workbench.action.quit (dalla paletta dei comandi, scorciatoia da tastiera o menu), e anche per qualsiasi finestra con una cartella aperta, indipendentemente dal fatto che sia l’ultima finestra. Tutte le finestre senza cartelle aperte saranno ripristinate al prossimo avvio. Per ripristinare le finestre delle cartelle come erano prima dello spegnimento, imposta window.restoreWindows su all.

Se qualcosa va storto con l’uscita a caldo, tutti i backup sono memorizzati nelle seguenti cartelle per le posizioni di installazione standard:

• Windows %APPDATA%\Code\Backups
• macOS $HOME/Library/Application Support/Code/Backups
• Linux $HOME/.config/Code/Backups

Trova e sostituisci

VS Code permette di trovare rapidamente il testo e sostituirlo nel file attualmente aperto. Premi ⌘F (Windows, Linux Ctrl+F) per aprire il Find Widget nell’editor, i risultati della ricerca saranno evidenziati nell’editor, nel righello d’insieme e nella minimappa.

Se c’è più di un risultato trovato nel file correntemente aperto, puoi premere Invio e ⇧Enter (Windows, Linux Shift+Enter) per passare al risultato successivo o precedente quando la casella di input del find è focalizzata.

Seed Search String From Selection

Quando il Find Widget è aperto, esso popolerà automaticamente il testo selezionato nell’editor nella casella di input find. Se la selezione è vuota, la parola sotto il cursore sarà invece inserita nella casella di input.

Questa caratteristica può essere disattivata impostando editor.find.seedSearchStringFromSelection a false.

Find In Selection

Di default, le operazioni di ricerca vengono eseguite sull’intero file nell’editor. Possono anche essere eseguite sul testo selezionato. Puoi attivare questa funzione cliccando l’icona hamburger sul Find Widget.

Se vuoi che sia il comportamento predefinito del Find Widget, puoi impostare editor.find.autoFindInSelection a always, o a multiline, se vuoi che sia eseguito sul testo selezionato solo quando sono selezionate più righe di contenuto.

Opzioni avanzate per trovare e sostituire

Oltre a trovare e sostituire con testo normale, il Find Widget ha anche tre opzioni di ricerca avanzate:

• Catch Case
• Match Whole Word
• Regular Expression

La casella di input replace supporta la conservazione del caso, puoi attivarla cliccando il pulsante Preserve Case (AB).

Supporto multilinea e ridimensionamento del Find Widget

Puoi cercare testo su più righe incollando il testo nella casella di input Find e Replace. Premendo Ctrl+Enter si inserisce una nuova riga nella casella di input.

Nella ricerca di testo lungo, la dimensione predefinita del Find Widget potrebbe essere troppo piccola. Puoi trascinare la fascia sinistra per ingrandire il Find Widget o fare doppio clic sulla fascia sinistra per massimizzarlo o ridurlo alla sua dimensione predefinita.

Ricerca tra i file

VS Code ti permette di cercare rapidamente tra tutti i file nella cartella attualmente aperta. Premi ⇧⌘F (Windows, Linux Ctrl+Shift+F) e inserisci il tuo termine di ricerca. I risultati della ricerca sono raggruppati in file che contengono il termine di ricerca, con un’indicazione dei risultati in ogni file e la sua posizione. Espandi un file per vedere un’anteprima di tutti i risultati all’interno di quel file. Poi fai clic su uno dei risultati per visualizzarlo nell’editor.

Suggerimento: supportiamo anche la ricerca con espressioni regolari nella casella di ricerca.

Puoi configurare opzioni di ricerca avanzate cliccando sull’ellissi (Toggle Search Details) sotto la casella di ricerca sulla destra (o premendo ⇧⌘J (Windows, Linux Ctrl+Shift+J)). Questo mostrerà ulteriori campi per configurare la ricerca.

Opzioni di ricerca avanzate

Nelle due caselle di input sotto la casella di ricerca, puoi inserire modelli da includere o escludere dalla ricerca. Se inserisci example, questo corrisponderà ad ogni cartella e file chiamato example nell’area di lavoro. Se inserisci ./example, questo corrisponderà alla cartella example/ al livello superiore del tuo spazio di lavoro. Usa , per separare schemi multipli. I percorsi devono usare barre in avanti. Puoi anche usare la sintassi glob:

• * per far corrispondere uno o più caratteri in un segmento di percorso
• ? per far corrispondere un carattere in un segmento di percorso
• ** per far corrispondere qualsiasi numero di segmenti di percorso, compreso nessuno
• {} per raggruppare le condizioni (per esempio {**/*.html,**/*.txt} corrisponde a tutti i file HTML e di testo)
• per dichiarare un intervallo di caratteri da abbinare (example. per abbinare su example.0, example.1, …)

VS Code esclude di default alcune cartelle per ridurre il numero di risultati di ricerca che non ti interessano (per esempio: node_modules). Apri le impostazioni per cambiare queste regole nella sezione files.exclude e search.exclude.

Nota che i modelli di glob nella vista di ricerca funzionano diversamente che nelle impostazioni come files.exclude e search.exclude. Nelle impostazioni, devi usare **/example per trovare una cartella chiamata example nella sottocartella folder1/example del tuo spazio di lavoro. Nella vista di ricerca, si assume il prefisso **.

Nota anche il pulsante Use Exclude Settings e Ignore Files toggle nella casella dei file da escludere. Il toggle determina se escludere i file che sono ignorati dai tuoi .gitignore file e/o abbinati alle tue impostazioni files.exclude e search.exclude.

Tip: Da Explorer, puoi cliccare con il tasto destro su una cartella e selezionare Trova nella cartella per cercare solo all’interno di una cartella.

Cerca e sostituisci

Puoi anche cercare e sostituire tra i file. Espandi il widget Ricerca per visualizzare la casella di testo Sostituisci.

Quando digiti del testo nella casella di testo Sostituisci, vedrai un display diff delle modifiche in sospeso. Puoi sostituire tutti i file dalla casella di testo Sostituisci, sostituire tutto in un file o sostituire una singola modifica.

Suggerimento: puoi riutilizzare velocemente un termine di ricerca precedente usando ↓ (Windows, Linux giù) e (Windows, Linux su) per navigare nella tua storia dei termini di ricerca.

IntelliSense

Offriremo sempre il completamento delle parole, ma per i linguaggi ricchi, come JavaScript, JSON, HTML, CSS, SCSS, Less, C# e TypeScript, offriamo una vera esperienza IntelliSense. Se un servizio linguistico conosce possibili completamenti, i suggerimenti di IntelliSense appariranno mentre si digita. Puoi sempre attivarlo manualmente con ⌃Space (Windows, Linux Ctrl+Space). Per impostazione predefinita, Tab o Invio sono i comandi da tastiera accettati, ma puoi anche personalizzare queste associazioni di tasti.

Suggerimento: il filtro dei suggerimenti supporta CamelCase, quindi puoi digitare le lettere maiuscole nel nome di un metodo per limitare i suggerimenti. Per esempio, “cra” porterà rapidamente a “createApplication”.

Suggerimento: I suggerimenti di IntelliSense possono essere configurati tramite le impostazioni editor.quickSuggestions e editor.suggestOnTriggerCharacters.

Gli sviluppatori JavaScript e TypeScript possono sfruttare il repository di file npmjs type declaration (typings) per ottenere IntelliSense per le comuni librerie JavaScript (Node.js, React, Angular). Puoi trovare una buona spiegazione sull’uso dei file di dichiarazione dei tipi nell’argomento sul linguaggio JavaScript e nel tutorial su Node.js.

Impara di più nel documento IntelliSense.

Formattazione

VS Code ha un grande supporto per la formattazione del codice sorgente. L’editor ha due azioni di formattazione esplicite:

• Format Document (⇧⌥F (Windows Shift+Alt+F, Linux Ctrl+Shift+I)) – Formatta l’intero file attivo.
• Format Selection (⌘K ⌘F (Windows, Linux Ctrl+K Ctrl+F)) – Formatta il testo selezionato.

Puoi invocarli dalla paletta dei comandi (⇧⌘P (Windows, Linux Ctrl+Shift+P)) o dal menu contestuale dell’editor.

VS Code ha formattatori di default per JavaScript, TypeScript, JSON e HTML. Ogni lingua ha opzioni di formattazione specifiche (per esempio, html.format.indentInnerHtml) che puoi sintonizzare secondo le tue preferenze nelle impostazioni dell’utente o dello spazio di lavoro. Puoi anche disabilitare il formattatore di lingua predefinito se hai un’altra estensione installata che fornisce la formattazione per la stessa lingua.

"html.format.enable": false

Oltre ad invocare manualmente la formattazione del codice, puoi anche attivare la formattazione in base ai gesti dell’utente come digitare, salvare o incollare. Questi sono disattivati per impostazione predefinita, ma puoi abilitare questi comportamenti attraverso le seguenti impostazioni:

• editor.formatOnType – Formatta la riga dopo la digitazione.
• editor.formatOnSave – Formatta un file al salvataggio.
• editor.formatOnPaste – Formatta il contenuto incollato.

Nota: Non tutti i formattatori supportano la formattazione su incolla perché per farlo devono supportare la formattazione di una selezione o di un intervallo di testo.

In aggiunta ai formattatori di default, puoi trovare estensioni sul Marketplace per supportare altre lingue o strumenti di formattazione. C’è una categoria Formatters in modo da poter cercare e trovare facilmente le estensioni di formattazione. Nella casella di ricerca della vista Estensioni, digitate ‘formatters’ o ‘category:formatters’ per vedere un elenco filtrato di estensioni all’interno di VS Code.

Folding

Potete piegare regioni di codice sorgente usando le icone di piegatura sulla grondaia tra i numeri di linea e l’inizio linea. Muovi il mouse sopra la grondaia e clicca per piegare e dispiegare le regioni. Usa Shift + Click sull’icona di piegatura per piegare o dispiegare la regione e tutte le regioni all’interno.

Puoi anche usare le seguenti azioni:

• Fold (⌥⌘ (Windows, Linux Ctrl+Shift+])) apre la regione collassata al cursore.
• Toggle Fold (⌘K ⌘L (Windows, Linux Ctrl+K Ctrl+L)) piega o dispiega la regione al cursore.
• Fold Recursively (⌘K ⌘ (Windows, Linux Ctrl+K Ctrl+]) dispiega la regione al cursore e tutte le regioni dentro quella regione.
• Fold All (⌘K ⌘0 (Windows, Linux Ctrl+K Ctrl+0)) piega tutte le regioni nell’editor.
• Unfold All (⌘K ⌘J (Windows, Linux Ctrl+K Ctrl+J)) apre tutte le regioni nell’editor.
• Fold Level X (⌘K ⌘2 (Windows, Linux Ctrl+K Ctrl+2) per il livello 2) piega tutte le regioni del livello X, tranne la regione nella posizione corrente del cursore.
• Fold All Block Comments (⌘K ⌘/ (Windows, Linux Ctrl+K Ctrl+/)) ripiega tutte le regioni che iniziano con un token di commento a blocchi.

Le regioni di ripiegamento sono valutate per default in base all’indentazione delle linee. Una regione di ripiegamento inizia quando una riga ha un rientro più piccolo di una o più righe successive, e termina quando c’è una riga con un rientro uguale o più piccolo.

Dalla versione 1.22, le regioni di ripiegamento possono anche essere calcolate in base ai token di sintassi del linguaggio configurato dall’editor. I seguenti linguaggi forniscono già una piegatura consapevole della sintassi: Markdown, HTML, CSS, LESS, SCSS e JSON.

Se si preferisce tornare al folding basato sull’indentazione per uno (o tutti) i linguaggi di cui sopra, usare:

 "": { "editor.foldingStrategy": "indentation" },

Le regioni possono anche essere definite da marcatori definiti da ciascun linguaggio. Le seguenti lingue hanno attualmente dei marcatori definiti:

Lingua	Regione iniziale	Regione finale
Bat	::#region o REM #region	::#endregion o REM #endregion
C#	#region	#endregion
C/C++	#pragma region	#pragma endregion
CSS/Less/SCSS	/*#region*/	/*#endregion*/
Coffeescript	#region	#endregion
F#	//#region o (#_region)	//#endregion o (#_endregion)
Java	//#region o //<editor-fold>	// #endregion o //</editor-fold>
Markdown	<!-- #region -->	<!-- #endregion -->
Perl5	#region o =pod	#endregion o =cut
PHP	#region	#endregion
PowerShell	#region	#endregion
Python	#region o # region	#endregion o # endregion
TypeScript/JavaScript	//#region	//#endregion
Visual Basic	#Region	#End Region

Per piegare e dispiegare solo le regioni definite dai marcatori usare:

• Fold Marker Regions (⌘K ⌘8 (Windows, Linux Ctrl+K Ctrl+8)) piega tutte le regioni marker.
• Unfold Marker Regions (⌘K ⌘9 (Windows, Linux Ctrl+K Ctrl+9)) dispiega tutte le regioni marker.

Indentazione

VS Code ti permette di controllare l’indentazione del testo e se vuoi usare spazi o tab stop. Per impostazione predefinita, VS Code inserisce spazi e usa 4 spazi per ogni tasto Tab. Se volete usare un altro default, potete modificare le impostazioni editor.insertSpaces e editor.tabSize.

 "editor.insertSpaces": true, "editor.tabSize": 4,

Rilevamento automatico

VS Code analizza il vostro file aperto e determina il rientro usato nel documento. L’indentazione rilevata automaticamente sovrascrive le tue impostazioni di indentazione predefinite. L’impostazione rilevata viene visualizzata sul lato destro della barra di stato:

Puoi cliccare sulla visualizzazione dell’indentazione della barra di stato per far apparire un menu a tendina con i comandi di indentazione che ti permettono di cambiare le impostazioni predefinite per il file aperto o convertire tra tab stop e spazi.

Nota: Il rilevamento automatico di VS Code controlla per rientri di 2, 4, 6 o 8 spazi. Se il vostro file usa un numero diverso di spazi, l’indentazione potrebbe non essere rilevata correttamente. Per esempio, se la vostra convenzione è di rientrare con 3 spazi, potreste voler disattivare editor.detectIndentation e impostare esplicitamente la dimensione della tabulazione a 3.

 "editor.detectIndentation": false, "editor.tabSize": 3,

Supporto alla codifica dei file

Imposta la codifica dei file globalmente o per area di lavoro usando l’impostazione files.encoding in Impostazioni utente o Impostazioni area di lavoro.

Puoi visualizzare la codifica dei file nella barra di stato.

Clicca sul pulsante codifica nella barra di stato per riaprire o salvare il file attivo con una codifica diversa.

Poi scegli una codifica.

Hai coperto l’interfaccia utente di base – c’è molto altro in VS Code. Continua a leggere per scoprire:

• Video introduttivo – Impostazione e basi – Guarda un tutorial sulle basi di VS Code.
• Impostazioni utente/spazio di lavoro – Impara come configurare VS Code secondo le tue preferenze attraverso le impostazioni dell’utente e dello spazio di lavoro.
• Navigazione del codice – Definizione Peek and Goto, e altro.
• Terminale integrato – Impara il terminale integrato per eseguire rapidamente le attività della riga di comando dall’interno di VS Code.
• IntelliSense – VS Code porta il completamento intelligente del codice.
• Debugging – Questo è dove VS Code brilla veramente.

Domande comuni

È possibile cercare e sostituire globalmente?

Sì, espandete la casella di testo della vista Ricerca per includere un campo di testo di sostituzione. Puoi cercare e sostituire in tutti i file nel tuo spazio di lavoro. Nota che se non hai aperto VS Code su una cartella, la ricerca verrà eseguita solo sui file attualmente aperti.

Come faccio ad attivare il word wrap?

Puoi controllare il word wrap attraverso l’impostazione editor.wordWrap. Per impostazione predefinita, editor.wordWrap è off, ma se lo imposti a on, il testo andrà a capo sulla larghezza della finestra dell’editor.

 "editor.wordWrap": "on"

Puoi attivare il word wrap per la sessione VS Code con ⌥Z (Windows, Linux Alt+Z).

Puoi anche aggiungere righelli di colonna verticali all’editor con l’impostazione editor.rulers, che prende un array di posizioni di caratteri di colonna dove vorresti i righelli verticali.