Hur man kör JavaScript i Visual Studio Code och programmerar som ett proffs

JavaScript har konsekvent rankats som de flesta utvecklares favoritprogrammeringsspråk.

Över 63 % av de tillfrågade som intervjuades i en 2023 Stackoverflow-undersökning sa att de använder JavaScript. Å andra sidan är Visual Studio-kod en populär integrerad utvecklingsmiljö (IDE). Det samma undersökning visade att VS Code är den mest föredragna kodredigeraren, med över 73 % av de tillfrågade som röstade för den.

Visual Studio Code stöder JavaScript, bland många andra språk. I den här artikeln kommer jag att beskriva vikten av att köra JavaScript i Visual Studio Code, hur man skapar ett JavaScript-projekt/skriver kod, ger en steg-för-steg-guide för att köra JavaScript i VS Code och de bästa metoderna för att köra JavaScript-kod i VS-koden.

Vikten av att köra JavaScript i VS Code

JavaScript är ett av de få språk som stöds direkt från förpackningen VS-kod. Det här är några av anledningarna till att du kanske vill köra JavaScript på VS-kod:

  • Exekvera och testa kod: Du kan skriva och köra JavaScript-kod utan att lämna editorn. Den här redigeraren kommer att behandla allt du skriver i filer med filtillägget .js som JavaScript-kod. Denna kodredigerare kommer också att markera fel i din kod när du skriver och göra det enkelt att felsöka.
  • Den har en integrerad terminal: Du behöver inte lämna kodredigeraren för att köra kommandon för att skapa nya mappar eller filer eller göra versionskontroll. Denna terminal låter dig också se felmeddelanden.
  • Ett stort ekosystem: Du kan alltid leta efter tillägg om funktionen du letar efter inte stöds av VS Code direkt. Du kan använda sådana tillägg för extra funktioner och få stöd för olika bibliotek och ramverk.
  • Hot omladdning och liveserver: Du kan aktivera autosave för din JavaScript-kod på VS Code. Liveserveralternativet låter dig också köra JavaScript-kod på din webbläsare när du kodar. Hot reload-funktionen säkerställer att kodredigeraren automatiskt väljer alla ändringar, och du behöver inte starta om liveservern.
  • IntelliSense och kodkomplettering: Ibland behöver kodredigerare bara att du börjar skriva kod och kommer att ge förslag genom intelligent kodförslag och autokomplettering. Denna funktion kommer att spara tid; du behöver bara fokusera på logiken.
  • Plattformsövergripande kompatibilitet: Du kan installera VS Code på macOS, Linux och Windows. Denna kodredigerare stöder också TypeScript, ett upphöjt skript av JavaScript som introducerar typer.

Kör JavaScript i VS Code

Det är enkelt att ställa in en miljö för körning av JavaScript-kod, oavsett operativsystem. Helst bör din maskin ha minst 4 GB RAM för dessa installationer. Följ dessa steg för att komma igång.

Konfigurera Node.js

Node.js är en av de mest populära JavaScript-runtime-miljöerna. Med Node.js kan du köra JavaScrpt utanför en webbläsarmiljö. Node.js har också gjort det möjligt att använda JavaScript i backend-utveckling med sina ramverk som Express.js.

Du kan ladda ner Node.js gratis om du inte redan har det på din dator. Du kan också kontrollera om det är installerat på din maskin med detta kommando:

node -v

Om den är installerad kommer du att se något sånt här på din terminal:

Konfigurera Visual Studio Code för Javascript-utveckling

Visual Studio Code kan beskrivas som en kodredigerare och en IDE, beroende på användningsfallet. VS Code stöder JavaScript som standard. Vissa JavaScript-funktioner behöver dock tillägg för att kunna köras.

VS Code är gratis att ladda ner. Du kan välja relevant version för nedladdning baserat på ditt operativsystem.

Skapa ett JavaScript-projekt

Du har nu den grundläggande programvaran (runtime-miljö och kodredigerare) för att skapa en JavaScript-applikation. JavaScript används för att lägga till interaktivitet på webbplatser och används mest med HTML och CSS. Men du kan också använda den för skript och datastrukturer.

Jag kan nu skapa en enkel applikation och kalla den JavaScript-VsCode-app.

Du kan använda dessa kommandon:

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

Skriva JavaScript-kod i Visual Studio Code

För den här demonstrationen kommer jag bara att skriva JavaScript-kod. Så här ser vårt projekt ut i kodredigeraren.

Som du kan se har vi bara en fil (app.js). Jag kan nu skriva ett enkelt program som kontrollerar om ett tal är jämnt. Jag kommer att skriva min kod på app.js-filen. Det här är min kod:

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.");
}

Kör JavaScript-kod i Visual Studio Code

Vi är nu redo att köra JavaScript i VS-koden. Men vi måste förstå vad den här koden gör. Vi har en funktion som vi har döpt till ’isEven’. Vår funktion tar ett tal och returnerar ’sant’ om talet är delbart med två. Men om talet inte är delbart med två kommer det att returnera ”falskt”.

