D1. 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.

Vad är en textredigerare?

En textredigerare eller editor är ett datorprogram för att redigera oformaterad text, i den meningen att filen inte innehåller dolda koder för textstorlek, typsnitt och liknande. Det är bara text, rakt upp och ner.

Moderna textredigerare kan ha stöd för många olika dokumentformat, också sådana som inte med bästa vilja kan kallas oformaterad text, men vad man ser på skärmen är innehållet i själva filen man redigerar. Textredigeraren kan dölja ointressanta delar av filen eller filerna, färglägga syntaktiska element och lägga in hyperlänkar mellan relaterade avsnitt - men visar i motsats till WYSIWYG-program inte i första hand det utseende ett dokument är avsett att få vid utskrift.

Textredigerare används ofta vid programmering, konfiguration av datorsystem, vid författande av e-post och vid författande av dokument med hjälp av olika märkspråk (eng. markup languages) som t.ex. LaTeX, Markdown och HTML. Många system för enskilda sådana funktioner har enkla inbyggda textredigerare, men ofta också möjlighet att koppla in ett mångsidigare externt program. Omvänt innehåller en del textredigerare en integrerad utvecklingsmiljö, ett e-postprogram eller annan funktionalitet som inte ingår i begreppet (det har bland annat påståtts att den klassiska textredigeraren Emacs idag är mer av ett helt operativsystem än en textredigerare, huruvida det är menat som beröm eller kritik varierar).

Vad är Visual Studio Code?

Visual Studio Code brukar oftast benämnas VS Code. VS Code är ett mellanting mellan en integrerad utvecklingsmiljö (IDE) och en ren textredigerare.

• Vad som skiljer VS Code från en full IDE som vanliga Visual Studio eller PyCharm är att VS Code saknar avancerade inbyggda verktyg som kompilator/interpretator, debugger, byggsystem, osv. som en erfaren programmerare kan dra nytta av.
• Vad som skiljer VS Code från en ren textredigerare är att det finns en hel del mer lättviktiga verktyg som inbyggd filnavigator och möjligheten att öppna en terminal inne i programmet. VS Code är också modulärt och byggt för att vara lätt att bygga tillägg (extensions) till och konfigurera precis som användaren vill. Med rätt extensions och inställningar kan VS Code därför vara minst lika kraftfullt som andra mer traditionella IDE:er.

VS Code lanserades av Microsoft 2015 som ett öppet, kostnadsfritt och modulärt komplement till deras kommersiella plattform Visual Studio. 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.

VS Code har ett 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 många vanliga tangentkombinationer från andra Microsoft-produkter som Windows och Office för att t.ex. klippa ut och klistra in (Ctrl-C, Ctrl-V).

Antagligen kommer du att använda VS Code i kommande kurser, kanske även i ditt framtida yrke, därför kommer vi att bekanta oss med VS Code i denna kurs. Med det sagt så är det fritt fram att använda en egen utvecklingsmiljö, om du redan har en favorit sedan tidigare. Vi kan dock inte garantera samma hjälp med er egenvalda utvecklingsmiljö som vi kan med VS Code, och många mer avancerade system har stöd som lätt blir till en krycka för nybörjaren. Du ska vara medveten om att vid salsexaminationen så kommer du ha tillgång till en ren installation av VS Code utan extensions, och inget mer (och inget internet för att installera några extensions heller).

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å VS Code.

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

Du kan också starta VS Code från terminalen med kommandot code. Särskilt praktiskt är det att kunna öppna katalogen man står i genom att köra code ., men i LiUs Linux-miljö måste man först lägga till modulen prog/vscode.

Viktiga delar i VS Code

Kolumnen med ikoner längst till vänster i VS Code-fönstret ä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. Vi ser dock i bilden att det står “NO FOLDER OPENED” vilket innebär att Explorer inte visar något.

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 i fönstret 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.

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 tillägg 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å rullningslisten 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.

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. (Om VS Code-fönstret är tillräckligt brett kommer istället delar av menyn finnas direkt bredvid 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 börja söka efter inställningar (preferences).

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). (Är du riktigt driven så kan du också modifiera VS Code genom att redigera eller skriva dina egna 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.

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 avsnitt är det dags att göra D1. Visual Studio Code. Gå till kursrummet i Lisam och klicka på Test i vänstermenyn.