Installere VS Code og nyttige innstillinger

01Hva er VS Code, og hvorfor velge det?

Visual Studio Code er en gratis koderedigerer utviklet av Microsoft, basert på åpen kildekode. Den er lett, fungerer likt på Windows, macOS og Linux, og tilpasser seg nesten alle språk fra HTML til Python med tusenvis av utvidelser.

Innebygd terminal, Git-integrasjon, smart kodefullføring og feilsøker kommer i ett og samme vindu. Derfor har den blitt den forhåndsvalgte editoren for webutviklere, studenter og bedriftseiere som gjør små endringer på nettstedet sitt selv.

Selv om navnet er likt, er det ikke samme produkt som Visual Studio. Visual Studio er et mye tyngre utviklingsmiljø for store .NET-prosjekter; VS Code er en editor som starter raskt og vokser med utvidelser.

Hvis du sitter på en datamaskin der du ikke kan installere programmer, kan du gjøre små endringer med nettleserversjonen vscode.dev. Terminalen og de fleste utvidelsene fungerer imidlertid fullt ut bare i skrivebordsversjonen; stegene i denne guiden gjelder installasjon på skrivebordet.

02Installasjon på Windows, macOS og Linux

Den offisielle nedlastingsadressen er code.visualstudio.com; ikke last ned installasjonsprogrammet fra andre nettsteder. Velg fremgangsmåten som passer operativsystemet ditt.

Windows

User Installer installerer bare for din egen konto uten å be om administratorrettigheter, og er det anbefalte valget for de fleste. Under installasjonen krysser du av for Add to PATH og for alternativene «Open with Code» i Utforskerens kontekstmeny; da kan du høyreklikke på en mappe og åpne den direkte i editoren.

winget install -e --id Microsoft.VisualStudioCode

macOS

Flytt programmet du lastet ned, til Applications-mappen. For å kunne bruke code-kommandoen fra terminalen åpner du kommandopaletten i editoren med Cmd+Shift+P og kjører kommandoen Shell Command: Install 'code' command in PATH.

brew install --cask visual-studio-code

Linux

På Debian- og Ubuntu-baserte systemer kan du installere .deb-pakken fra nettstedet, og på systemer som Fedora .rpm-pakken. .deb-pakken legger til Microsofts pakkelager i systemet for oppdateringer. På distribusjoner som bruker Snap holder det med én kommando.

# Med den nedlastede .deb-pakken (Ubuntu / Debian)
sudo apt install ./code_*.deb

# Snap ile
sudo snap install code --classic

03Slik bytter du språk i VS Code

For å få grensesnittet på et annet språk, for eksempel tyrkisk, holder det å installere Microsofts offisielle språkpakke, i dette tilfellet Turkish Language Pack. Søk etter språket i utvidelsespanelet (Ctrl+Shift+X) og installer pakken; bekreft når editoren foreslår omstart.

For å endre språkvalget senere kjører du kommandoen Configure Display Language i kommandopaletten og velger språket fra listen. Siden de fleste eksemplene på nettet er skrevet med engelske menynavn, velger noen utviklere bevisst å beholde det engelske grensesnittet; det er helt et personlig valg.

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

04Nyttige utvidelser ved første oppsett

Mange utvidelser er ikke bedre; få og riktige utvidelser er best: hver utvidelse øker oppstartstiden og minnebruken. For webutvikling anbefaler vi denne listen til å begynne med; du kan også installere dem fra kommandolinjen med utvidelses-ID-ene.

• Før du installerer en utvidelse, bør du sjekke utgivernavnet og antall nedlastinger; vær oppmerksom på falske utvidelser med lignende navn.
• Fjern utvidelser du ikke bruker, eller aktiver dem bare i det aktuelle arbeidsområdet.

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

# Kurulu eklentileri listele
code --list-extensions

05Anbefalte innstillinger for VS Code

