Visual Studio Code Verhoging van de productiviteit via Key Binding Management

Visual Studio Code, de lichtgewicht broncode-editor van Microsoft, introduceert alleen toetsenbord dat is niet alleen een geavanceerde toegankelijkheidsfunctie, zodat gebruikers zonder een muis binnen de editor kunnen navigeren, maar ook versnelt codering.

In de post van vandaag zullen we ingaan op hoe effectief beheren van de belangrijkste bindingen in de VS-code, bekijk een samengestelde lijst met de meest gebruikte sneltoetsen en bekijk een voorbeeld van hoe u uw eigen aangepaste sleutels kunt maken.

Snel vinden van sneltoetsen

U hoeft niet per se de toetsenbordsneltoetsen uit het hoofd te leren wanneer u de VS-code begint te gebruiken, omdat er twee eenvoudige manieren zijn om ze snel te vinden.

In de bovenste menubalk vindt u de voorinstellingstoets naast elke binding menupunt (1) en het opdrachtpalet (F1) geeft ze ook weer naast elke opdracht (2).

Visual Studio Code geeft de belangrijkste bindingen weer die overeenkomen met uw besturingssysteem standaard (dus op een Windows-computer zie je de Windows-opdrachten, op een Mac de Mac-opdrachten en in een Linux-box de Linux-opdrachten).

Als je het niet erg vindt om je code-editor te verlaten, kun je ook de volledige lijst van vooraf ingestelde sneltoetsen in de VS Code Docs.

Vooraf ingestelde sneltoetsen

Visual Studio Code biedt ontwikkelaars veel toetscombinaties, in de volgende lijst heb ik de bestanden samengesteld die ik het vaakst heb gebruikt bij het bewerken van JavaScript-bestanden. Misschien merk je dat anderen beter bij je eigen workflow passen, dus het is ook de moeite waard om zelf de volledige lijst te bekijken.

Alle sleutelbindingen kunnen worden aangepast in de VS-code, we zullen kijken hoe dit in het laatste deel van dit artikel wordt gedaan.

Laten we nu eens kijken 36 veelgebruikte sneltoetsen, respectievelijk voor de 3 belangrijkste besturingssystemen (Win, OS X, Linux), waarvan er veel bekend kunnen zijn uit andere Microsoft-software.

Navigatie

