nod.JS handledning i Visual Studio Code

nod.JS handledning i Visual Studio Code

nod.js är en plattform för att bygga snabba och skalbara serverprogram med JavaScript. Nod.js är runtime och npm är pakethanteraren för nod.JS-moduler.

Visual Studio Code har stöd för JavaScript och TypeScript språk out-of-the-box samt nod.JS felsökning. Men för att köra en nod.JS-programmet måste du installera noden.JS runtime på din maskin.

för att komma igång i detta genomgång, installera nod.js för din plattform., Nod pakethanteraren ingår i noden.JS distribution. Du måste öppna en ny terminal (kommandotolk) för att kommandoradsverktygen node och npm ska vara på din väg.

Linux: det finns specifik nod.js paket tillgängliga för olika smaker av Linux. Se Installera Nod.js via pakethanteraren för att hitta noden.JS paket och installationsanvisningar anpassade till din version av Linux.

Tips: för att testa att du har nod.,js korrekt installerad på din dator, öppna en ny terminal och skriv node --help och du bör se användningsdokumentationen.

Hello World

låt oss komma igång genom att skapa den enklaste noden.JS ansökan, ”Hello World”.

skapa en tom mapp som heter ”hello”, navigera in och öppna VS-kod:

mkdir hellocd hellocode .

Tips: Du kan öppna filer eller mappar direkt från kommandoraden. Period ’.,’avser den aktuella mappen, därför startar VS-koden och öppnar mappenHello.

från verktygsfältet i Filutforskaren trycker du på den nya filknappen:

och namnger filenapp.js:

genom att använda.js filändelsen, vs-kod tolkar den här filen som JavaScript och kommer att utvärdera innehållet med JavaScript-språktjänsten. Läs mer om JavaScript-stöd i avsnittet VS-kod JavaScript-språk.,

skapa en enkel strängvariabel iapp.js och skicka innehållet i strängen till konsolen:

var msg = 'Hello World';console.log(msg);

Observera att när du skrevconsole. IntelliSense påconsole objektet presenterades automatiskt för dig.

märker också att VS Code vet attmsgär en sträng baserad på initialiseringen till 'Hello World'., Om du skriver msg. ser du IntelliSense som visar alla strängfunktioner som finns tillgängliga på msg.

Efter att ha experimenterat med IntelliSense, Återställ eventuella extra ändringar från källkodsexemplet ovan och spara filen (S (Windows, Linux Ctrl+S)).

Running Hello World

det är enkelt att köraapp.js med nod.js. Skriv bara:

node app.js

Du bör se ”Hello World” – utgången till terminalen och sedan noden.,js återvänder.

integrerad Terminal

VS-kod har en integrerad terminal som du kan använda för att köra skalkommandon. Du kan köra Node.js direkt därifrån och undvika att byta ut VS-kod när du kör kommandoradsverktyg.

för detta genomgång kan du använda antingen en extern terminal eller VS Code integrated terminal för att köra kommandoradsverktygen.

felsökning Hej världen

som nämnts i inledningen, VS kod fartyg med en debugger för nod.js applikationer. Låt oss försöka felsöka vår enkla Hello World ansökan.,

för att ställa in en brytpunkt iapp.js, sätt redigeringsmarkören på första raden och tryck på F9 eller klicka i redigeraren vänster ränna bredvid radnumren. En röd cirkel kommer att visas i rännan.

för att starta felsökning, välj körvyn i Aktivitetsfältet:

Du kan nu klicka på Felsökningsverktygsfältet grön pil eller tryck på F5 för att starta och felsöka ”Hello World”. Din brytpunkt kommer att träffas och du kan visa och gå igenom den enkla applikationen., Observera att VS-kod visar en annan färgad statusfält för att indikera att den är i felsökningsläge och FELSÖKNINGSKONSOLEN visas.

nu när du har sett VS-kod i aktion med ”Hello World” visas nästa avsnitt med VS-kod med en full stack-nod.JS web app.

Obs! vi är färdiga med exemplet ”Hello World” så navigera ut ur den mappen innan du skapar en Express-app. Du kan ta bort mappen ”hej” om du vill, eftersom det inte krävs för resten av genomgången.,

ett uttryckligt program

Express är ett mycket populärt applikationsramverk för att bygga och köra nod.js applikationer. Du kan scaffold (skapa) en ny Express program med hjälp av Express Generator verktyg. Express-generatorn levereras som en npm-modul och installeras med hjälp av kommandoradsverktyget npm npm.

Tips: för att testa att du harnpm korrekt installerat på din dator, skrivnpm --help från en terminal och du bör se användningsdokumentationen.,

Installera Express-generatorn genom att köra följande från en terminal:

npm install -g express-generator

