Grundläggande redigering

Visual Studio Code är först och främst ett redigeringsprogram och innehåller de funktioner du behöver för att redigera källkod på ett mycket produktivt sätt. Det här ämnet tar dig igenom grunderna i redigeraren och hjälper dig att komma igång med din kod.

Tangentbordsgenvägar

Att kunna hålla händerna på tangentbordet när du skriver kod är avgörande för hög produktivitet. VS Code har en rik uppsättning standard-tangentbordsgenvägar samt låter dig anpassa dem.

• Referens för tangentbordsgenvägar – Lär dig de vanligaste och mest populära tangentbordsgenvägarna genom att ladda ner referensbladet.
• Installera ett Keymap-tillägg – Använd tangentbordsgenvägar från din gamla editor (t.ex. Sublime Text, Atom och Vim) i VS Code genom att installera ett Keymap-tillägg.
• Anpassa tangentbordsgenvägar – Ändra standardangivelserna för tangentbordsgenvägar så att de passar din stil.

Multipla val (multi-cursor)

VS Code har stöd för flera markörer för snabba samtidiga redigeringar. Du kan lägga till sekundära markörer (som görs tunnare) med Alt+Klicka. Varje markör fungerar oberoende baserat på den kontext den sitter i. Ett vanligt sätt att lägga till fler markörer är med ⌥⌘↓ (Windows Ctrl+Alt+Down, Linux Shift+Alt+Down) eller ⌥⌘ (Windows Ctrl+Alt+Up, Linux Shift+Alt+Up) som infogar markörer under eller över.

Notera: Ditt grafikkorts drivrutin (till exempel NVIDIA) kan skriva över dessa standardgenvägar.

⌘D (Windows, Linux Ctrl+D) markerar ordet vid markören, eller nästa förekomst av det aktuella valet.

Tip: Du kan också lägga till fler markörer med ⇧⌘L (Windows, Linux Ctrl+Shift+L), som lägger till ett urval vid varje förekomst av den aktuella markerade texten.

Modifiering av flera markörer

Om du vill ändra modifieringstangenten för att tillämpa flera markörer till Cmd+Klicka på macOS och Ctrl+Klicka på Windows och Linux kan du göra det med inställningen editor.multiCursorModifier. Detta gör att användare som kommer från andra editorer som Sublime Text eller Atom kan fortsätta att använda den modifieringstangent som de är bekanta med.

Inställningen kan ställas in på:

• ctrlCmd – Motsvaras av Ctrl i Windows och Cmd i macOS.
• alt – Den befintliga standardinställningen Alt.

Det finns också ett menyalternativ Använd Ctrl+Klicka för multi-cursor i menyn Val för att snabbt växla den här inställningen.

Gesten Gå till definition och Öppna länk respekterar också den här inställningen och anpassar sig så att de inte krockar. När inställningen är ctrlCmd kan till exempel flera markörer läggas till med Ctrl/Cmd+Klick, och öppna länkar eller gå till definition kan aktiveras med Alt+Klick.

Krympa/utöka urvalet

Snabbt krympa eller utöka det aktuella urvalet. Utlös det med ⌃⇧⌘← (Windows, Linux Shift+Alt+Vänster) och ⌃⇧⌘→ (Windows, Linux Shift+Alt+Högre).

Här är ett exempel på att utöka urvalet med ⌃⇧⌘→ (Windows, Linux Shift+Alt+Högre):

Kolumn (ruta)-urval

Placera markören i ett hörn och håll sedan Shift+Alt intryckt samtidigt som du drar till det motsatta hörnet:

Notera: Detta ändras till Shift+Ctrl/Cmd när du använder Ctrl/Cmd som modifierare för flera markörer.

Det finns också standardtangentbindningar för kolumnval på macOS och Windows, men inte på Linux.

Key	Command	Command ID
⇧⌥⌘↓ (Windows Ctrl+Shift+Alt+Down, Linux )	Kolumnval nedåt	cursorColumnSelectDown
⇧⌥⌘ (Windows Ctrl+Shift+Alt+Up, Linux )	Kolumnval uppåt	cursorColumnSelectUp
⇧⌥⌘← (Windows Ctrl+Shift+Alt+Left, Linux )	Column Select Left	cursorColumnSelectLeft
⇧⌥⌘→ (Windows Ctrl+Shift+Alt+Right, Linux )	Kolumnval höger	cursorColumnSelectRight
⇧⌥⌘PageDown (Windows Ctrl+Shift+Alt+PageDown, Linux )	Column Select Page Down	cursorColumnSelectPageDown
⇧⌥⌘PageUp (Windows Ctrl+Shift+Alt+PageUp, Linux )	Column Select Page Up	cursorColumnSelectPageUp