1. F1 (Win, Linux, Mac) - Command Palet, toont alle commando's waarvan je er een kunt selecteren, of je kunt ook zelf een commando typen
2. Ctrl + P (Win, Linux), Cmd + P (Mac) - Snel openen, Ga naar bestand
3. Ctrl + Shift + O (Win, Linux), Shift + Cmd + O (Mac) - Toon een lijst met alle symbolen (zoals functies, prototypen, etc.) in het huidige bestand
4. Ctrl + G (Win, Linux, Mac) - Ga naar een specifieke regel
5. Ctrl + Shift + M (Win, Linux), Shift + Cmd + M (Mac) - Toon alle fouten en waarschuwingen
6. Alt + Links (Win), Ctrl + - (Mac), Ctrl + Alt + - (Linux) - Ga terug, de cursor springt terug naar de vorige locatie
7. Alt + Rechts (Win), Ctrl + Shift + - (Mac), Ctrl + Shift + - (Linux) - Ga vooruit, de cursor springt naar voren naar de volgende locatie
8. ? (Win, Linux, Mac) - Opdrachten die beschikbaar zijn voor het huidige bestand in het opdrachtenpalet (voordat u dit gebruikt, moet u het opdrachtpalet openen (F1)

Bestands- en editorbeheer

U vindt de volledige lijst voor dit gedeelte op twee verschillende plaatsen in de VS-codedocumenten, in Editor / Window Management en in Bestandsbeheer..

VS Code kan tegelijkertijd 3 bewerkingsvensters openen, de opdrachten # 5 tot en met # 7 werken alleen als er meer dan één bewerkingsvenster is geopend.

1. Ctrl + N (Win, Linux), Cmd + N (Mac) - Nieuw bestand
2. Ctrl + O (Win, Linux) - Open bestand
3. Ctrl + S (Win, Linux), Cmd + S (Mac) - Opslaan
4. Ctrl + \ (Win, Linux), Cmd + \ (Mac) - Split-editor
5. Ctrl + 1 (Win, Linux), Cmd + 1 (Mac) - Focus op het eerste bewerkingsvenster
6. Ctrl + 2 (Win, Linux), Cmd + 2 (Mac) - Focus op het tweede bewerkingsvenster
7. Ctrl + 3 (Win, Linux), Cmd + 3 (Mac) - Focus op het derde editorpaneel

Basisbewerking

Om de belangrijkste bindings onder te laten werken, hoeft u niet de hele regel te markeren, het is voldoende om de cursor overal in de regel te navigeren die u wilt bewerken.

1. Ctrl + X (Win, Linux), Cmd + X (Mac) - Snijlijn
2. Ctrl + C (Win, Linux), Cmd + C (Mac) - Kopieerregel
3. Ctrl + Shift + K (Win, Linux), Shift + Cmd + K (Mac) - Lijn verwijderen
4. Alt + Omlaag (Win, Linux), Optie + Omlaag (Mac) - Lijn naar beneden verplaatsen
5. Alt + Up (Win, Linux), Option + Up (Mac) - Lijn naar boven
6. Ctrl + I (Win, Linux), Cmd + I (Mac) - Selecteer de huidige regel
7. Ctrl +] (Win, Linux), Cmd +] (Mac) - streepje inspringen
8. Ctrl + [(Win, Linux), Cmd + [(Mac) - Oudere lijn

Rich Languages ​​bewerken

Op dit moment heeft VS Code vanaf mei 2016 ingebouwde uitgebreide bewerkingsondersteuning voor JavaScript en TypeScript, maar je kunt taalondersteuningsuitbreidingen voor veel andere talen downloaden van de VS Code Marketplace.

Hier in de documenten kunt u de opties bekijken die u heeft voor de taal die u wilt gebruiken. Let op: aangezien de VS-code nog in de kinderschoenen staat, kan er ook rijke bewerkingsondersteuning voor andere talen komen.

1. Ctrl + Spatie (Win, Linux, Mac) - Suggestie voor trigger
2. Ctrl + Shift + spatiebalk (Win, Linux), Shift + Cmd + spatie (Mac) - triggerparameters hints
3. Alt + F12 (Win), Option + F12 (Mac), Ctrl + Shift + F10 (Linux) - Peekdefinitie
4. Shift + F12 (Win, Linux, Mac) - Toon referenties
5. Ctrl + Shift + X (Win, Linux), Shift + Cmd + X (Mac) - Achterliggende witruimte bijsnijden

tonen

1. F11 (Win, Linux), Ctrl + Cmd + F (Mac) - Volledig scherm schakelen
2. Ctrl + = (Win, Linux), Cmd + = (Mac) - inzoomen
3. Ctrl + - (Win, Linux), Cmd + - (Mac) - Uitzoomen
4. Ctrl + B (Win, Linux), Cmd + B (Mac) - Schakelen tussen zijbalkweergave
5. Ctrl + Shift + D (Win, Linux), Shift + Cmd + D (Mac) - Toon Debug in de zijbalk (aan de linkerkant)
6. Ctrl + Shift + E (Win, Linux), Shift + Cmd + E (Mac) - Show Explorer in de zijbalk (aan de linkerkant)
7. Ctrl + Shift + G (Win, Linux, Mac) - Toon Git in de zijbalk (aan de linkerkant)
8. Ctrl + Shift + F (Win, Linux), Shift + Cmd + F (Mac) - Toon Zoeken in de zijbalk (aan de linkerkant)

Hoe sleutelbindingen in VS-code aan te passen

Het aanpassen van de belangrijkste bindingen kan handig zijn voor drie belangrijke dingen.

Ten eerste, als u al bent gewend aan bepaalde sneltoetsen in een andere codebewerker, hoeft u geen nieuwe te bewerken.

Ten tweede zijn enkele van de vooraf ingestelde sneltoetsen gewoon te moeilijk om te onthouden, neem bijvoorbeeld de Windows-snelkoppeling Ctrl + K + F12 voor de opdracht Open definitie opzij.

Ten derde zijn er ook niet-toegewezen sneltoetsen in de VS-code, zoals Open Gebruikersinstellingen en Open Werkruimte-instellingen (vind ze hier in de Documenten), wilt u ze misschien gebruiken.

U kunt sneltoetsen aanpassen met behulp van a JSON-configuratiebestand, op een manier vergelijkbaar met hoe u instellingen voor gebruikers en werkruimten kunt aanpassen. Het bestand dat u moet bewerken, wordt gebeld keybindings.json, en je kunt het openen door op het menu Bestand> Voorkeuren> Sneltoetsen te klikken in de bovenste menubalk.

Wanneer u hierop klikt, wordt de VS-code geopend twee bewerkingsvensters naast elkaar, een voor de standaardtoetsenbordsneltoetsen aan de linkerkant, en een voor jouw aangepaste toetsbindingen aan de rechterkant.

U hoeft niets anders te doen, kopieer en plak de toetsen van links naar rechts met behoud van het JSON-formaat en herschrijf de sleutel naar de aangepaste.

Laten we een kort voorbeeld bekijken. Stel dat u gemakkelijk toegang wilt krijgen tot de opdracht Show Installed Extensions die standaard geen toegewezen sleutelbinding heeft. In dit geval is het niet voldoende om alleen van links naar rechts te kopiëren, plakken, omdat niet-toegewezen sleutels niet zijn opgenomen in de standaardlijst.

Je moet je houden aan de syntaxis-toetsbindingen volgen in Visual Studio-code:

 "key": "", "when": "", "command": "" 

Bekijk enkele voorbeelden uit de praktijk over het correct instellen van toetsenbordregels. Het wanneer-onderdeel is optioneel, je hoeft het niet te gebruiken om globale sneltoetsen in te stellen, dat is het alleen gebruikt wanneer een bepaalde snelkoppeling is gekoppeld aan een bepaald scherm of modus, zoals in het geval van inDebugMode.

In ons voorbeeld zullen we instellen een globale sleutelbinding, wat betekent dat we alleen de waarden van hoeven in te stellen “sleutel” en “commando” in onze aangepaste toetsenbordregel.

Laten we eerst de opdracht-id opzoeken die hoort bij de opdracht Show Installed Extension. We kunnen dit gemakkelijk doen in de documenten, die ons laten zien dat de opdracht-ID die we nodig hebben, workbench.extensions.action.listExtensions is.

Het andere stuk gegevens dat we nodig hebben is de sleutel. De aangepaste sleutel die we binden aan de opdracht Show Installed Extension kan niet worden gebruikt door andere belangrijke bindende regels, en moet de juiste sleutel-syntaxis volgen, wat betekent dat het gemaakt moet zijn van een wijziger (zie de geaccepteerde modifiers van OS) en de sleutel zelf.

Omdat ik op een Windows-computer werk, kies ik de toets Ctrl + F6, omdat deze aan alle vereisten voldoet, maar u kunt elke andere sleutel kiezen die het beste bij u past..

Mijn keybindings.json-bestand ziet er als volgt uit:

 // Plaats de belangrijkste bindingen in dit bestand om de standaardwaarden te overschrijven ["key": "Ctrl + f6", "command": "workbench.extensions.action.listExtensions"] 

De nieuwe regel is meteen van kracht, als Visual Studio-code werkt de regels tijdens runtime bij. Je kunt het testen zonder de editor opnieuw te starten, je hoeft alleen maar op Ctrl + F6 te drukken, of de sleutel die je hebt gekozen, en een lijst met je geïnstalleerde extensies zal verschijnen in je editor.

In de onderstaande schermafbeelding kun je mijn testresultaten zien. Door op Ctrl + F6 te drukken, kreeg ik een lijst met de twee extensies die ik momenteel heb.

Je kan toevoegen zoveel regels als je wilt naar uw keybindings.json-bestand. Volg gewoon de standaard JSON-syntaxis, wat betekent dat u elke regel in een paar accolades moet plaatsen en ze moet scheiden met een komma, zoals u hieronder kunt zien.

 // Plaats de belangrijkste bindingen in dit bestand om de standaardwaarden te overschrijven ["key": "Ctrl + f6", "command": "workbench.extensions.action.listExtensions", "key": "Shift + f6" , "opdracht": "workbench.extensions.action.installExtension"]