Codice di Visual Studio: aumento della produttività tramite la gestione delle associazioni chiave

Codice di Visual Studio, l'editor di codice sorgente leggero di Microsoft introduce la navigazione solo da tastiera che non è solo una funzionalità di accessibilità avanzata, consentendo agli utenti di navigare all'interno dell'editor senza mouse, ma anche di accelerare la codifica .

Nel post di oggi, approfondiremo come gestire efficacemente le associazioni di tasti in VS Code, dare un'occhiata a un elenco aggiornato delle scorciatoie da tastiera più comunemente usate e vedere un esempio su come è possibile creare le proprie chiavi personalizzate.

Trova rapidamente le associazioni dei tasti

Non devi necessariamente imparare a memoria le scorciatoie da tastiera quando inizi a utilizzare VS Code, poiché ci sono due semplici modi per trovarle rapidamente.

Nella barra dei menu in alto, è possibile trovare il binding dei tasti preimpostato accanto a ogni punto del menu (1) e anche la Command Palette (F1) li elenca accanto a ciascun comando (2).

Visual Studio Code mostra i binding di tasti che corrispondono al tuo sistema operativo per impostazione predefinita (quindi su una macchina Windows vedrai i comandi di Windows, su un Mac i comandi Mac, e su una macchina Linux i comandi di Linux).

Se non ti dispiace lasciare il tuo editor di codice, puoi anche trovare l' elenco completo dei binding di tasti preimpostati nel documento VS Code.

Preset Key Bindings

Visual Studio Code fornisce agli sviluppatori molti binding di tasti, nella lista che segue ho curato quelli che ho usato più spesso durante la modifica dei file JavaScript. Potresti scoprire che altri si adattano meglio al tuo flusso di lavoro, quindi vale anche la pena di sfogliare l'elenco completo da solo.

Tutti i binding chiave possono essere personalizzati in VS Code, daremo un'occhiata a come farlo nell'ultima parte di questo articolo.

Ora vediamo 36 scorciatoie da tastiera usate frequentemente, rispettivamente per i 3 sistemi operativi principali (Win, OS X, Linux), molti dei quali potrebbero essere familiari con altri software Microsoft.

Navigazione

1. F1 (Win, Linux, Mac) - Command Palette, mostra tutti i comandi di cui puoi selezionarne uno, oppure puoi anche digitare un comando da solo
2. Ctrl + P (Win, Linux), Cmd + P (Mac) - Apertura rapida, Vai al file
3. Ctrl + Shift + O (Win, Linux), Shift + Cmd + O (Mac) - Mostra un elenco di tutti i simboli (come funzioni, prototipi, ecc.) Nel file corrente
4. Ctrl + G (Win, Linux, Mac) - Vai a una linea specifica
5. Ctrl + Maiusc + M (Win, Linux), Maiusc + Cmd + M (Mac) - Mostra tutti gli errori e gli avvisi
6. Alt + Sinistra (Win), Ctrl + - (Mac), Ctrl + Alt + - (Linux) - Indietro, il cursore torna alla posizione precedente
7. Alt + Destra (Win), Ctrl + Shift + - (Mac), Ctrl + Shift + - (Linux) - Vai avanti, il cursore salta in avanti alla sua prossima posizione
8. ? (Win, Linux, Mac) - I comandi disponibili per il file corrente all'interno del Command Palette (prima di usare questo, è necessario aprire Command Palette (F1)

Gestione di file e editor

È possibile trovare l'elenco completo di questa sezione in due diversi punti nei documenti del codice VS, in Editor / Gestione finestre e in Gestione file.

VS Code può aprire 3 riquadri di editor contemporaneamente; i comandi da # 5 a # 7 funzionano solo se sono aperti più riquadri di editor.