Du kan redigera dina keybindings.json för att binda dem till något mer bekant om du vill.

Läge för kolumnval

Användarinställningen Editor: Column Selection styr den här funktionen. När det här läget är aktiverat, vilket indikeras i statusfältet, skapar musgester och piltangenter som standard ett kolumnval. Denna globala omkoppling är också tillgänglig via menyalternativet Val > Läge för kolumnval. Dessutom kan man också inaktivera läget Column Selection från statusfältet.

Save / Auto Save

Som standard kräver VS Code en uttrycklig åtgärd för att spara dina ändringar på disken, ⌘S (Windows, Linux Ctrl+S).

Hur som helst är det enkelt att aktivera Auto Save, som sparar dina ändringar efter en konfigurerad fördröjning eller när fokus lämnar redigeringsläget. Med det här alternativet aktiverat behöver du inte uttryckligen spara filen. Det enklaste sättet att aktivera Auto Save är med växelspaken File > Auto Save som aktiverar och inaktiverar sparande efter en fördröjning.

För att få mer kontroll över Auto Save öppnar du Användar- eller arbetsutrymmesinställningar och hittar de tillhörande inställningarna:

• files.autoSave: Kan ha följande värden:
  • off – för att inaktivera automatisk lagring.
  • afterDelay – för att spara filer efter en konfigurerad fördröjning (standard 1000 ms).
  • onFocusChange – för att spara filer när fokus flyttas ut ur redigeraren för den smutsiga filen.
  • onWindowChange – för att spara filer när fokus flyttas ut ur VS Code-fönstret.
• files.autoSaveDelay: Konfigurerar fördröjningen i millisekunder när files.autoSave konfigureras till afterDelay. Standardvärdet är 1000 ms.

Hot Exit

VS Code kommer som standard att komma ihåg osparade ändringar i filer när du avslutar. Hot exit utlöses när programmet stängs via File > Exit (Code > Quit på macOS) eller när det sista fönstret stängs.

Du kan konfigurera hot exit genom att ställa in files.hotExit till följande värden:

• "off":
• "onExit": Hot exit aktiveras när programmet stängs, det vill säga när det sista fönstret stängs i Windows/Linux eller när kommandot workbench.action.quit aktiveras (från kommandopaletten, tangentbordsgenvägen eller menyn). Alla fönster utan öppnade mappar återställs vid nästa start.
• "onExitAndWindowClose": Hot exit utlöses när programmet stängs, dvs. när det sista fönstret stängs i Windows/Linux eller när kommandot workbench.action.quit utlöses (från kommandopaletten, tangentbordsgenvägen eller menyn), och även för alla fönster med öppnade mappar, oavsett om det är det sista fönstret eller inte. Alla fönster utan öppnade mappar återställs vid nästa start. Om du vill återställa mappfönster som de var före avstängning ställer du in window.restoreWindows till all.

Om något råkar gå fel vid varmavslutning lagras alla säkerhetskopior i följande mappar för standardinstallationsplatser:

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

Sök och ersätt

VS-kod gör det möjligt för dig att snabbt hitta text och ersätta den i den öppnade filen. Tryck ⌘F (Windows, Linux Ctrl+F) för att öppna Find Widget i editorn, sökresultaten kommer att markeras i editorn, översiktslinjalen och minimap.

Om det finns mer än ett matchat resultat i den aktuella öppnade filen kan du trycka på Enter och ⇧Enter (Windows, Linux Shift+Enter) för att navigera till nästa eller föregående resultat när inmatningsrutan för find är fokuserad.

Söksträng från urvalet

När Find Widget öppnas kommer den automatiskt att fylla den markerade texten i redigeraren i inmatningsrutan för sökning. Om urvalet är tomt kommer ordet under markören att föras in i inmatningsrutan istället.

Den här funktionen kan stängas av genom att ställa in editor.find.seedSearchStringFromSelection till false.

Find In Selection

Som standard körs sökoperationerna på hela filen i redigeraren. Den kan också köras på markerad text. Du kan aktivera den här funktionen genom att klicka på hamburgerikonen på Find Widget.

Om du vill att det ska vara standardbeteendet för Find Widget kan du ställa in editor.find.autoFindInSelection till always, eller till multiline, om du vill att det ska köras på markerad text endast när flera rader av innehåll är markerade.

Avancerade sök- och ersättningsalternativ

Förutom att hitta och ersätta med vanlig text har Find Widget också tre avancerade sökalternativ:

