Node.Js tutorial In Visual Studio Code

Node.js is een platform voor het bouwen van snelle en schaalbare server applicaties met behulp van JavaScript. Knooppunt.js is de runtime en npm is de pakketbeheerder voor Node.js modules.

Visual Studio Code heeft ondersteuning voor de JavaScript en TypeScript talen out-of-the-box en Node.js debuggen. Echter, om een knooppunt uit te voeren.js applicatie, moet u het knooppunt te installeren.js runtime op uw machine.

om te beginnen met deze walkthrough, installeer Node.js voor uw platform., De node Package Manager is opgenomen in de Node.js distributie. U moet een nieuwe terminal openen (opdrachtprompt) voor de opdrachtregelprogramma ‘ s node en npm om zich op uw pad te bevinden.

Linux: er zijn specifieke knooppunten.js pakketten beschikbaar voor de verschillende smaken van Linux. Zie Node Installeren.js via package manager om het knooppunt te vinden.js pakket en installatie instructies afgestemd op uw versie van Linux.

Tip: om te testen of u een Node hebt.,js correct geïnstalleerd op uw computer, open een nieuwe terminal en typ node --help en je zou de gebruiksdocumentatie moeten zien.

Hello World

laten we beginnen met het maken van de eenvoudigste Node.js applicatie,”Hello World”.

Maak een lege map aan met de naam “Hallo”, navigeer naar en open VS Code:

mkdir hellocd hellocode .

Tip: U kunt bestanden of mappen direct vanaf de opdrachtregel openen. Periode ‘.,’verwijst naar de huidige map, daarom zal VS Code de Hello map starten en openen.

Van het Bestand Explorer werkbalk op de knop Nieuw Bestand:

en geef het bestand de naam app.js:

met behulp van de .js file extension, VS-Code interpreteert dit bestand als JavaScript en evalueren van de inhoud met de JavaScript-taal-service. Refereer naar het VS Code JavaScript language topic voor meer informatie over JavaScript ondersteuning.,

Maak een eenvoudige String variabele in app.js en stuur de inhoud van de string naar de console:

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

merk op dat wanneer u console. IntelliSense op het console object werd automatisch aan u gepresenteerd.

merk ook op dat VS Code weet dat msg een tekenreeks is gebaseerd op de initialisatie naar 'Hello World'., Als u msg. typt, ziet u dat IntelliSense alle tekenreeksfuncties toont die beschikbaar zijn op msg.

na het experimenteren met IntelliSense, kunt u eventuele extra wijzigingen uit het voorbeeld van de broncode hierboven ongedaan maken en het bestand opslaan (⌘s (Windows, Linux Ctrl+S)).

Hallo wereld draaien

het is eenvoudig om app.js met Node uit te voeren.js. Typ vanaf een terminal:

node app.js

u zou “Hello World” uitvoer naar de terminal en vervolgens de Node moeten zien.,js keert terug.

geïntegreerde Terminal

VS Code heeft een geïntegreerde terminal die u kunt gebruiken om shell-opdrachten uit te voeren. U kunt Node uitvoeren.js direct vanaf daar en vermijd het schakelen van VS-Code tijdens het uitvoeren van command-line tools.

voor deze walkthrough kunt u een externe terminal of de VS-Code geïntegreerde terminal gebruiken voor het uitvoeren van de opdrachtregelprogramma ‘ s.

Debugging Hello World

zoals vermeld in de inleiding, VS Code wordt geleverd met een debugger voor Node.js toepassingen. Laten we proberen het debuggen van onze eenvoudige Hello World applicatie.,

om een breekpunt in app.js in te stellen, plaatst u de editor-cursor op de eerste regel en drukt u op F9 of klikt u in de editor linkermarge naast de regelnummers. Er verschijnt een rode cirkel in de goot.

om het debuggen te starten, selecteert u de weergave uitvoeren in de Activiteitenbalk:

u kunt nu op debugwerkbalk groene pijl klikken of op F5 drukken om”Hello World” te starten en te debuggen. Uw breekpunt zal worden geraakt en u kunt bekijken en stap door de eenvoudige toepassing., Merk op dat VS-Code geeft een verschillende gekleurde statusbalk om aan te geven dat het in Debug modus en de debug CONSOLE wordt weergegeven.

nu u VS Code in actie hebt gezien met “Hello World”, wordt in de volgende sectie VS Code gebruikt met een full-stack Node.js web app.

opmerking: We zijn klaar met het voorbeeld” Hello World”, dus navigeer uit die map voordat u een Express-app maakt. U kunt de “Hallo” map verwijderen als u wilt, omdat het niet nodig is voor de rest van de walkthrough.,

een Express-toepassing

Express is een zeer populair toepassingskader voor het bouwen en uitvoeren van Node.js toepassingen. U kunt een nieuwe Express-applicatie maken met behulp van de Express Generator tool. De Express-Generator wordt geleverd als een NPM-module en geïnstalleerd met behulp van het NPM-opdrachtregelprogramma npm.

Tip: om te testen of u npm correct op uw computer hebt geïnstalleerd, typt u npm --help vanaf een terminal en u moet de gebruiksdocumentatie zien.,

Installeer de Express Generator door het volgende uit te voeren vanaf een terminal:

