Hoppa till innehåll

Guide - VSCode

Visual Studio Code är ett enkelt men kraftfullt verktyg för redigering av källkod som körs på skrivbordet och är tillgängligt för Linux, macOS och Windows. Det levereras med inbyggt stöd för JavaScript och Node.js och har ett rikt ekosystem med tillägg för många andra språk.

Steg 1. Installera Visual Studio Code

Section titled “Steg 1. Installera Visual Studio Code”

Hämta hem och installera Visual Studio Code för din plattform, Linux, Mac eller Windows. Läs mer allmänt om hur du kan gå till väga på https://code.visualstudio.com/docs/setup/setup-overview.

Steg 2. Starta Visual Studio Code

Section titled “Steg 2. Starta Visual Studio Code”

Sök efter och starta Visual Studio Code på din plattform.

Steg 3. Skapa profilen “JavaScript”

Section titled “Steg 3. Skapa profilen “JavaScript””

Med profiler kan du hålla tillägg, inställningar och tangentbindningar separata för olika typer av projekt. Skapa en profil för kursen så att tilläggen du installerar nedan inte påverkar andra projekt.

Öppna kommandopaletten (Ctrl+Shift+P, Cmd+Shift+P), sök efter Profiles: Create Profile och tryck på Enter. Ange JavaScript som namn och bekräfta med Enter.

Steg 4. Installera tillägg

Section titled “Steg 4. Installera tillägg”

Visual Studio Code kan läsa en lista med rekommenderade tillägg från filen .vscode/extensions.json i en öppen mapp. När filen finns visas en fråga om att installera alla rekommenderade tillägg på en gång.

Öppna en mapp i Visual Studio Code — till exempel den mapp du tänker använda för veckans uppgifter. Skapa därefter filen .vscode/extensions.json med följande innehåll:

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "github.copilot",
    "github.copilot-chat",
    "eamodio.gitlens",
    "streetsidesoftware.code-spell-checker",
    "streetsidesoftware.code-spell-checker-swedish"
  ]
}

Visual Studio Code visar nu en notis i nedre högra hörnet — klicka på Install All för att installera samtliga tillägg i ett steg.

Tilläggen som installeras:

Tillägg Syfte
ESLint Markerar potentiella fel och stilproblem direkt i editorn
Prettier Formaterar kod automatiskt vid sparning
GitHub Copilot Föreslår kod direkt i editorn
GitHub Copilot Chat Chattgränssnitt för att diskutera kod utan att lämna editorn
GitLens Visar Git-historik och vem som skrivit vilken rad
Code Spell Checker Fångar stavfel i kommentarer, strängar och variabelnamn
Code Spell Checker Swedish Svensk ordbok till Code Spell Checker

Steg 5. Andra intressanta tillägg

Section titled “Steg 5. Andra intressanta tillägg”

Det finns en stor mängd tillägg som kan vara intressant för dig att installera. Några skulle kunna vara:

  • indent-rainbow — färgkodar indentering och gör kodstruktur lättare att se
  • Path Intellisense — kompletterar filsökvägar automatiskt vid import-satser
  • Quokka.js — kör JavaScript direkt i editorn och visar resultaten inline
  • vscode-icons — tydligare ikoner för filer och mappar

För att installera ett tillägg manuellt, öppna tilläggshanteraren med (Ctrl+Shift+X, Cmd+Shift+X) eller klicka på tilläggsikonen i aktivitetsfältet till vänster. Sök efter tilläggets namn, till exempel indent-rainbow, och klicka på Install.

Steg 6. Klart!

Section titled “Steg 6. Klart!”

Nu är allt klart för att du ska kunna börja arbeta med Visual Studio Code. För en genomgång av Visual Studio Code rekommenderas följande resurser:

CCBY