D2. Visual Studio Code

VS Code är en av världens mesta använda utvecklingsmiljöer och i det här kapitlet ska vi titta lite grann på några av de mest grundläggande funktionerna.

1. Vad är Visual Studio Code?

Visual Studio Code brukar oftast benämnas VS Code. Det är en integrerad utvecklingsmiljö (IDE), vilket innebär att den innehåller inte bara en textredigerare utan också flera andra verktyg för att stödja programutveckling.

VS Code lanserades av Microsoft 2015. Det är en öppen och kostnadsfri variant av deras större kommersiella plattform Visual Studio, så om du är intresserad av att ladda ner VS Code till din egen dator, se till att du söker efter Visual Studio Code och inte bara Visual Studio (som alltså är något annat).

Undersökningar visar att VS Code är en av världens mest populära utvecklingsmiljöer.

Att utveckla program i VS Code skiljer sig ganska markant från att använda Emacs. Båda miljöerna går att konfigurera på längden och tvären, men de representerar två olika filosofier. VS Code har ett betydligt mer modernt utseende med ett grafiskt gränssnitt där du inte bara behöver använda tangentbordet (även om det förstås finns många smarta snabbkommandon). Du kan också använda de vanliga tangentkombinationerna för att klippa och klistra (Ctrl-C, Ctrl-V) som de flesta är vana vid från andra system.

Antagligen kommer du att använda VS Code ganska mycket i kommande kurser, liksom under resten av karriären, men just eftersom VS Code är så avancerat kan det vara bra att vänta lite med att dra igång det på allvar. Det kan vara svårt att lära sig programmera samtidigt som du försöker lära dig ett nytt krångligt verktyg. Med det sagt ska vi ändå nosa lite på VS Code.

2. Starta VS Code

VS Code finns installerat och lätt tillgängligt i våra Linux-datorsalar. Klicka på Applications uppe till vänster för att öppna huvudmenyn. I undermenyn Development klickar du sedan på Visual Studio Code.

När du har startat VS Code bör skärmen se ut ungefär så här:

Viktiga delar i VS Code

Kolumnen med ikoner längst till vänster är aktivitetsfältet (Activity Bar). Den används för att komma åt huvudfunktionerna i VS Code.

Omedelbart till höger om aktivitetsfältet finns sidopanelen (Side Bar). Innehållet i den beror på vad du valt i aktivitetsfältet. Just nu är den översta ikonen i aktivitetsfältet Explorer, så innehållet i sidopanelen handlar just nu om att utforska olika filer.

Den större ytan till höger är redigeringsfönstret (Editor). Här kan du ha många olika flikar öppna. Just nu är endast fliken Welcome öppen, och den visar några exempel på saker som du kanske vill börja med. Om du tröttnar på den kan du ta bort krysset längst ner, så öppnas VS Code utan den nästa gång.

Längst ner på skärmen syns det smala statusfältet (Status Bar). Till vänster ser vi att vi just nu har 0 varningar och 0 fel, vilket ju känns betryggande. I statusfältet kommer t.ex. visas vilken rad och vilken kolumn du står på när du redigerar en fil.

En viktig del som inte syns just nu är panelen. Den dyker upp lite senare när du ska testköra ett program och brukar oftast hamna under redigeringsfönstret.

3. Skapa och redigera filer

Om du ska använda VS Code för att arbeta med ett redan påbörjat projekt vill du säkert klicka på Open File eller ännu hellre Open Folder. Det senare är att rekommendera om du har ett projekt som består av flera filer. Men just nu ska vi inte göra något avancerat, utan vi klickar bara på New File för att skapa en ny fil som vi kan redigera i VS Code.

VS Code vill gärna veta vad det är för typ av fil vi tänker jobba med, så att den kan aktivera rätt typ av stöd. Innehållet i den här menyn kan se lite olika ut, beroende på vilka utökningar du har installerat och vad du har jobbat med nyligen. I det här fallet väljer vi bara Text File, vilket innebär att vi inte får något särskilt stöd för att redigera programkod.

