Når man skriver kode i VS Code, kan fokuset på et ryddig oppsett lett bli nedprioritert. Selv om formatering ikke er avgjørende for at et program skal fungere, er det en stor fordel ved feilsøking og når man prøver å identifisere eventuelle problemer.
Denne artikkelen vil vise deg hvordan du kan formatere koden din i VS Code, samt dele noen andre nyttige tips for å holde koden din strukturert.
Kodeformatering i VS Code
VS Code kommer med innebygde kommandoer for å justere koden din til en standardisert formatering. Disse snarveiene krever ingen ekstra utvidelser og kan benyttes når som helst. Her er en oversikt over snarveiene:
For PC
Formater hele dokumentet:
- Åpne filen som inneholder koden du ønsker å formatere.
- Trykk «Shift + Alt + F».
- Lagre endringene ved å velge «Lagre» fra «Fil»-menyen øverst til venstre, eller ved å trykke «Ctrl + S».
Formater kun valgt kode:
- Marker linjene du ønsker å formatere med musen.
- Trykk «Ctrl + K».
- Trykk «Ctrl + F».
- Lagre endringene ved å velge «Lagre» i «Fil»-menyen, eller ved å trykke «Ctrl + S».
Merk: Hvis du trykker «Ctrl + F» uten å først trykke «Ctrl + K», vil søkemenyen åpnes. Denne kan du enkelt lukke ved å trykke på «x» eller «Esc»-tasten.
Flytt linjer opp eller ned:
- Plasser markøren i starten av linjen du ønsker å flytte.
- Hold nede «Alt»-tasten.
- Flytt linjen opp ved å trykke piltasten opp. For å flytte den ned, trykk piltasten ned.
- Lagre filen ved å velge den fra «Fil»-menyen, eller ved å trykke «Ctrl + S».
Endre innrykk på en enkelt linje:
- Plasser markøren ved starten av linjen du ønsker å justere.
- Trykk «Ctrl + ]» for å øke innrykket.
- Trykk «Ctrl + [» for å redusere innrykket.
- Lagre endringene ved å velge «Lagre» fra «Fil»-menyen, eller ved å trykke «Ctrl + S».
For Mac
Formater hele dokumentet:
- Åpne filen med koden du vil formatere.
- Trykk «⇧ + ⌥ + F».
- Lagre endringene dine ved å klikke på «Fil» øverst til venstre og velge «Lagre», eller ved å trykke «⌘ + S».
Formater kun valgt kode:
- Marker den delen av dokumentet du vil formatere.
- Trykk «⌘ + K».
- Trykk «⌘ + F».
- Lagre filen ved å trykke «⌘ + S», eller ved å velge «Lagre» fra «Fil»-menyen øverst til venstre.
Merk: Hvis du trykker «⌘ + F» uten å først trykke «⌘ + K», vil søkemenyen åpnes. For å lukke søkemenyen, trykk på «x» på høyre side eller trykk «Esc».
Flytt linjer opp eller ned:
- Plasser markøren i starten av linjen du vil redigere.
- Hold nede «⌥»-tasten.
- For å flytte en linje opp, trykk piltasten opp. For å flytte den ned, trykk piltasten ned.
- Lagre endringene dine ved å velge «Lagre» fra «Fil»-menyen, eller ved å trykke «⌘ + S».
Endre innrykk på en enkelt linje:
- Plasser markøren i starten av linjen der du vil endre innrykket.
- Trykk «⌘ + ]» for å øke innrykket.
- Trykk «⌘ + [» for å redusere innrykket.
- Lagre filen ved å trykke «⌘ + S», eller ved å velge «Lagre» fra «Fil»-menyen.
Automatisk formatering ved lagring i VS Code
VS Code har ikke en innebygd funksjon for å formatere dokumentet ved lagring. Dette kan derimot oppnås ved å installere en formateringsutvidelse i VS Code. «Prettier» er en populær utvidelse som gir en rekke formateringsmuligheter. Du kan installere Prettier ved å følge disse stegene:
- Åpne VS Code.
- Klikk på «Extensions»-knappen i menyen til venstre. Dette er ikonet som ser ut som fire bokser. Alternativt kan du trykke «Ctrl + Shift + x» for PC eller «⌘ + ⇧ + x» på Mac.
- Søk etter «Prettier» i søkefeltet øverst i menyen.
- Klikk på «Installer»-knappen nederst til høyre på Prettier-ikonet.
- Vent til utvidelsen har fullført installasjonen.
For at Prettier skal formatere dokumentet automatisk ved lagring, må du konfigurere utvidelsen. Dette gjøres på følgende måte:
- Åpne innstillingsvinduet ved å trykke «Ctrl + ,» på PC eller «⌘ + ,» på Mac.
- Søk etter «formatering» i søkefeltet. Dette vil vise flere formateringsinnstillinger.
- Under «Editor: Default Formatter» må du sørge for at «Prettier» er valgt. Hvis ingen standardformaterer er valgt, eller VS Code bruker en annen formateringsfunksjon som standard, trykk på rullegardinpilen. Velg «Prettier – Code formatter» fra listen. Det kan også hende at Prettier vises som «esbenp.prettier-vscode» i listen.
- Sørg for at «Editor: Format On Save» er aktivert. Hvis ikke, klikk på avkrysningsboksen for å aktivere den.
- Søk etter «Prettier» i innstillingssøket.
- Rull ned til du finner linjen «Prettier: Require Config». Sørg for at avkrysningsboksen er aktivert. Denne innstillingen forhindrer at Prettier formaterer dokumenter uten en konfigurasjonsfil. Dette er nyttig når du jobber med nedlastet kode som kan ha sine egne formateringsregler. Dette forhindrer at du utilsiktet overskriver formateringsalternativer. Vær oppmerksom på at filer uten navn fortsatt vil bli automatisk formatert, selv om denne innstillingen er aktivert.
- Du kan redigere de spesifikke Prettier-innstillingene etter dine egne preferanser. Når du er ferdig, kan du gå ut av denne menyen.
Ettersom du har konfigurert Prettier til å formaterer koden kun når det finnes en konfigurasjonsfil, må du opprette en for hvert prosjekt. Dette gjøres på følgende måte:
- Velg prosjektets rotmappe i menyen til venstre.
- Klikk på «Ny fil»-knappen for å opprette en ny konfigurasjonsfil.
- Gi denne filen navnet «.prettierrc».
- I filen, skriv inn «{}».
- Prettier vil nå automatisk formatere dokumentet når du lagrer det.
Tips for god kodestruktur
- Selv om innrykk ikke er avgjørende for at et program skal kjøre, kan det hjelpe med feilsøking ved å dele koden opp i håndterbare moduler. If-Then-setninger eller nestede tilfeller kan for eksempel dra nytte av dette ved å gjøre hvert alternativ visuelt atskilt fra hverandre. Dette er særlig nyttig når du har å gjøre med logiske feil i stedet for syntaksfeil.
- Hvis du navngir moduler eller korte kodelinjer, gjør det til en vane å bruke beskrivende titler i stedet for å bare kalle det «modul 1», «modul 2» osv. Dette gjør det lettere å vite hvilken del av koden som har en bestemt funksjon.
- Det er alltid en god idé å bruke kommentarer. Enten du inkluderer en rask beskrivelse, eller bare legger til en påminnelse til deg selv, hjelper kommentarer enormt under feilsøking.
Organisert kode
Det å ha prosjekter som er riktig formatert, gjør ikke bare koden lettere å lese, men det hjelper også med å identifisere feil og holde koden organisert. Selv om det ikke er nødvendig for at et program skal kjøre, er det helt klart en fordel å vite hvordan du formaterer filene dine i VS Code.
Kjenner du til andre måter å formatere filene dine i VS Code? Del gjerne dine tanker i kommentarfeltet nedenfor.