• Match Case
• Match Whole Word
• Regular Expression

Inmatningsrutan för ersättningar har stöd för att bevara kasus, du kan aktivera det genom att klicka på knappen Preserve Case (AB).

Stöd för flera rader och Find Widget resizing

Du kan söka efter text på flera rader genom att klistra in texten i inmatningsrutan Find och inmatningsrutan Replace. Om du trycker på Ctrl+Enter infogar du en ny rad i inmatningsrutan.

När du söker efter lång text kan standardstorleken för Find Widget vara för liten. Du kan dra i den vänstra skärmen för att förstora Find Widget eller dubbelklicka på den vänstra skärmen för att maximera den eller krympa den till standardstorleken.

Söka över filer

VS Code låter dig snabbt söka över alla filer i den för närvarande öppnade mappen. Tryck på ⇧⌘F (Windows, Linux Ctrl+Shift+F) och ange ditt sökord. Sökresultaten grupperas i filer som innehåller sökordet, med en indikation på träffarna i varje fil och dess placering. Expandera en fil för att se en förhandsvisning av alla träffar i den filen. Klicka sedan en gång på en av träffarna för att visa den i redigeraren.

Tip: Vi har också stöd för sökning med reguljära uttryck i sökrutan.

Du kan konfigurera avancerade sökalternativ genom att klicka på ellipsen (Växla sökdetaljer) under sökrutan till höger (eller tryck på ⇧⌘J (Windows, Linux Ctrl+Shift+J)). Då visas ytterligare fält för att konfigurera sökningen.

Avancerade sökalternativ

I de två inmatningsrutorna under sökrutan kan du ange mönster som ska inkluderas eller uteslutas från sökningen. Om du anger example kommer det att matcha alla mappar och filer som heter example i arbetsområdet. Om du anger ./example kommer det att matcha mappen example/ på den översta nivån i arbetsområdet. Använd , för att separera flera mönster. Sökvägar måste använda snedstreck framåt. Du kan också använda glob-syntax:

• * för att matcha ett eller flera tecken i ett sökvägssegment
• ? för att matcha på ett tecken i ett sökvägssegment
• ** för att matcha ett valfritt antal sökvägssegment, inklusive ingen
• {} för att gruppera villkor (t.ex. {**/*.html,**/*.txt} matchar alla HTML- och textfiler)
• för att ange ett antal tecken som ska matchas (example. för att matcha example.0, example.1, …)

VS Code utesluter vissa mappar som standard för att minska antalet sökresultat som du inte är intresserad av (t.ex: node_modules). Öppna inställningar för att ändra dessa regler under avsnittet files.exclude och search.exclude.

Notera att globmönster i sökvyn fungerar annorlunda än i inställningar som files.exclude och search.exclude. I inställningarna måste du använda **/example för att matcha en mapp som heter example i undermapp folder1/example i arbetsområdet. I sökvyn antas prefixet **.

Notera också knappen Use Exclude Settings och Ignore Files toggle i rutan Files to exclude. Växeln avgör om du ska utesluta filer som ignoreras av dina .gitignore-filer och/eller matchas av dina files.exclude– och search.exclude-inställningar.

Tip: I Utforskaren kan du högerklicka på en mapp och välja Sök i mapp för att endast söka i en mapp.

Söka och ersätta

Du kan också söka och ersätta mellan filer. Expandera widgeten Sök för att visa textrutan Ersätt.

När du skriver text i textrutan Ersätt visas en diff-visning av de väntande ändringarna. Du kan ersätta i alla filer från textrutan Ersätt, ersätta alla i en fil eller ersätta en enskild ändring.

Tip: Du kan snabbt återanvända ett tidigare sökord genom att använda ↓ (Windows, Linux nedåt) och (Windows, Linux uppåt) för att navigera genom sökordshistoriken.

IntelliSense

Vi kommer alltid att erbjuda ordkomplettering, men för de rika språken, till exempel JavaScript, JSON, HTML, CSS, SCSS, Less, C# och TypeScript, erbjuder vi en verklig IntelliSense-upplevelse. Om en språktjänst känner till möjliga kompletteringar kommer IntelliSense-förslagen att dyka upp medan du skriver. Du kan alltid utlösa det manuellt med ⌃Space (Windows, Linux Ctrl+Space). Som standard är Tab eller Enter de accepterade tangentbordsutlösarna, men du kan också anpassa dessa tangentbindningar.

Tip: Filtreringen av förslag har stöd för CamelCase, så du kan skriva de bokstäver som är versaler i ett metodnamn för att begränsa förslagen. Till exempel, ”cra” ger snabbt ”createApplication”.

