Kjør JavaScript i VS Code: En komplett guide for nybegynnere

by
Tweet
Share
Share
Pin
0 Shares

JavaScript er konsekvent anerkjent som et av de mest populære programmeringsspråkene blant utviklere.

I en Stack Overflow-undersøkelse fra 2023, svarte over 63 % av de spurte at de benytter seg av JavaScript. Samtidig er Visual Studio Code (VS Code) et meget brukt integrert utviklingsmiljø (IDE). Den samme undersøkelsen viste at VS Code er den foretrukne kodeeditoren, med over 73 % av respondentene som stemte på den.

Visual Studio Code har innebygd støtte for JavaScript, i tillegg til en rekke andre språk. I denne artikkelen skal vi utforske fordelene ved å kjøre JavaScript i Visual Studio Code, hvordan du setter opp et JavaScript-prosjekt, en steg-for-steg-guide for å kjøre JavaScript i VS Code, samt anbefalte fremgangsmåter for å effektivisere din JavaScript-kode i VS Code.

Hvorfor er det gunstig å bruke JavaScript i VS Code?

JavaScript er et av de få språkene som støttes direkte av VS Code. Her er noen av årsakene til at det kan være fordelaktig å kjøre JavaScript i VS Code:

  • Direkte kjøring og testing av kode: Du kan skrive og utføre JavaScript-kode uten å forlate redigeringsmiljøet. VS Code vil automatisk identifisere og behandle all kode i filer med filendelsen .js som JavaScript-kode. Denne editoren vil også markere eventuelle feil i koden din underveis, noe som forenkler feilsøkingen.
  • Integrert terminal: Du trenger ikke å bytte mellom programmer for å utføre kommandoer, for eksempel for å opprette nye mapper eller filer, eller for å håndtere versjonskontroll. Terminalen viser også feilmeldinger.
  • Omfattende utvidelsesmuligheter: Hvis du trenger funksjonalitet som ikke finnes i standardversjonen av VS Code, kan du finne et bredt utvalg av utvidelser. Disse utvidelsene kan gi deg ekstra funksjoner og støtte for ulike biblioteker og rammeverk.
  • Hot reloading og live server: VS Code lar deg aktivere automatisk lagring av JavaScript-koden din. Med live server-funksjonen kan du se koden din direkte i nettleseren mens du jobber. Hot reload sikrer at endringer oppdages automatisk uten at du trenger å starte live-serveren på nytt.
  • IntelliSense og kodefullføring: VS Code gir intelligente kodeforslag og automatisk fullføring. Dette vil spare deg for tid, slik at du kan fokusere mer på logikken i koden din.
  • Kompatibilitet på tvers av plattformer: Du kan installere VS Code på macOS, Linux og Windows. Editoren støtter også TypeScript, en utvidelse av JavaScript som legger til statisk typing.

Slik kjører du JavaScript i VS Code

Det er enkelt å konfigurere et miljø for å kjøre JavaScript-kode, uavhengig av operativsystemet. For best resultat bør datamaskinen din ha minst 4 GB RAM. Følg disse trinnene for å starte:

Konfigurer Node.js

Node.js er et populært JavaScript runtime-miljø. Med Node.js kan du kjøre JavaScript utenfor en nettleser. Det har også muliggjort bruk av JavaScript for backend-utvikling, med rammeverk som Express.js.

Du kan laste ned Node.js gratis hvis du ikke allerede har det installert. Du kan også sjekke om det er installert ved å bruke kommandoen:

node -v

Hvis det er installert, vil du se noe lignende dette i terminalen din:

Konfigurer Visual Studio Code for JavaScript-utvikling

Visual Studio Code kan fungere både som en kodeeditor og et IDE, avhengig av bruken. VS Code har standardstøtte for JavaScript, men noen funksjoner krever installasjon av utvidelser.

VS Code er gratis å laste ned. Du kan velge den versjonen som passer for ditt operativsystem fra nedlastingssiden.

Opprett et JavaScript-prosjekt

Du har nå den nødvendige programvaren (runtime-miljø og kodeeditor) for å utvikle en JavaScript-applikasjon. JavaScript brukes ofte for å legge til interaktivitet på nettsider, gjerne i kombinasjon med HTML og CSS. Språket kan også brukes til skripting og datastrukturer.

La oss opprette en enkel applikasjon, som vi kan kalle JavaScript-VsCode-app.

Du kan bruke disse kommandoene i terminalen:

mkdir JavaScript-VSCode-app
cd JavaScript-VSCode-app
touch app.js
code .

Skriv JavaScript-kode i Visual Studio Code

For å demonstrere, skal vi skrive litt enkel JavaScript-kode. Slik ser prosjektet vårt ut i kodeeditoren:

Som du ser, har vi kun én fil (app.js). Vi kan nå skrive et enkelt program som tester om et tall er partall. Koden skrives i app.js-filen. Her er koden vår:

function isEven(number) {
    return number % 2 === 0;
}
// Example usage:
let myNumber = 8;
if (isEven(myNumber)) {
    console.log(myNumber + " is even.");
} else {
    console.log(myNumber + " is odd.");
}

Kjør JavaScript-kode i Visual Studio Code

Vi er nå klare til å kjøre JavaScript-koden i VS Code. La oss først forstå hva koden gjør. Vi har laget en funksjon som heter «isEven». Funksjonen tar et tall og returnerer «true» hvis tallet er delelig med to. Hvis tallet ikke er delelig med to, returneres «false».

