– Knoten.js tutorial in Visual Studio Code

– Knoten.js ist eine Plattform zum Erstellen schneller und skalierbarer Serveranwendungen mit JavaScript. Knoten.js ist die Laufzeit und npm ist der Paketmanager für Node.js-Module.

Visual Studio Code hat Unterstützung für die JavaScript und TypeScript Sprachen out-of-the-box sowie Knoten.js-debugging. Um jedoch einen Knoten auszuführen.js-Anwendung müssen Sie den Knoten installieren.js runtime auf Ihrem Computer.

Um in dieser Komplettlösung zu beginnen, installieren Sie Node.js für Ihre Plattform., Der Knoten-Paketmanager ist im Knoten enthalten.js-distribution. Sie müssen ein neues Terminal (Eingabeaufforderung) für die Befehlszeilentools node und npm öffnen, um sich in Ihrem PFAD zu befinden.

Linux: Es gibt spezielle Knoten.js-Pakete für die verschiedenen Linux-Varianten verfügbar. Siehe Knoten installieren.js über Paketmanager, um den Knoten zu finden.js-Paket und Installationsanweisungen auf Ihre Linux-Version zugeschnitten.

Tipp: um Zu testen, ob Sie haben Knoten.,wenn auf Ihrem Computer korrekt installiert, öffnen Sie ein neues Terminal und geben Sie node --help und Sie sollten die Nutzungsdokumentation sehen.

Hallo Welt

Beginnen wir mit dem Erstellen des einfachsten Knotens.js-Anwendung „Hallo Welt“.

Erstellen Sie einen leeren Ordner mit dem Namen „Hallo“, navigieren Sie in den VS-Code und öffnen Sie ihn:

mkdir hellocd hellocode .

Tipp: Sie können Dateien oder Ordner direkt über die Befehlszeile öffnen. Zeitraum ‚.,’bezieht sich auf den aktuellen Ordner, daher startet VS Code und öffnet den Ordner Hello.

Drücken Sie in der Symbolleiste des Datei-Explorers die Schaltfläche Neue Datei:

und benennen Sie die Datei app.js:

Mit der Dateierweiterung, VS Code interpretiert diese Datei als JavaScript und bewertet den Inhalt mit dem JavaScript-Sprachdienst. Weitere Informationen zur JavaScript-Unterstützung finden Sie im Thema VS Code JavaScript Language.,

Erstellen Sie eine einfache Zeichenfolgenvariable in app.js und senden Sie den Inhalt der Zeichenfolge an die Konsole:

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

Beachten Sie, dass Sie bei der Eingabe von console. IntelliSense auf der console Objekt wurde Ihnen automatisch präsentiert.

Beachten Sie auch, dass VS Code weiß, dass msg eine Zeichenfolge ist, die auf der Initialisierung basiert 'Hello World'., Wenn Sie msg. Sie IntelliSense zeigt alle String-Funktionen auf msg.

Setzen Sie nach dem Experimentieren mit IntelliSense zusätzliche Änderungen aus dem obigen Quellcodebeispiel zurück und speichern Sie die Datei (⌘S (Windows, Linux Strg+S)).

Hello World ausführen

Es ist einfach, app.js mit Knoten auszuführen.js. Von einem terminal aus, geben Sie einfach ein:

node app.js

Sie sollten sehen, „Hallo Welt“ – Ausgabe an das terminal und Knoten.,js kehrt zurück.

Integriertes Terminal

VS Code verfügt über ein integriertes Terminal, mit dem Sie Shell-Befehle ausführen können. Sie können Knoten laufen.js direkt von dort und vermeiden Sie den Wechsel aus VS-Code beim Ausführen von Befehlszeilentools.

Für diese Komplettlösung können Sie entweder ein externes Terminal oder das integrierte VS Code-Terminal zum Ausführen der Befehlszeilentools verwenden.

Debugging Hello World

Wie in der Einleitung erwähnt, wird VS Code Schiffe mit einem debugger für die Knoten.js-Anwendungen. Versuchen wir, unsere einfache Hello World-Anwendung zu debuggen.,