-g – växeln installerar Express-generatorn globalt på din maskin så att du kan köra den från var som helst.

vi kan nu ställa in ett nytt Uttrycksprogram som hetermyExpressApp genom att köra:

express myExpressApp --view pug

detta skapar en ny mapp som hetermyExpressApp med innehållet i din ansökan., Parametrarna--view pug talar om för generatorn att använda mops-mallmotorn.

för att installera alla programmets beroenden (skickas igen som npm-moduler), gå till den nya mappen och körnpm install:

cd myExpressAppnpm install

vid denna tidpunkt bör vi testa att vår applikation körs. Den genererade Express-applikationen har ett package.json – fil som innehåller ett start – skript för att köra node ./bin/www. Detta startar noden.js ansökan körs.,

från en terminal i mappen Express application kör du:

npm start

noden.js web server startar och du kan bläddra till http://localhost:3000 för att se programmet som körs.

bra kodredigering

stäng webbläsaren och från en terminal i mappenmyExpressApp, stoppa noden.JS server genom att trycka CTRL + C.,

Starta nu VS-kod:

code .

Obs: Om du har använt VS-koden integrerad terminal för att installera Express generator och byggnadsställning appen, kan du öppna mappen myExpressApp från din körbara dator.vs kodinstans med filen > öppna mappkommandot.

noden.js och Express dokumentation gör ett bra jobb som förklarar hur man bygger rika applikationer med hjälp av plattformen och ramverket., Visual Studio Code kommer att göra dig mer produktiv i att utveckla dessa typer av program genom att ge bra kod redigering och navigeringsupplevelser.

öppna filenapp.js och håll muspekaren över noden.js globala objekt __dirname. Lägg märke till hur VS Code förstår att __dirname är en sträng. Ännu mer intressant kan du få full IntelliSense mot noden.js framework. Du kan till exempel kräva http och få full IntelliSense mot klassen http när du skriver in Visual Studio-kod.,

VS Code använder TypeScript type declaration (typings) filer (till exempelnode.d.ts) för att tillhandahålla metadata till VS-kod om JavaScript-baserade ramar du konsumerar i din ansökan. Typdeklarationsfiler är skrivna i TypeScript så att de kan uttrycka datatyper av parametrar och funktioner, vilket gör att VS-kod för att ge en rik IntelliSense upplevelse. Tack vare en funktion som heter Automatic Type Acquisition behöver du inte oroa dig för att ladda ner dessa typdeklarationsfiler, VS Code installerar dem automatiskt för dig.,

Du kan också skriva kod som refererar moduler i andra filer. Till exempel, i app.js kräver vi ./routes/index – modulen, som exporterar en Express.Router – klass. Om du tar upp IntelliSense påindex kan du se formen på klassenRouter.

felsöka din Express-app

Du måste skapa en konfigurationsfil för debuggerlaunch.json för din Express-applikation., Klicka på ikonen Kör i Aktivitetsfältet och sedan på ikonen konfigurera redskap högst upp i körvyn för att skapa en standardfil launch.json. Välj noden.JS-miljö genom att se till att egenskapentype Iconfigurations är inställd på"node". När filen först skapas kommer VS-koden att se ut i package.json för ett start – skript och kommer att använda det värdet som program (vilket i detta fall är "${workspaceFolder}\\bin\\www) för Startprogramkonfigurationen.,

{ "version": "0.2.0", "configurations": }

spara den nya filen och se till att startprogrammet är markerat i rullgardinsmenyn konfiguration högst upp i körvyn. Öppna app.js och ställ in en brytpunkt nära toppen av filen där Express-appobjektet skapas genom att klicka i rännstenen till vänster om radnumret. Tryck på F5 för att starta felsökning av programmet. VS-koden startar servern i en ny terminal och slår på brytpunkten vi ställer in. Därifrån kan du inspektera variabler, Skapa klockor och gå igenom din kod.,

distribuera din ansökan

om du vill lära dig att distribuera din webbapplikation, kolla in de implementerande programmen till Azure-handledning där vi visar hur du kör din webbplats i Azure.

det finns mycket mer att utforska med Visual Studio-kod, försök med följande ämnen:

  • Inställningar – lär dig att anpassa VS-kod för hur du gillar att arbeta.
  • Felsökning – Det är där VS kod verkligen lyser.
  • Video: komma igång med Node.js debugging-lär dig att bifoga till en löpande nod.js processen.
  • nod.,js debugging-Läs mer om VS kodens inbyggda nod.JS felsökning.
  • felsökning recept – exempel för scenarier som klientsidan och behållaren felsökning.
  • uppgifter – kör uppgifter med Gulp, Grunt och Jake. Visar fel och varningar.

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *