Moment 4: Din professionella kodredigerare: Visual Studio Code

Lästid: ca 10 min

Du har installerat VS Code, skapat ett Python-projekt och till och med versionshanterat det med Git. Nu är det dags att knyta ihop säcken och lära känna det program där du kommer spendera mest tid: din kodredigerare. Visual Studio Code är mycket mer än en glorifierad textredigerare; det är ett komplett nav för ditt utvecklingsarbete.

Att lära sig arbeta effektivt i VS Code är avgörande. I detta moment går vi igenom dess gränssnitt, den kraftfulla integrerade terminalen och hur du anpassar programmet med tillägg (Extensions) för att passa just dina behov.

Vad du lär dig

Efter detta moment kommer du att kunna:

• Navigera i VS Codes huvuddelar: Aktivitetsfältet, Sidopanelen och den Nedre panelen.
• Öppna och arbeta med en hel projektmapp, vilket är det professionella arbetssättet.
• Använda den integrerade terminalen för att köra kommandon utan att byta fönster.
• Hitta och installera viktiga tillägg som förbättrar din produktivitet.

Grunderna: Anatomin av VS Code

När du öppnar VS Code möts du av ett gränssnitt som kan delas in i fem huvudområden:

1. Aktivitetsfältet (Activity Bar): Den allra yttersta vänstra kolumnen med ikoner. Varje ikon representerar en huvudvy, t.ex. Filutforskaren, Sök, Git (Källkontroll) och Tillägg.
2. Sidopanelen (Side Bar): Den större panelen till vänster som visar innehållet för den vy du valt i Aktivitetsfältet. Oftast ser du din projektmapps filstruktur här.
3. Redigeringsfönstret (Editor Group): Den största ytan i mitten där dina öppna filer visas i flikar.
4. Nedre panelen (Panel): En panel längst ner som kan visa olika saker, vanligast är den integrerade terminalen, men även felmeddelanden (Problems) och utdata (Output).
5. Statusfältet (Status Bar): Den tunna listen allra längst ner. Den visar nyttig information som vilken Git-gren du är på, eventuella fel och vilket språk den nuvarande filen är skriven i.

Praktiska exempel: Ett effektivt arbetsflöde

Öppna ett helt projekt

Det bästa sättet att arbeta i VS Code är att öppna en hel mapp, inte bara enskilda filer. Då får du en överblick över hela projektet.

1. Öppna din vanliga terminal (inte den i VS Code än).
2. Navigera till din projektmapp, t.ex. mitt_projekt_2.
3. Skriv följande kommando och tryck Enter:

   code .
   

   Kommandot code är en genväg för VS Code, och . betyder "den nuvarande mappen". Hela ditt projekt öppnas nu i ett nytt VS Code-fönster.

Den integrerade terminalen

En av de bästa funktionerna i VS Code är den inbyggda terminalen.

• Öppna den: Tryck Ctrl + (kontroll-tangenten plus backtick-tangenten, som ofta sitter till vänster om siffran 1) eller gå via menyn Terminal > New Terminal.
• Fördelen: Du behöver aldrig byta fönster för att köra kommandon! Du kan aktivera din Python-miljö, köra git status eller starta ditt program, allt medan du ser din kod i fönstret ovanför.

Kommandopaletten: Din Superkraft

VS Code har ett verktyg för att hitta och köra alla dess kommandon: Kommandopaletten.

• Öppna den: Tryck Ctrl + Shift + P.
• Använd den: Börja skriva vad du vill göra, t.ex. "change theme" (byt tema) eller "git clone". Paletten visar dig alla matchande kommandon. Detta är det snabbaste sättet att hitta funktioner du inte kan kortkommandot för.

Ladda din verktygslåda: Viktiga tillägg (Extensions)

Tillägg är det som gör VS Code så otroligt kraftfullt.

1. Klicka på pusselbits-ikonen i Aktivitetsfältet för att öppna vyn för Tillägg.
2. Här kan du söka efter och installera tillägg. Här är några du bör installera direkt:

• Python (från Microsoft): Absolut nödvändigt för Python-utveckling. Ger dig funktioner som felkontroll (linting), kodkomplettering (IntelliSense), felsökning (debugging) och mycket mer.
• GitLens: Turboladdar Git-integrationen. Du kan se vem som skrev varje rad kod (git blame), enkelt se filhistorik och mycket mer, direkt i redigeraren.
• Prettier - Code formatter: Ett verktyg som automatiskt formaterar om din kod så att den följer en konsekvent och snygg stil varje gång du sparar. Perfekt för att lära sig och bibehålla god kodhygien.

Övning: Konfigurera din redigerare

Nu sätter vi ihop allt.

1. Se till att du har navigerat till din projektmapp mitt_projekt_2 i din vanliga systemterminal.
2. Öppna hela projektet i VS Code med kommandot code .
3. Öppna den integrerade terminalen i VS Code (Ctrl + ).
4. Aktivera din virtuella Python-miljö direkt i den integrerade terminalen med source .venv/bin/activate. Notera hur (.venv) dyker upp i terminalen.
5. Gå till Tilläggs-vyn i Aktivitetsfältet.
6. Sök efter och installera det officiella Python-tillägget från Microsoft.
7. Sök efter och installera GitLens.

Nästa steg

Perfekt! Du har nu en fullt konfigurerad, professionell kodredigerare. Ditt arbetsflöde är effektivt och du är redo att tackla riktiga projekt. I nästa moment, Webbens värld: HTML, CSS & JavaScript, använder vi vår nya miljö för att bygga och förhandsgranska en enkel, lokal webbsida.