Um einen Haltepunkt in app.js festzulegen, setzen Sie den Editor-Cursor auf die erste Zeile und drücken Sie F9 oder klicken Sie in die linke Rinne des Editors neben den Zeilennummern. Ein roter Kreis erscheint in der Rinne.

Um das Debuggen zu starten, wählen Sie die Ansicht Ausführen in der Aktivitätsleiste aus:

Sie können jetzt auf den grünen Pfeil der Debug-Symbolleiste klicken oder F5 drücken, um“Hello World“ zu starten und zu debuggen. Ihr Haltepunkt wird getroffen und Sie können die einfache Anwendung anzeigen und durchlaufen., Beachten Sie, dass VS Code eine unterschiedlich farbige Statusleiste anzeigt, um anzuzeigen, dass er sich im Debug-Modus befindet und die DEBUG-KONSOLE angezeigt wird.

Nachdem Sie VS-Code mit“ Hello World “ in Aktion gesehen haben, wird im nächsten Abschnitt die Verwendung von VS-Code mit einem Full-Stack-Knoten angezeigt.js-web-app.

Hinweis: Wir sind mit dem Beispiel“ Hallo Welt “ fertig, also navigieren Sie aus diesem Ordner heraus, bevor Sie eine Express-App erstellen. Sie können den Ordner „Hallo“ löschen, wenn Sie möchten, da er für den Rest der Komplettlösung nicht erforderlich ist.,

Eine Express-Anwendung

Express ist ein sehr beliebtes Anwendungsframework zum Erstellen und Ausführen von Knoten.js-Anwendungen. Sie können eine neue Express-Anwendung mithilfe des Express Generator-Tools gerüsten (erstellen). Der Express-Generator wird als npm-Modul ausgeliefert und mithilfe des npm-Befehlszeilentools npminstalliert.

Tipp: Um zu testen, ob npm korrekt auf Ihrem Computer installiert ist, geben Sie npm --help von einem Terminal aus ein und Sie sollten die Nutzungsdokumentation sehen.,

Installieren Sie den Express-Generator, indem Sie von einem Terminal aus Folgendes ausführen:

npm install -g express-generator

Der Schalter -g installiert den Express-Generator global auf Ihrem Computer, sodass Sie ihn von überall aus ausführen können.

Wir können jetzt eine neue Express-Anwendung mit dem Namen myExpressApp erstellen, indem wir Folgendes ausführen:

express myExpressApp --view pug

Dadurch wird ein neuer Ordner mit dem Namen myExpressApp mit dem Inhalt Ihrer Anwendung erstellt., Die Parameter --view pug weisen den Generator an, die pug Template Engine zu verwenden.

Um alle Abhängigkeiten der Anwendung zu installieren (erneut als NPM-Module ausgeliefert), gehen Sie in den neuen Ordner und führen Sie npm install:

cd myExpressAppnpm install

An dieser Stelle sollten wir testen, ob unsere Anwendung ausgeführt wird. Die generierte Express-Anwendung verfügt über eine package.json – Datei, die ein start – Skript zum Ausführen von enthält. Dadurch wird der Knoten gestartet.js-Anwendung ausgeführt wird.,

Führen Sie von einem Terminal im Express-Anwendungsordner aus aus:

npm start

Der Knoten.der js-Webserver wird gestartet und Sie können zu http://localhost:3000 navigieren, um die laufende Anwendung anzuzeigen.

Große code bearbeitung

Schließen sie den browser und von einem terminal in die myExpressApp ordner, stoppen die Knoten.js-server durch drücken von STRG+C.,

Starten Sie jetzt VS Code:

code .

Hinweis: Wenn Sie das integrierte VS Code-Terminal zur Installation des Express Generators und zum Gerüst der App verwendet haben, können Sie den Ordner myExpressApp von Ihrer laufenden VS Code-Instanz aus öffnen mit dem Befehl File > Ordner öffnen.

Der Knoten.die js – und Express-Dokumentation erklärt hervorragend, wie Sie mithilfe der Plattform und des Frameworks umfangreiche Anwendungen erstellen., Visual Studio Code macht Sie produktiver bei der Entwicklung dieser Arten von Anwendungen, indem Sie großartige Codebearbeitungs-und Navigationserfahrungen bieten.

