Installera VS Code och användbara inställningar

01Vad är VS Code och varför välja det?

Visual Studio Code är en gratis och öppen källkod-baserad kodeditor från Microsoft. Den är lätt, fungerar likadant i Windows, macOS och Linux och passar med tusentals tillägg i stort sett alla språk, från HTML till Python.

Inbyggd terminal, Git-integration, smart kodkomplettering och felsökare finns i ett enda fönster. Därför har den blivit den förvalda editorn för webbutvecklare, studenter och företagare som gör små ändringar på sin webbplats själva.

Trots det liknande namnet är det inte samma produkt som Visual Studio. Visual Studio är en mycket tyngre utvecklingsmiljö för stora .NET-projekt; VS Code är en editor som startar snabbt och växer med tillägg.

Sitter du vid en dator där du inte kan installera något kan du göra små ändringar med webbversionen vscode.dev. Terminalen och de flesta tillägg fungerar dock fullt ut bara i skrivbordsversionen; stegen i den här guiden gäller installation på datorn.

02Installation i Windows, macOS och Linux

Den officiella nedladdningsadressen är code.visualstudio.com; ladda inte ner installationsprogram från andra webbplatser. Välj vägen som passar ditt operativsystem.

Windows

User Installer installerar bara för ditt konto utan att be om administratörsbehörighet och är det rekommenderade alternativet för de flesta användare. Under installationen markerar du Add to PATH och alternativen “Open with Code” i Utforskarens snabbmeny; då kan du högerklicka på en mapp och öppna den direkt i editorn.

winget install -e --id Microsoft.VisualStudioCode

macOS

Flytta den nedladdade appen till mappen Applications. För att kunna använda kommandot code från terminalen öppnar du kommandopaletten i editorn med Cmd+Shift+P och kör kommandot Shell Command: Install 'code' command in PATH.

brew install --cask visual-studio-code

Linux

På Debian- och Ubuntu-baserade system kan du installera .deb-paketet från webbplatsen, och på system som Fedora .rpm-paketet. .deb-paketet lägger till Microsofts förråd i systemet för uppdateringar. I distributioner med Snap räcker ett enda kommando.

# Med det nedladdade .deb-paketet (Ubuntu / Debian)
sudo apt install ./code_*.deb

# Snap ile
sudo snap install code --classic

03Hur byter man språk i VS Code?

För att få gränssnittet på svenska räcker det att installera Microsofts officiella tillägg Swedish Language Pack. Skriv “Swedish” i tilläggspanelen (Ctrl+Shift+X) och installera; bekräfta när editorn föreslår en omstart.

För att ändra språkval senare kör du kommandot Configure Display Language i kommandopaletten och väljer språk i listan. Eftersom de flesta exempel på nätet är skrivna med engelska menynamn väljer vissa utvecklare medvetet att behålla ett engelskt gränssnitt; det är helt ett personligt val.

code --install-extension MS-CEINTL.vscode-language-pack-tr

04Användbara tillägg vid första installationen

Det finns många tillägg, men få och rätt tillägg är bättre: varje tillägg ökar starttiden och minnesanvändningen. För webbutveckling rekommenderar vi listan nedan till att börja med; du kan också installera dem från kommandoraden med tilläggens ID.

• Kontrollera utgivarens namn och antalet nedladdningar innan du installerar ett tillägg; se upp för falska tillägg med liknande namn.
• Ta bort tillägg du inte använder, eller aktivera dem bara i den arbetsyta där de behövs.

code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --install-extension EditorConfig.EditorConfig

# Kurulu eklentileri listele
code --list-extensions

05Rekommenderade inställningar i VS Code

Du kan ändra inställningarna i gränssnittet (Ctrl+,) eller redigera filen settings.json direkt från kommandopaletten med Preferences: Open User Settings (JSON). Inställningarna nedan är en bra utgångspunkt för de flesta webbprojekt.

Den mest effektiva inställningen är formatering vid sparande: varje gång du sparar filen ordnar Prettier koden, och diskussionerna om indrag försvinner.

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.eol": "\n"
}

Inställningar per projekt

Om reglerna varierar från projekt till projekt skriver du inställningarna i filen .vscode/settings.json i projektmappen. När den filen läggs till i repot arbetar alla i teamet med samma formateringsregler.

Ordning med profiler

Använder du olika uppsättningar tillägg för olika uppgifter gör funktionen profiler det enklare. Till exempel är Prettier och ESLint aktiva i en “Web”-profil, och bara Python-tilläggen i en “Python”-profil. Profiler skapas i menyn Profiles under kugghjulet nere till vänster och kan bytas per mapp. På så sätt laddas bara de tillägg du behöver i varje projekt, och editorn startar snabbare.

WSL och fjärranslutning

Arbetar du med Linux-verktyg i Windows kopplar Microsofts WSL-tillägg VS Code direkt till filerna i Linux-miljön; terminal, tillägg och Git körs på Linux-sidan. Tillägget Remote - SSH ur samma familj låter dig redigera filer på en server som om de låg på din lokala dator.

Synkronisera inställningar

Använder du flera datorer slår du på funktionen Settings Sync via kontoikonen nere till vänster. Med ditt Microsoft- eller GitHub-konto synkas inställningar, tillägg och genvägar automatiskt.

06Git-integration och inbyggd terminal

VS Code upptäcker automatiskt Git som är installerat på din dator. I panelen för källkodskontroll till vänster (Ctrl+Shift+G) ser du ändrade filer, granskar skillnader rad för rad, skriver ett commit-meddelande och sparar med ett klick. Hur du skickar repot till GitHub har vi gått igenom i guiden ladda upp ett projekt till GitHub.

Den inbyggda terminalen öppnas med genvägen Ctrl+` och startar direkt i projektmappen. Vill du i Windows byta standardskal från PowerShell till Git Bash använder du alternativet Select Default Profile i rullgardinsmenyn i terminalpanelen.

• Om Git inte är installerat visar panelen en varning; installera Git först och starta om editorn.
• I JavaScript-projekt kan du köra npm-kommandon från den här terminalen när installationen av Node.js är klar.
• För att börja ett nytt React-projekt är vår guide om installation av React med Vite ett bra nästa steg.

07Genvägar som sparar tid

Att lära sig några genvägar utantill minskar märkbart hur ofta du sträcker dig efter musen. I macOS används Cmd i stället för Ctrl och Option i stället för Alt.

08Vanliga problem och lösningar

VS Code fungerar oftast problemfritt; de flesta problem beror på tillägg eller PATH-inställningen. Har editorn blivit långsam kan du se vilket tillägg som belastar den med Developer: Show Running Extensions i kommandopaletten.

Om kommandot code inte känns igen i terminalen kör du installationsprogrammet igen med alternativet Add to PATH i Windows, och upprepar Shell Command-kommandot i macOS. Om formatering vid sparande inte fungerar har oftast ingen standardformaterare valts; högerklicka i filen och gör Prettier till standard via menyn Format Document With.

I ett webbprojekt är resultatet lika viktigt som editorns inställningar: ren och konsekvent kod gör även underhållet av arbetet med hastighet och prestanda och UI/UX-design enklare. Vi arbetar med samma ordning i Aurora Yazılıms projekt för webbdesign.