Hur man formaterar kod i VS-kod

När du skriver in kommandon i VS-kod kan det ibland vara det sista du tänker på att försöka vara snygg. Även om formatering inte krävs för att ett program ska köras, hjälper det mycket under felsökning och försök att hitta fel.

I den här artikeln visar vi dig hur du formaterar kod i VS-kod tillsammans med andra användbara tips för att hålla din kod välorganiserad.

Hur man formaterar kod

VS Code har inbyggda kommandon för att ordna för närvarande inskriven kod till standardformatet. Dessa kortkommandon kräver inga ytterligare tillägg och kan användas när som helst. Genvägarna är följande:

För PC

Formatera hela dokumentet:

  • Öppna filen med koden som du vill formatera.
  • Tryck på ”Shift + Alt + F”.
  • Spara ändringarna genom att klicka på ”Arkiv” i det övre vänstra hörnet och sedan välja ”Spara” eller genom att trycka på ”Ctrl + S”.
  • Formatera endast vald kod:

  • På filen med kodraderna som du vill formatera, välj raderna genom att markera dem med musen.
  • Tryck på ”Ctrl + K”.
  • Tryck på ”Ctrl + F”.
  • Spara ändringarna antingen genom att välja ”Spara” på Arkiv-menyn i det övre vänstra hörnet eller genom att trycka på ”Ctrl + S”.
  • Observera att om du trycker på ”Ctrl + F” utan att först trycka på ”Ctrl + K” kommer du att öppna sökmenyn. Om detta händer, stäng bara genom att klicka på ”x”-knappen eller trycka på Esc.

    Flytta rader uppåt eller nedåt:

  • Flytta markören till början av raden som du vill flytta.
  • Håll ned Alt-tangenten.
  • För att flytta linjen uppåt, tryck på uppåtpilen. För att flytta den nedåt, tryck på nedåtpilen.
  • Spara din fil genom att välja den från Arkiv-menyn i det övre vänstra hörnet av fönstret eller genom att trycka på ”Ctrl + S”.
  • Ändra indrag för en enskild rad:

  • Flytta markören till början av raden där du vill ändra indraget.
  • Tryck på ”Ctrl + ]” för att öka indraget.
  • Tryck på ”Ctrl + [“ to decrease the indent.
  • Save changes by selecting Save from the File menu or by pressing “Ctrl + S”.
  • For Mac

    Format the entire document:

  • Open the file with the code that you wish to format.
  • Press “⇧ + ⌥ + F.”
  • Save your changes by clicking “File” on the upper left then choosing “Save” or pressing “⌘ + S”.
  • Formatting selected code only:

  • Highlight the part of the document that you wish to format.
  • Press “⌘ + K”.
  • Press “⌘ + F”.
  • Save your file by pressing “⌘ + S” or by choosing “Save” from the File menu on the upper left corner of the window.
  • Note that using “⌘ + F” without pressing “⌘ + K” beforehand will only open the Find Menu. To close the Find Menu just press “x” on the right side or press Esc.

    Move lines up or down:

  • Place your cursor at the beginning of the line you want to edit.
  • Hold down the “⌥” Key.
  • To move a line up, press the up arrow. To move it down, press the down arrow.
  • Save your changes by choosing “Save” from the File menu or by pressing “⌘ + S”.
  • Change indentation of a single line:

  • Move your cursor to the beginning of the line in which you want to change the indention.
  • Press “⌘ + ]” för att öka indraget.
  • Tryck på ”⌘ +[”förattminskaindraget[“todecreasetheindent
  • Spara filen genom att trycka på ”⌘ + S” eller genom att välja ”Spara” från Arkiv-menyn i det övre vänstra hörnet av fönstret.
  • VS Code Format Kod vid Spara

    VS Code har inte ett inbyggt kommando som formaterar ditt dokument vid spara. Istället kan detta göras genom att installera ett formateringstillägg på din VS Code-applikation. Den mest populära av dessa tillägg är Prettier som ger en hel del formateringsfunktioner till VS Code. Prettier kan installeras genom att göra följande:

  • Öppna VS-kod.
  • Klicka på knappen Extensions som finns i menyn till vänster. Det här är ikonen som ser ut som fyra rutor. Alternativt kan du trycka på ”Ctrl + Shit + x” för PC eller ”⌘ + ⇧ + x” på Mac.
  • I sökfältet högst upp i menyn skriver du in Prettier.
  • Klicka på knappen Installera i det nedre högra hörnet av Prettier-ikonen.
  • Vänta tills tillägget avslutar installationen.
  • Innan Prettier kan börja formatera ditt dokument automatiskt när du sparar, måste du konfigurera tillägget för att aktivera funktionen. Detta görs genom att göra följande:

  • Öppna inställningsfönstret genom att trycka på ”Ctrl +” på PC eller ”⌘ +” på Mac.
  • I sökfältet skriv in formaterare. Detta bör visa flera formateringsinställningar.
  • Se till att det valda tillägget är snyggare i inställningen Editor: Default Formatter. Om det inte finns någon standardformaterare eller VS Code använder en annan formatterare som standard, tryck på rullgardinspilen. Välj ”Pättare – Kodformaterare” från listan. Alternativt kan Prettier visas på listan som ”esbenp.prettier-vscode”.
  • Se till att alternativet ”Editor: Format On Save” har markerats. Om inte, växla bockmarkeringen.
  • Skriv ”Pättare” i sökfältet för inställningar.
  • Bläddra ner tills du hittar raden ”Prettier: Require Config”. Se till att kryssrutan har markerats. Den här inställningen förhindrar Prettier från att formatera dokument utan en konfigurationsfil. Detta är praktiskt när du tittar på nedladdad kod som kan ha sina egna formateringsregler. Detta förhindrar att du oavsiktligt skriver över formateringsalternativ. Observera att namnlösa filer fortfarande formateras automatiskt även om den här inställningen är markerad.
  • Du kan redigera specifika Prettier-inställningar beroende på dina preferenser. När du är klar kan du stänga den här menyn.
  • Eftersom du har konfigurerat Prettier för att automatiskt formatera endast när det finns en konfigurationsfil, måste du skapa en för varje projekt. Detta görs genom att följa dessa steg:

  • Välj roten för ditt projekt i menyn till vänster.
  • Klicka på knappen ny fil för att skapa en konfigurationsfil.
  • Namnge den här filen ”.prettierrc.”
  • På filen anger du bara {}.
  • Prettier kommer nu automatiskt att formatera ditt dokument när du sparar det.
  • Tips för att hålla ordning på koden

  • Även om indrag inte är nödvändigt för att ett program ska köras, kan det hjälpa till att felsöka genom att dela upp kod i hanterbara moduler. If-Then-satser eller kapslade fall, till exempel, kan dra nytta av detta genom att göra varje alternativ alternativ visuellt särskiljbar från varandra. Detta är praktiskt när du har att göra med logiska fel istället för syntaxfel.
  • Om du namnger moduler eller korta rader kod, gör det till en vana att använda beskrivande titlar istället för att bara kalla det modul 1, modul 2, etc. Detta gör det lättare att veta vilken del av koden som har en viss funktion.
  • Det är alltid en bra idé att använda kommentarer till din fördel. Oavsett om du inkluderar en snabb beskrivning, eller bara lägger till en anteckning för dig själv, hjälper kommentarer oerhört mycket under felsökning.
  • Organisationskod

    Att hålla dina projekt korrekt formaterade gör det inte bara lättare att läsa, det hjälper också till att identifiera fel och håller din kod organiserad. Även om det inte är nödvändigt för ett program att köra, är det en klar fördel att veta hur man formaterar dina filer i VS-kod.

    Känner du till andra sätt att formatera dina filer i VS Code? Dela gärna dina tankar i kommentarsfältet nedan.