Öffnen Sie die Datei app.js und bewegen Sie den Mauszeiger über den Knoten.js globales Objekt __dirname. Beachten Sie, wie VS Code versteht, dass __dirname eine Zeichenfolge. Noch interessanter ist, dass Sie vollen IntelliSense gegen den Knoten erhalten können.js-framework. Zum Beispiel können Sie http und erhalten volle IntelliSense gegen die http Klasse, wie Sie in Visual Studio Code eingeben.,

VS Code verwendet TypeScript-Typdeklarationsdateien (Typings) (z. B. node.d.ts), um VS-Code Metadaten zu den JavaScript-basierten Frameworks bereitzustellen, die Sie in Ihrer Anwendung verwenden. Typdeklarationsdateien werden in TypeScript geschrieben, damit sie die Datentypen von Parametern und Funktionen ausdrücken können, sodass VS-Code eine umfassende IntelliSense-Erfahrung bietet. Dank einer Funktion namens Automatic Type Acquisition müssen Sie sich keine Gedanken über das Herunterladen dieser Typdeklarationsdateien machen, VS Code installiert sie automatisch für Sie.,

Sie können auch Code schreiben, der auf Module in anderen Dateien verweist. Zum Beispiel benötigen wir in app.js das Modul ./routes/index, das eine Express.Router – Klasse exportiert. Wenn Sie IntelliSense auf index aufrufen, können Sie die Form der Router Klasse sehen.

Debuggen Sie Ihre Express-App

Sie müssen eine Debugger-Konfigurationsdatei erstellen launch.json für Ihre Express-Anwendung., Klicken Sie in der Aktivitätsleiste auf das Symbol Ausführen und dann oben in der Ansicht Ausführen auf das Symbol Zahnrad konfigurieren, um eine Standarddatei launch.json zu erstellen. Wählen Sie den Knoten aus.js-Umgebung, indem sichergestellt wird, dass die type – Eigenschaft in configurations auf "node". Wenn die Datei zum ersten Mal erstellt wird, sucht VS Code in package.json nach einem start – Skript und verwendet diesen Wert als program (in diesem Fall "${workspaceFolder}\\bin\\www) für die Konfiguration des Startprogramms.,

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

Speichern Sie die neue Datei und stellen Sie sicher, dass das Programm in der Dropdown-Liste Konfiguration oben in der Ansicht Ausführen ausgewählt ist. Öffnen Sie app.js und setzen Sie einen Haltepunkt am oberen Rand der Datei, an der das Express App-Objekt erstellt wird, indem Sie in die Rinne links neben der Zeilennummer klicken. Drücken Sie F5, um das Debuggen der Anwendung zu starten. VS Code startet den Server in einem neuen Terminal und erreicht den von uns festgelegten Haltepunkt. Von dort aus können Sie Variablen überprüfen, Uhren erstellen und Ihren Code durchgehen.,

Stellen Sie Ihre Anwendung bereit

Wenn Sie erfahren möchten, wie Sie Ihre Webanwendung bereitstellen, lesen Sie die Bereitstellungsanwendungen in Azure-Tutorials, in denen wir zeigen, wie Sie Ihre Website in Azure ausführen.

Es gibt viel mehr mit Visual Studio Code zu erkunden, versuchen Sie bitte die folgenden Themen:

• Einstellungen-Erfahren Sie, wie Sie VS-Code anpassen, wie Sie arbeiten möchten.
• Debugging – Hier glänzt VS Code wirklich.
• Video: Erste Schritte mit Node.js debugging-Erfahren Sie, wie Sie an einen laufenden Knoten anhängen.js-Prozess.
• – Knoten.,js debugging-Erfahren Sie mehr über den integrierten Knoten von VS Code.js-debugging.
• Debugging-Rezepte-Beispiele für Szenarien wie clientseitige und Container-Debugging.
• Tasks-Ausführen von Aufgaben mit Gulp, Grunt und Jake. Fehler und Warnungen anzeigen.