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.
Innehåll
- Vad är en textredigerare?
- Vad är Visual Studio Code?
- Starta VS Code
- Viktiga delar i VS Code
- Skapa och redigera filer
- Kommandopaletten
- Tillägg
- Sammanfattning
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, SGML 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.
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.
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 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 i kommande kurser, kanske även i din jobb karriär, 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. Men vi kan inte garanntera samma hjälp med er egen valda utvecklingsmiljön.
Starta VS Code
VS Code finns installerat och lätt tillgängligt i våra Linux-datorsalar. Klicka på Applications nere 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:

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.
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.
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 börja 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.
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 avsnitt är det dags att göra diagnos D1. Gå till kursrummet i Lisam och klicka på Test i vänstermenyn.
Sidansvarig: Johan Falkenjack
Senast uppdaterad: 2024-07-26