När man skriver kod i VS Code, är det lätt att glömma bort att hålla den snygg och prydlig. Även om korrekt formatering inte är nödvändig för att programmet ska fungera, underlättar det markant vid felsökning och identifiering av fel.
I den här genomgången kommer vi att visa hur du kan strukturera din kod i VS Code och ge användbara tips för att upprätthålla en välorganiserad kodbas.
Formatera Din Kod
VS Code erbjuder inbyggda funktioner för att automatiskt omvandla din kod till ett standardiserat format. Dessa snabbkommandon kräver inga extra tillägg och kan användas när som helst. Här är de relevanta tangentbordsgenvägarna:
För PC
Formatera ett helt dokument:
Öppna kodfilen du vill formatera.
Tryck på tangentkombinationen ”Shift + Alt + F”.
Spara dina ändringar genom att klicka på ”Arkiv” i det övre vänstra hörnet och sedan välja ”Spara”, eller tryck på ”Ctrl + S”.
Formatera enbart markerad kod:
Markera de rader av koden du vill formatera med musen.
Tryck på ”Ctrl + K”.
Tryck på ”Ctrl + F”.
Spara de ändrade filerna antingen genom att välja ”Spara” i Arkiv-menyn eller genom att trycka ”Ctrl + S”.
Notera att om du trycker ”Ctrl + F” utan att först trycka ”Ctrl + K” så öppnas sökmenyn. Stäng i så fall menyn genom att klicka på ”x” eller trycka på Esc.
Flytta rader uppåt eller nedåt:
Placera markören i början av den rad du vill flytta.
Håll nere Alt-tangenten.
Flytta raden uppåt med uppåtpilen och nedåt med nedåtpilen.
Spara filen via Arkiv-menyn eller genom att trycka ”Ctrl + S”.
Justera indrag för en enskild rad:
Flytta markören till den rad där du vill ändra indraget.
Öka indraget genom att trycka ”Ctrl + ]”.
Minska indraget genom att trycka ”Ctrl + [”.
Spara ändringarna via Arkiv-menyn eller genom att trycka ”Ctrl + S”.
För Mac
Formatera ett helt dokument:
Öppna filen med koden som ska formateras.
Tryck på ”⇧ + ⌥ + F”.
Spara via ”Arkiv” i det övre vänstra hörnet, och sedan ”Spara” eller genom att trycka ”⌘ + S”.
Formatera enbart markerad kod:
Markera kodpartiet du vill formatera.
Tryck ”⌘ + K”.
Tryck ”⌘ + F”.
Spara genom att trycka ”⌘ + S” eller via ”Spara” i Arkiv-menyn.
Om du trycker ”⌘ + F” utan att först trycka ”⌘ + K” öppnas sökmenyn. Stäng den genom att trycka på ”x” eller Esc.
Flytta rader uppåt eller nedåt:
Placera markören i början av den aktuella raden.
Håll nere ”⌥” tangenten.
Använd uppåtpilen för att flytta raden uppåt, och nedåtpilen för att flytta den nedåt.
Spara via Arkiv-menyn eller genom att trycka ”⌘ + S”.
Ändra indrag för en enskild rad:
Placera markören i början av raden som ska justeras.
Öka indraget med ”⌘ + ]”.
Minska indraget med ”⌘ + [”.
Spara genom att trycka ”⌘ + S” eller via ”Spara” i Arkiv-menyn.
Formatera Kod Vid Spara
VS Code saknar en inbyggd funktion för att formatera kod vid spara. Istället krävs ett tillägg för detta, exempelvis det populära verktyget Prettier, som erbjuder en rad formateringsmöjligheter. Prettier installeras på följande sätt:
Öppna VS Code.
Klicka på ”Tillägg” i menyn till vänster, ikonen med fyra rutor, eller tryck på ”Ctrl + Shift + x” på PC respektive ”⌘ + ⇧ + x” på Mac.
Skriv ”Prettier” i sökfältet.
Klicka på ”Installera” i det nedre högra hörnet av Prettier-ikonen.
Vänta tills installationen är klar.
För att Prettier ska formatera dina dokument automatiskt vid sparande, måste tillägget konfigureras enligt följande:
Öppna inställningsfönstret med ”Ctrl +,” på PC eller ”⌘ +,” på Mac.
Sök efter ”formaterare”. Detta ger flera alternativ för formatering.
Kontrollera att ”Prettier” är vald som standardformaterare under ”Editor: Default Formatter”. Om ingen standardformaterare är vald, välj ”Prettier – Code formatter” i rullgardinsmenyn. Alternativt kan Prettier visas som ”esbenp.prettier-vscode”.
Se till att ”Editor: Format On Save” är markerat. Om inte, markera den.
Sök efter ”Prettier” i inställningarna.
Scrolla ner till ”Prettier: Require Config” och se till att kryssrutan är markerad. Detta förhindrar Prettier från att formatera dokument utan konfigurationsfil, vilket är bra för att undvika att oavsiktligt skriva över specifika formateringsregler i nedladdad kod. Anonyma filer kommer dock fortfarande att formateras.
Du kan redigera specifika Prettier-inställningar efter eget tycke. När du är klar kan du stänga menyn.
Eftersom Prettier nu är konfigurerat att automatiskt formatera endast vid närvaro av konfigurationsfil, måste du skapa en för varje projekt. Detta gör du genom att följa dessa steg:
Välj rotkatalogen för projektet.
Klicka på knappen för att skapa en ny fil.
Namnge filen ”.prettierrc”.
Skriv endast ”{}” i filen.
Prettier kommer nu att automatiskt formatera din kod när du sparar.
Tips För Att Hålla Ordning På Koden
Även om indrag inte är ett krav för att koden ska fungera, underlättar det felsökning genom att dela in koden i hanterbara moduler. If-then-satser eller nästlade fall kan dra nytta av detta genom att visuellt skilja alternativen åt, vilket är särskilt användbart vid logiska fel.
Vid namngivning av moduler eller kodsnuttar, använd beskrivande titlar istället för ”modul 1”, ”modul 2” o.s.v. Det gör det lättare att förstå vilken del av koden som gör vad.
Det är alltid bra att använda kommentarer. Oavsett om det är en snabb beskrivning eller en notering till dig själv, underlättar kommentarer enormt vid felsökning.
Organisera Koden
Att hålla projekten formaterade underlättar läsbarhet, identifiering av fel och håller koden organiserad. Trots att det inte är ett krav för att program ska köras, är kunskapen om hur man formaterar filer i VS Code en stor fördel.
Känner du till fler metoder för att formatera filer i VS Code? Dela gärna med dig i kommentarsfältet nedan.