Tip: IntelliSense-förslagen kan konfigureras via inställningarna editor.quickSuggestions och editor.suggestOnTriggerCharacters.

JavaScript- och TypeScript-utvecklare kan dra nytta av filförrådet för typdeklarationer (typings) i npmjs för att få IntelliSense för vanliga JavaScript-bibliotek (Node.js, React, Angular). Du hittar en bra förklaring om hur du använder typdeklarationsfiler i ämnet JavaScript-språk och i Node.js-tutorialen.

Lär dig mer i IntelliSense-dokumentet.

Formatering

VS Code har ett bra stöd för formatering av källkod. Redigeraren har två uttryckliga formatåtgärder:

• Formatera dokument (⇧⌥F (Windows Shift+Alt+F, Linux Ctrl+Shift+I)) – Formatera hela den aktiva filen.
• Formatera urval (⌘K ⌘F (Windows, Linux Ctrl+K Ctrl+F)) – Formatera den markerade texten.

Du kan anropa dessa från kommandopaletten (⇧⌘P (Windows, Linux Ctrl+Shift+P)) eller från redaktörens kontextmeny.

VS Code har standardformatörer för JavaScript, TypeScript, JSON och HTML. Varje språk har specifika formateringsalternativ (t.ex. html.format.indentInnerHtml) som du kan justera efter dina önskemål i dina användar- eller arbetsutrymmeinställningar. Du kan också inaktivera standardspråksformateraren om du har ett annat tillägg installerat som tillhandahåller formatering för samma språk.

"html.format.enable": false

Samman med manuell kodformatering kan du också utlösa formatering baserat på användarens rörelser, t.ex. att skriva, spara eller klistra in. Dessa är avstängda som standard men du kan aktivera dessa beteenden genom följande inställningar:

• editor.formatOnType – Formatera raden efter att du har skrivit.
• editor.formatOnSave – Formatera en fil när du sparar.
• editor.formatOnPaste – Formatera det klistrade innehållet.

Anmärkningar: Alla formatörer har inte stöd för att formatera vid inklistring eftersom de för att kunna göra det måste ha stöd för att formatera ett urval eller ett textintervall.

Förutom standardformatörerna kan du hitta tillägg på Marknadsplatsen för att få stöd för andra språk eller formateringsverktyg. Det finns en Formatters kategori så att du enkelt kan söka och hitta formateringstillägg. Skriv ”formatters” eller ”category:formatters” i sökrutan i vyn Extensions i VS Code för att se en filtrerad lista över tillägg i VS Code.

Fällning

Du kan fälla områden i källkoden med hjälp av vikningsikonerna i rännan mellan linjenummer och linjestart. Flytta musen över rännan och klicka för att vika och fälla upp regioner. Använd Shift + Klicka på vikningsikonen för att vika eller veckla ut regionen och alla regioner inuti.

Du kan också använda följande åtgärder:

• Fold (⌥⌘ (Windows, Linux Ctrl+Shift+])) vecklar ut den hopfällda regionen vid markören.
• Toggle Fold (⌘K ⌘L (Windows, Linux Ctrl+K Ctrl+L)) viker eller vecklar ut regionen vid markören.
• Fold Recursively (⌘K ⌘K ⌘ (Windows, Linux Ctrl+K Ctrl+])) vecklar ut regionen vid markören och alla regioner inom den regionen.
• Fold All (⌘K ⌘0 (Windows, Linux Ctrl+K Ctrl+0)) viker alla regioner i editorn.
• Unfold All (⌘K ⌘J (Windows, Linux Ctrl+K Ctrl+J)) vecklar ut alla regioner i editorn.
• Fold Level X (⌘K ⌘2 (Windows, Linux Ctrl+K Ctrl+2) för nivå 2) viker alla regioner på nivå X, utom regionen vid den aktuella markörpositionen.
• Fold All Block Comments (⌘K ⌘/ (Windows, Linux Ctrl+K Ctrl+/)) viker alla regioner som börjar med en blockkommentartoken.

Foldningsregioner utvärderas som standard baserat på radernas indragning. En vikningsregion börjar när en rad har ett mindre indrag än en eller flera följande rader, och slutar när det finns en rad med samma eller mindre indrag.

Sedan version 1.22 kan vikningsregioner också beräknas baserat på syntaxtecken i redaktörens konfigurerade språk. Följande språk erbjuder redan syntaxmedveten vikning: Markdown, HTML, CSS, LESS, SCSS och JSON.

Om du föredrar att byta tillbaka till indragningsbaserad vikning för ett (eller alla) av språken ovan, använd:

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