Bilden ovan visar hur det kan se ut när vi redigerar vanlig text i VS Code. Till vänster i redigeringsfönstret ser vi radnumreringen. Vi befinner oss just nu på rad 12, som har en lite starkare färg och en diskret ram runt raden.

Till höger syns ett litet grått dis. Detta är en så kallad minimap som visar en utzoomad översikt över hela filen. Du kan klicka och dra direkt i din minimap för att snabbt hitta till rätt ställe i filen. På skrollisten längst till höger syns det tydligt att markören just nu befinner sig ungefär i mitten av filen.

Förutom att ha flera filer öppna i olika flikar kan du även visa flera flikar samtidigt. Om du högerklickar på flikens rubrik kan du i menyn välja olika varianter av funktionen split. Om du t.ex. väljer Split Right får du en till kopia av samma fil i en extra flik till höger. Detta kan vara användbart om du vill se två delar av samma fil samtidigt. Du kan på detta sätt också lägga två olika filer bredvid varandra för att jämföra eller snabbt kopiera innehåll.

Övning
Starta VS Code och skapa en ny textfil. Fyll den med innehåll och klicka runt lite i systemet. Prova några av de funktioner som har nämnts ovan.

4. Kommandopaletten

Huvudmenyn i VS Code finns under de tre vågräta strecken uppe till vänster på skärmen, precis till höger om VS Code-loggan. Du kan förstås leta igenom alla dessa menyer efter de hundratals funktioner som finns i VS Code, men ett snabbare sätt är att använda kommandopaletten (Command Palette).

Kommandopaletten är helt enkelt ett sätt att snabbt söka reda på vad du vill göra. Öppna kommandopaletten genom att trycka Ctrl-Shift-P eller F1. Då öppnas en sökrad längst upp på skärmen.

I exemplet ovan har vi öppnat kommandopaletten och skrivit in Prefer för att brja söka efter inställningar (preferences).

OBS!
Kommandopaletten är inte samma sak som sökrutan som finns längst upp på skärmen hela tiden. Sökrutan används för att snabbt hitta någonting bland dina öppna filer. Kommandopaletten används för att söka bland kommandon som finns i VS Code.

Övning
Öppna kommandopaletten och pröva att söka efter till exempel Open Settings. Bläddra runt bland de olika personliga inställningarna som du kan göra.

5. Tillägg

Du kan anpassa VS Code på i princip två olika sätt. Du kan göra olika inställningar, som vi såg ovan, men du kan också installera tillägg (Extensions).

Tillägg är små paket som kan utöka VS Code på olika sätt. Det kan handla om stöd för nya programmeringsspråk, särskilda verktyg, färgteman, formattering, etc. En del tillägg har skapats av välkända företag eller organisationer, medan andra tillägg tillhandahålls av enskilda utvecklare. Installera bara tillägg från betrodda källor. Läs recensionerna och kolla på hur många andra som har laddat ner tillägget.

Tillägg hanteras via ikonen i aktivitetsfältet som ser ut som fyra små klossar. Om du klickar på den fylls din sidopanel av ett par olika sektioner: en som visar vilka tillägg som redan finns installerade och en som visar några tillägg som VS Code rekommenderar, baserat på vad den tror att du behöver.

Övning
Klicka på Extensions-ikonen. Kolla om du har några tillägg för att hantera Python. Om inte, leta reda på och installera ett tillägg så att du senare kan redigera Python-filer.

Sammanfattning

• VS Code är inte samma sak som Visual Studio.
• VS Code består av flera delar: aktivitetsfältet, sidopanelen, redigeringsfönstret, panelen och statusfältet.
• Du kan ändra hur VS Code fungerar genom att antingen göra olika inställningar eller genom att aktivera olika tillägg (Extensions).
• Kommandopaletten är ett enkelt sätt att snabbt söka reda på olika saker du kan göra med din kod eller med VS Code som helhet.

Vi har verkligen bara skrapat lite på ytan när det gäller VS Code. Vi har till exempel inte alls gått igenom hur du faktiskt redigerar källkod eller testkör ditt program. Allt sådant får vi återkomma till längre fram i kursen.

Diagnos
När du har läst detta kapitel och övat lite på att använda Visual Studio Code är det dags att göra diagnos D2.