Du kan endre innstillingene i grensesnittet (Ctrl+, ) eller redigere filen settings.json direkte via kommandopaletten med Preferences: Open User Settings (JSON). Innstillingene under er et godt utgangspunkt for de fleste webprosjekter.

Den mest effektive innstillingen er formatering ved lagring: hver gang du lagrer filen, ordner Prettier koden, og diskusjonene om innrykk forsvinner.

{
  "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"
}

Innstillinger per prosjekt

Hvis reglene varierer fra prosjekt til prosjekt, skriver du innstillingene i filen .vscode/settings.json i prosjektmappen. Når denne filen legges til i repoet, jobber alle i teamet med de samme formateringsreglene.

Sett opp arbeidsmiljøet med profiler

Hvis du bruker ulike sett med utvidelser til ulike oppgaver, gjør funksjonen profiler jobben enklere. I en «Web»-profil er for eksempel Prettier og ESLint aktive, og i en «Python»-profil bare Python-utvidelsene. Profiler opprettes fra Profiles-menyen under tannhjulsikonet nede til venstre, og kan byttes per mappe. Da lastes bare utvidelsene du trenger i hvert prosjekt, og editoren starter raskere.

WSL og ekstern tilkobling

Hvis du jobber med Linux-verktøy på Windows, kobler Microsofts WSL-utvidelse VS Code direkte til filene i Linux-miljøet; terminal, utvidelser og Git kjører på Linux-siden. Remote - SSH-utvidelsen fra samme familie lar deg redigere filer på en server som om de lå på din lokale maskin.

Synkronisere innstillinger

Hvis du bruker flere datamaskiner, slår du på funksjonen Settings Sync fra kontoikonet nede til venstre. Med Microsoft- eller GitHub-kontoen din synkroniseres innstillinger, utvidelser og snarveier automatisk.

06Git-integrasjon og innebygd terminal

VS Code oppdager automatisk Git hvis det er installert på datamaskinen. I panelet for kildekontroll til venstre (Ctrl+Shift+G) ser du endrede filer, går gjennom forskjeller linje for linje, skriver en commit-melding og lagrer med ett klikk. Hvordan du sender repoet til GitHub, har vi forklart i guiden vår om å laste opp et prosjekt til GitHub.

Den innebygde terminalen åpnes med snarveien Ctrl+` og starter rett i prosjektmappen. Hvis du vil bruke Git Bash i stedet for PowerShell som standardskall på Windows, bruker du alternativet Select Default Profile i rullegardinmenyen i terminalpanelet.

• Hvis Git ikke er installert, viser panelet en advarsel; installer Git først og start editoren på nytt.
• I JavaScript-prosjekter kan du kjøre npm-kommandoer fra denne terminalen etter at oppsettet av Node.js er fullført.
• Guiden vår om oppsett av React med Vite er et godt neste steg når du skal starte et nytt React-prosjekt.

07Snarveier som sparer tid

Å lære seg noen få snarveier reduserer hvor ofte du strekker deg etter musen betydelig. På macOS brukes Cmd i stedet for Ctrl og Option i stedet for Alt.

08Vanlige problemer og løsninger

VS Code fungerer som regel problemfritt; de fleste problemene skyldes utvidelser eller PATH-innstillingen. Hvis editoren har blitt treg, kan du se hvilken utvidelse som skaper belastning med Developer: Show Running Extensions fra kommandopaletten.

Hvis code-kommandoen ikke gjenkjennes i terminalen, kjører du installasjonsprogrammet på nytt med alternativet Add to PATH på Windows, og gjentar Shell Command-kommandoen på macOS. Hvis formatering ved lagring ikke fungerer, er som regel ikke standardformatereren valgt; høyreklikk i filen og gjør Prettier til standard under Format Document With.

I et webprosjekt er resultatet like viktig som editorinnstillingene: ren og konsekvent kode gjør også vedlikeholdet av arbeidet med hastighet og ytelse og UI/UX-design enklere. Vi jobber med den samme ryddigheten i Aurora Yazılım sine webdesign-prosjekter.