Regioner kan också definieras med hjälp av markörer som definieras av varje språk. Följande språk har för närvarande definierade markörer:

Språk	Startregion	Slutregion
Bat	::#region eller REM #region.	::#endregion eller REM #endregion
C#	#region	#endregion
C/C++	#pragma region	#pragma endregion
CSS/Less/SCSS	/*#region*/	/*#endregion*/
Coffeescript	#region	#endregion
F#	//#region eller (#_region)	//#endregion eller (#_endregion)
Java	//#region eller //<editor-fold>	// #endregion eller //</editor-fold>
Markdown	<!-- #region -->	<!-- #endregion -->
Perl5	#region eller =pod	#endregion eller =cut
PHP	#region	#endregion
PowerShell	#region	#endregion
Python	#region eller # region	#endregion eller # endregion
TypeScript/JavaScript	//#region	//#endregion
Visual Basic	#Region	#End Region

För att vika och veckla ut endast de områden som definieras av markörer använd:

• Fold Marker Regions (⌘K ⌘8 (Windows, Linux Ctrl+K Ctrl+8)) viker alla markerade regioner.
• Unfold Marker Regions (⌘K ⌘9 (Windows, Linux Ctrl+K Ctrl+9)) vecklar ut alla markeringsregioner.

Indentering

VS Code låter dig styra textens indentering och om du vill använda mellanslag eller tabstopp. Som standard infogar VS Code mellanslag och använder 4 mellanslag per tabbstangent. Om du vill använda ett annat standardvärde kan du ändra inställningarna editor.insertSpaces och editor.tabSize.

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

Automatisk identifiering

VS Code analyserar din öppna fil och bestämmer indragningen som används i dokumentet. Den automatiskt upptäckta indragningen åsidosätter dina standardinställningar för indragning. Den upptäckta inställningen visas på statusfältets högra sida:

Du kan klicka på statusfältets indentationsvisning för att få upp en rullgardinsmeny med indentationskommandon som gör det möjligt att ändra standardinställningarna för den öppna filen eller konvertera mellan tabulaturstoppar och mellanslag.

Anmärkningar: VS Code autodetektering kontrollerar för inryckningar på 2, 4, 6 eller 8 mellanslag. Om din fil använder ett annat antal mellanslag kan det hända att indragningen inte upptäcks korrekt. Om din konvention till exempel är att indraget ska vara 3 mellanslag, kanske du vill stänga av editor.detectIndentation och uttryckligen ställa in tabbstorleken till 3.

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

Stöd för filkodning

Ställ in filkodningen globalt eller per arbetsområde med hjälp av inställningen files.encoding i Användarinställningar eller Arbetsutrymmeinställningar.

Du kan visa filkodningen i statusfältet.

Klicka på kodningsknappen i statusfältet för att öppna eller spara den aktiva filen på nytt med en annan kodning.

Välj sedan en kodning.

Du har täckt det grundläggande användargränssnittet – det finns mycket mer i VS Code. Läs vidare för att ta reda på mer om:

• Introvideo – installation och grunder – Titta på en handledning om grunderna i VS Code.
• Inställningar för användare/arbetsutrymmen – Lär dig hur du konfigurerar VS Code efter dina önskemål med hjälp av inställningar för användare och arbetsutrymmen.
• Kodnavigering – Peek and Goto Definition, och mycket mer.
• Integrerad terminal – Lär dig mer om den integrerade terminalen för att snabbt utföra kommandoradsuppgifter från VS Code.
• IntelliSense – VS Code ger smarta kodkompletteringar.
• Felsökning – Det är här VS Code verkligen briljerar.

Högre vanliga frågor

Är det möjligt att globalt söka och ersätta?

Ja, expandera textrutan i sökvyn så att den innehåller ett textfält för att ersätta. Du kan söka och ersätta i alla filer i arbetsområdet. Observera att om du inte har öppnat VS Code på en mapp kommer sökningen endast att köras på de för närvarande öppna filerna.

Hur aktiverar jag ordomvandling?

Du kan styra ordomvandling genom inställningen editor.wordWrap. Som standard är editor.wordWrap off, men om du ställer in den på on, kommer texten att omslutas på redigerarens visningsbredd.

 "editor.wordWrap": "on"

Du kan växla ordomslag för VS Code-sessionen med ⌥Z (Windows, Linux Alt+Z).

Du kan också lägga till vertikala kolumnlinjaler i redigeraren med inställningen editor.rulers, som tar emot en array av kolumnteckenpositioner där du vill ha vertikala linjaler.