Vi kan nu köra detta kommando:

node app.js

Du kan köra den i rotkatalogen eller VS Code-terminalen.

Efter att ha kört koden vi angav i det sista steget får vi ’8 är jämn’ som utdata.

Vad händer om vi kontrollerar om 9 är jämnt? Vi kan ändra vår kod enligt följande:

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.");
}

Detta är vad vi får efter att vi kört vår kod:

Som du kan se är ’9 udda’ vår utdata.

Lägg till nödvändiga tillägg

Programmet vi har skapat ovan är enkelt. Däremot kanske du vill bygga en komplex app där du behöver luta din kod eller till och med felsöka. Klicka på den näst sista knappen på den vänstra sidan av VS-koden.

Du kan också använda kortkommandon: CTRL+Skift+X.

Du kan nu söka efter olika tillägg att använda på din kod. Jag kan till exempel söka efter ESLint.

Du kan se att tilläggen redan är aktiverade på min sida. Kontrollera alltid beskrivningen av olika tillägg för att göra dem enkla att konfigurera och använda.

Använd Code Runner Extension

Visual Studio Code stöder hundratals programmeringsspråk. Du kan använda Code Runner för att exekvera koder i de flesta vanliga programmeringsspråken. Leta reda på tilläggsfliken på vänster sida av din VS-kod och sök efter Code Runner.

Klicka på installera och aktivera tillägget, och du är nu redo att köra din kod. Jag har ett enkelt uttalande som säger console.log(“Hello, World!”); i min app.js-fil. Jag kan köra det med Code Runner. Jag kommer att använda genvägen F1 och skriva RUN CODE.

Det här är vad jag får på min terminal:

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

Bästa metoder för att skriva JavaScript-kod effektivt

Den inställning vi har hittills är perfekt för enkla JavaScript-program. Du måste dock ha dessa bästa metoder i åtanke om du vill köra JavaScript på VS Code smidigt:

  • Använd en kodlinter: Läsbarheten kan bli ett problem när storleken på din JavaScript-fil ökar. Du kan använda ett tillägg som t.ex Snyggare ESLint för att säkerställa att du upptäcker fel i din kod tidigt och öka läsbarheten för din kod.
  • Behåll olika språk i olika filer: Ett typiskt front-end-projekt kan kräva att du skriver HTML-, CSS- och JavaScript-kod. Du kan bli frestad att skriva all kod i ett dokument. Se dock alltid till att du skriver din HTML-, CSS- och JavaScript-kod i olika filer.
  • Dra fördel av tillägg: VS Code Marketplace har tusentals tillägg som gör det enkelt att arbeta med olika bibliotek. Utforska marknad och välj tillägg med de bästa betygen och dokumentationen.

Konfigurera Git i Visual Studio Code för versionskontrollintegration

Vi har hittills gett stegen för att ställa in VS Code och köra JavaScript på denna kodredigerare. Du kan dock behöva använda versionskontroll som Git för att spåra ändringar i din kod eller till och med skicka dem till ett fjärrlager som GitHub. Det här är stegen att följa:

  • Installera Git: Git är den mest använda versionskontrollen i utvecklingen. Ladda ner Git version som passar ditt operativsystem och maskinspecifikationer. Du kan köra det här kommandot efter installationen för att kontrollera din Git-version:
git -v

Om du har installerat det korrekt kommer du att ha något liknande detta på din terminal:

  • Initiera ett Git-förråd: Du kan spåra alla dina ändringar och commit (stage) dem på Git. Kör det här kommandot från roten av din projektmapp:
git init

  • Konfigurera din Git-identitet: Du måste berätta för Git vem du är genom att ställa in ditt användarnamn och e-post. Kör dessa kommandon för att komma igång:

git config –global user.name “Ditt namn”

git config –global user.email “[email protected]>>[email protected]

Byt ut ”Ditt namn” och ”[email protected]’ med relevanta uppgifter.

  • Scen- och commit-ändringar: Du har nu konfigurerat Git och kan nu iscensätta och commitera dina ändringar. Kör det här kommandot för att kontrollera alla ospårade filer:
git status

Du kan nu se alla ospårade och oengagerade filer.

Kör det här kommandot för att iscensätta ändringarna:

git add .

Kör git status igen, och du kommer att se något liknande detta:

Du kan nu commitera dina filer. Kör detta kommando:

git commit -m “your commit message”

Ersätt ”ditt engagemangmeddelande” med något som beskriver dina handlingar.

Du kan nu ansluta din källkontroll till fjärrlagringsplattformar som GitHub.

Slutsats

Vi hoppas nu att du förstår hur man skapar en miljö och kör JavaScript i VS Code. Du kan behöva extra tillägg för att fungera med JavaScript-bibliotek och ramverk i denna kodredigerare. Håll dock alltid Visual Studio-koden uppdaterad om du vill njuta av alla de senaste funktionerna.

Kolla in vår artikel om de bästa resurserna för att lära dig JavaScript och polera dina kunskaper.