1. Ctrl + N (Win, Linux), Cmd + N (Mac) - Nuovo file
2. Ctrl + O (Win, Linux) - Apri il file
3. Ctrl + S (Win, Linux), Cmd + S (Mac) - Salva
4. Ctrl + \ (Win, Linux), Cmd + \ (Mac) - Editor diviso
5. Ctrl + 1 (Win, Linux), Cmd + 1 (Mac) - Metti a fuoco nel primo riquadro dell'editor
6. Ctrl + 2 (Win, Linux), Cmd + 2 (Mac) - Metti a fuoco nel secondo riquadro dell'editor
7. Ctrl + 3 (Win, Linux), Cmd + 3 (Mac): focus nel terzo riquadro dell'editor

Editing di base

Per fare in modo che le combinazioni di tasti qui sotto funzionino, non è necessario evidenziare l'intera linea, è sufficiente spostare il cursore in qualsiasi punto della linea che si desidera modificare.

1. Ctrl + X (Win, Linux), Cmd + X (Mac) - Linea di taglio
2. Ctrl + C (Win, Linux), Cmd + C (Mac) - Copia riga
3. Ctrl + Maiusc + K (Win, Linux), Maiusc + Cmd + K (Mac) - Elimina riga
4. Alt + Giù (Win, Linux), Opzione + Giù (Mac) - Sposta la linea in basso
5. Alt + Up (Win, Linux), Option + Up (Mac) - Sposta in linea
6. Ctrl + I (Win, Linux), Cmd + I (Mac) - Seleziona la riga corrente
7. Ctrl +] (Win, Linux), Cmd +] (Mac) - Rientro
8. Ctrl + [(Win, Linux), Cmd + [(Mac) - Linea Outdent

Editing di Rich Languages

Attualmente, a partire da maggio 2016, VS Code ha un supporto di modifica avanzato per JavaScript e TypeScript, ma è possibile scaricare estensioni del supporto linguistico per molte altre lingue dal VS Code Marketplace.

Qui nel documento puoi verificare le opzioni disponibili per la lingua che desideri utilizzare. Si noti che, poiché VS Code è ancora ai suoi esordi, è possibile che il supporto per la modifica sia disponibile anche per altre lingue.

1. Ctrl + Spazio (Win, Linux, Mac) - suggerimento trigger
2. Ctrl + Maiusc + Spazio (Win, Linux), Maiusc + Cmd + Spazio (Mac) - Suggerimenti sui parametri di trigger
3. Alt + F12 (Win), Opzione + F12 (Mac), Ctrl + Shift + F10 (Linux) - Definizione Peek
4. Maiusc + F12 (Win, Linux, Mac) - Mostra riferimenti
5. Ctrl + Maiusc + X (Win, Linux), Maiusc + Cmd + X (Mac) - Riduci lo spazio vuoto finale

Display

1. F11 (Win, Linux), Ctrl + Cmd + F (Mac) - Passa a schermo intero
2. Ctrl + = (Win, Linux), Cmd + = (Mac) - Ingrandisci
3. Ctrl + - (Win, Linux), Cmd + - (Mac) - Zoom indietro
4. Ctrl + B (Win, Linux), Cmd + B (Mac) - Attiva la visibilità della barra laterale
5. Ctrl + Maiusc + D (Win, Linux), Maiusc + Cmd + D (Mac) - Mostra Debug nella barra laterale (a sinistra)
6. Ctrl + Maiusc + E (Win, Linux), Maiusc + Cmd + E (Mac) - Mostra Explorer nella barra laterale (a sinistra)
7. Ctrl + Shift + G (Win, Linux, Mac) - Mostra Git nella barra laterale (a sinistra)
8. Ctrl + Maiusc + F (Win, Linux), Maiusc + Cmd + F (Mac) - Mostra ricerca nella barra laterale (a sinistra)

Come personalizzare i binding di tasti in VS Code

Personalizzare i binding di tasti può essere utile per tre cose principali.

In primo luogo, se ci si è già abituati a determinate scorciatoie da tastiera in un editor di codice diverso, non è necessario conoscerne di nuove.

In secondo luogo, alcuni dei binding di tasti preimpostati sono troppo difficili da ricordare, ad esempio prendi la scorciatoia Windows Ctrl + K + F12 per il comando Apri definizione a lato.

In terzo luogo, ci sono anche associazioni di tasti non assegnate in VS Code, come Open User Settings, e Open Works Works Settings (trovale qui nel documento) che potresti voler usare.

È possibile personalizzare i collegamenti dei tasti con l'aiuto di un file di configurazione in formato JSON, in un modo simile a come è possibile personalizzare le impostazioni Utente e Area di lavoro. Il file che devi modificare è chiamato keybindings.json e puoi aprirlo facendo clic sul menu File> Preferenze> Tasti di scelta rapida nella barra dei menu in alto.

Quando si fa clic su di esso, VS Code apre due riquadri di editor uno accanto all'altro, uno per le scorciatoie da tastiera predefinite a sinistra e uno per i collegamenti di tasti personalizzati sulla destra.

Non devi fare altro, basta copiare e incollare le chiavi da sinistra a destra mantenendo il formato JSON e riscrivere la chiave su quella personalizzata.

Vediamo un rapido esempio. Supponiamo che tu voglia accedere facilmente al comando Show Installed Extensions che non ha un binding assegnato a chiave per impostazione predefinita. In questo caso, non è sufficiente copiare e incollare solo da sinistra a destra, poiché le chiavi non assegnate non sono incluse nell'elenco predefinito.

È necessario attenersi ai collegamenti dei tasti di sintassi seguiti nel codice di Visual Studio:

 {"chiave": "", "quando": "", "comando": ""} 

Guarda alcuni esempi di vita reale su come impostare correttamente le regole della tastiera. Quando una parte è facoltativa, non è necessario utilizzarla per impostare i collegamenti a chiave globale, viene utilizzata solo quando una determinata scorciatoia è associata a una determinata schermata o modalità, come nel caso di inDebugMode.

Nel nostro esempio, imposterai una chiave globale vincolante, il che significa che dobbiamo solo impostare i valori di "chiave" e "comando" nella nostra regola di tastiera personalizzata.

Per prima cosa, cerchiamo l'id del comando che appartiene al comando Show Installed Extension. Possiamo farlo facilmente nei documenti, che ci mostra che l'id di comando di cui abbiamo bisogno è workbench.extensions.action.listExtensions.

L'altro pezzo di dati di cui abbiamo bisogno è la chiave. La chiave personalizzata che legheremo al comando Show Installed Extension non può essere utilizzata da nessun'altra regola di associazione chiavi e deve seguire la sintassi corretta della chiave, il che significa che deve essere composta da un modificatore (vedere i modificatori accettati dal sistema operativo) e la chiave stessa.

Mentre lavoro su una macchina Windows, sceglierò il tasto Ctrl + F6, poiché soddisfa tutti i requisiti, ma puoi scegliere qualsiasi altra chiave adatta alle tue esigenze.

Il mio file keybindings.json sarà simile al seguente:

 // Posiziona i tuoi binding di chiavi in ​​questo file per sovrascrivere i valori di default [{"key": "Ctrl + f6", "command": "workbench.extensions.action.listExtensions"}] 

La nuova regola ha effetto immediato, poiché il codice di Visual Studio aggiorna le regole in fase di runtime . Puoi testarlo senza riavviare l'editor, devi solo premere Ctrl + F6 o il tasto che hai scelto, e un elenco delle estensioni installate apparirà nell'editor.

Nello screenshot qui sotto, puoi vedere i miei risultati dei test, premendo Ctrl + F6, ho ottenuto un elenco delle due estensioni che attualmente ho.

È possibile aggiungere tutte le regole che si desidera al file keybindings.json. Basta seguire la normale sintassi JSON, il che significa che è necessario posizionare ciascuna regola all'interno di un paio di parentesi graffe e separarle con una virgola, come si può vedere di seguito.

 // Posiziona i tuoi binding di chiavi in ​​questo file per sovrascrivere i valori di default [{"key": "Ctrl + f6", "command": "workbench.extensions.action.listExtensions"}, {"key": "Shift + f6", "comando": "workbench.extensions.action.installExtension"}]