Vi kan nå kjøre denne kommandoen i terminalen:

node app.js

Kommandoen kan kjøres enten i rotkatalogen eller i VS Codes terminal.

Etter å ha kjørt koden får vi utskriften «8 is even» i terminalen.

Hva om vi sjekker om tallet 9 er partall? Vi kan endre koden slik:

function isEven(number) {
    return number % 2 === 0;
}

// Example usage:
let myNumber = 9;
if (isEven(myNumber)) {
    console.log(myNumber + " is even.");
} else {
    console.log(myNumber + " is odd.");
}

Dette er resultatet etter å ha kjørt koden:

Som du ser, er utskriften «9 is odd».

Legg til nødvendige utvidelser

Programmet vi har laget er enkelt. Ved mer komplekse applikasjoner kan det være nyttig å bruke verktøy for å analysere koden eller for å feilsøke. På venstre side av VS Code, klikk på det nest siste ikonet fra bunnen.

Du kan også bruke snarveien: CTRL+Shift+X.

Her kan du søke etter ulike utvidelser som du kan bruke for koden din. For eksempel kan du søke etter ESLint.

Som du ser, er utvidelsene allerede aktivert. Les beskrivelsene for de ulike utvidelsene for å finne ut hvordan du konfigurerer og bruker dem.

Bruk Code Runner-utvidelsen

Visual Studio Code støtter mange programmeringsspråk. Med Code Runner kan du kjøre kode for de fleste vanlige programmeringsspråk. Finn utvidelsesfanen på venstre side av VS Code og søk etter Code Runner.

Klikk installer og aktiver utvidelsen, og du er klar til å kjøre kode. Vi legger til en enkel instruksjon, console.log(«Hello, World!»); i app.js-filen. For å kjøre koden bruker vi Code Runner. Trykk F1, og skriv deretter «RUN CODE».

Dette er resultatet i terminalen:

[Running] node "/home/tk/JavaScript-VSCode-app/app.js"
Hello, World!
[Done] exited with code=0 in 2.106 seconds

Anbefalte fremgangsmåter for å skrive effektiv JavaScript-kode

Oppsettet vi har satt opp er perfekt for enkle JavaScript-programmer. Men det er viktig å ha disse anbefalingene i bakhodet når du jobber med JavaScript i VS Code:

  • Bruk en kodelinje: Jo større JavaScript-filen er, jo vanskeligere kan det være å lese koden. Med en utvidelse som Prettier ESLint kan du oppdage feil tidlig og gjøre koden mer leselig.
  • Hold ulike språk i separate filer: Et typisk front-end-prosjekt krever gjerne HTML-, CSS- og JavaScript-kode. Det kan være fristende å skrive all koden i ett dokument. Det er likevel lurt å ha separate filer for HTML, CSS og JavaScript.
  • Utnytt fordelene med utvidelser: VS Code Marketplace tilbyr mange utvidelser som forenkler arbeidet med ulike biblioteker. Utforsk Markedsplassen og velg utvidelser med gode vurderinger og dokumentasjon.

Konfigurer Git for versjonskontroll i Visual Studio Code

Vi har nå gjennomgått trinnene for å sette opp VS Code og kjøre JavaScript. I tillegg kan det være nødvendig å bruke et versjonskontrollsystem som Git for å spore endringer i koden, eller for å laste den opp til et eksternt depot som GitHub. Her er trinnene du kan følge:

  • Installer Git: Git er det mest brukte versjonskontrollsystemet i utviklingsmiljøer. Last ned Git versjonen som passer for ditt operativsystem. Etter installasjonen kan du sjekke Git-versjonen ved å kjøre denne kommandoen:
git -v

Hvis installasjonen var vellykket, vil du se noe som dette i terminalen:

  • Opprett et Git-lager: Du kan spore alle endringene dine med Git. Kjør denne kommandoen i rotmappen til prosjektet ditt:
git init

  • Konfigurer Git-identiteten din: Du må informere Git om hvem du er ved å legge til brukernavn og e-postadresse. Kjør disse kommandoene for å konfigurere:

git config –global user.name «Ditt Navn»

git config –global user.email «[email protected]«

Erstatt «Ditt Navn» og «[email protected]» med de faktiske detaljene.

  • Stage og commit endringer: Nå som Git er konfigurert, kan du «stage» og «commit» endringene dine. Kjør denne kommandoen for å se alle filene som ikke er sporet:
git status

Du vil nå se alle filene som ikke er sporet.

Kjør denne kommandoen for å «stage» endringene:

git add .

Kjør «git status» igjen, og du vil se noe som ligner på dette:

Du kan nå «commit» filene dine. Kjør denne kommandoen:

git commit -m "din commit-melding"

Erstatt «din commit-melding» med en beskrivelse av hva du har gjort.

Du kan nå koble Git-versjonskontrollen din til eksterne depoter som GitHub.

Konklusjon

Vi håper du nå har en bedre forståelse av hvordan du setter opp et utviklingsmiljø for JavaScript i VS Code. Du kan trenge ekstra utvidelser for å jobbe med JavaScript-biblioteker og rammeverk. Husk alltid å oppdatere Visual Studio Code for å få tilgang til de nyeste funksjonene.

Les gjerne artikkelen vår om de beste ressursene for å lære JavaScript og forbedre dine ferdigheter.