npm install -g express-generator

de -g switch installeert de Express Generator globaal op uw machine, zodat u kunt laat het overal zien.

We kunnen nu een nieuwe Express applicatie genaamd myExpressApp door het uitvoeren van:

express myExpressApp --view pug

Dit maakt een nieuwe map genaamd myExpressApp met de inhoud van je sollicitatie., De--view pug parameters vertellen de generator om de pug template engine te gebruiken.

om alle afhankelijkheden van de toepassing te installeren (opnieuw geleverd als NPM-modules), gaat u naar de nieuwe map en voert u npm install:

cd myExpressAppnpm install

Op dit punt moeten we testen of onze toepassing wordt uitgevoerd. De gegenereerde Express-toepassing heeft een package.json bestand dat een start script bevat om node ./bin/wwwuit te voeren. Dit zal het knooppunt starten.js applicatie draait.,

vanaf een terminal in de Express-toepassingsmap voert u:

npm start

het knooppunt uit.js webserver start en u kunt bladeren naar http://localhost:3000 om de draaiende toepassing te zien.

grote code bewerken

sluit de browser en vanaf een terminal in de myExpressApp map, stop het knooppunt.js server door op CTRL+C te drukken.,

start nu VS Code:

code .

Opmerking: Als u de VS Code geïntegreerde terminal hebt gebruikt om de Express generator te installeren en de app te steigeren, kunt u de map van uw draaiende vs code instantie met het bestand > open map Commando.

het knooppunt.js En Express documentatie doet een geweldig werk uit te leggen hoe rijke applicaties te bouwen met behulp van het platform en framework., Visual Studio Code maakt u productiever in het ontwikkelen van dit soort toepassingen door het verstrekken van geweldige code bewerken en navigatie-ervaringen.

Open het bestand app.js en ga met de muis over het knooppunt.js globaal object __dirname. Merk op hoe VS Code begrijpt dat __dirname een string is. Nog interessanter, kunt u volledige IntelliSense tegen het knooppunt.JS framework. U kunt bijvoorbeeld http vereisen en volledige IntelliSense verkrijgen tegen de klasse http terwijl u Visual Studio-Code intypt.,

VS Code gebruikt TypeScript type declaration (typings) bestanden (bijvoorbeeld node.d.ts) om metadata aan VS Code te leveren over de op JavaScript gebaseerde frameworks die u gebruikt in uw toepassing. Type declaratiebestanden worden geschreven in TypeScript, zodat ze de gegevenstypen van parameters en functies kunnen uitdrukken, waardoor VS-Code een rijke IntelliSense-ervaring biedt. Dankzij een functie genaamd Automatic Type Acquisition hoeft u zich geen zorgen te maken over het downloaden van deze type declaratiebestanden, VS Code zal ze automatisch voor u installeren.,

u kunt ook code schrijven die verwijst naar modules in andere bestanden. Bijvoorbeeld, in app.js hebben we de ./routes/index module nodig, die een Express.Router klasse exporteert. Als u IntelliSense opent op index, kunt u de vorm van de Router klasse zien.

Debug uw Express-app

u moet een debuggerconfiguratiebestand maken launch.json voor uw Express-toepassing., Klik op het pictogram uitvoeren in de Activiteitenbalk en vervolgens op het pictogram gear configureren bovenaan de weergave uitvoeren om een standaard launch.json bestand te maken. Selecteer het knooppunt.js-omgeving door ervoor te zorgen dat de eigenschap type In configurations is ingesteld op "node". Wanneer het bestand voor het eerst wordt aangemaakt, zal VS-Code in package.json kijken voor een start script en zal die waarde gebruiken als program (wat in dit geval "${workspaceFolder}\\bin\\www) voor de configuratie van het opstartprogramma.,

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

sla het nieuwe bestand op en zorg ervoor dat het opstartprogramma is geselecteerd in de configuratie drop-down aan de bovenkant van de Uitvoerweergave. Open app.js en stel een breekpunt in aan de bovenkant van het bestand waar het Express app-object wordt gemaakt door in de rugmarge links van het regelnummer te klikken. Druk op F5 om de toepassing te debuggen. VS Code start de server in een nieuwe terminal en raakt het breekpunt dat we hebben ingesteld. Vanaf daar kunt u variabelen inspecteren, horloges maken, en stap door uw code.,

implementeer uw applicatie

Als u wilt leren hoe u uw webapplicatie implementeert, bekijk dan de tutorials applicaties implementeren in Azure waarin we laten zien hoe u uw website in Azure uitvoert.

Er is veel meer te ontdekken met Visual Studio Code, probeer de volgende onderwerpen:

• Instellingen – leer hoe je VS Code aanpast aan hoe je wilt werken.
• debuggen – dit is waar VS Code echt schijnt.
• Video: aan de slag met Node.js debugging-leer hoe u aan een draaiend knooppunt kunt koppelen.js proces.
• Node.,js debugging-meer informatie over VS Code ‘ S ingebouwde knooppunt.js debuggen.
• Debuggerecepten-voorbeelden voor scenario ‘ s zoals client-side en container debugging.
• taken-uitvoeren van taken met Gulp, Grunt en Jake. Fouten en waarschuwingen tonen.