Node.js-Tutorial in Visual Studio Code

Node.js ist eine Plattform für die Erstellung schneller und skalierbarer Serveranwendungen mit JavaScript. Node.js ist die Laufzeitumgebung und npm ist der Paketmanager für Node.js-Module.

Visual Studio Code unterstützt JavaScript und TypeScript nativ sowie das Debuggen von Node.js. Um eine Node.js-Anwendung auszuführen, müssen Sie jedoch die Node.js-Laufzeitumgebung auf Ihrem Computer installieren.

Um in dieser Anleitung zu beginnen, installieren Sie Node.js für Ihre Plattform. Der Node Package Manager ist in der Node.js-Distribution enthalten. Sie müssen ein neues Terminal (Eingabeaufforderung) öffnen, damit die Befehlszeilentools node und npm in Ihrem PATH enthalten sind.

Um zu testen, ob Sie Node.js korrekt auf Ihrem Computer installiert haben, öffnen Sie ein neues Terminal und geben Sie node --version ein. Sie sollten die aktuell installierte Node.js-Version sehen.

Linux: Es gibt spezielle Node.js-Pakete für die verschiedenen Linux-Distributionen. Weitere Informationen finden Sie unter Installation von Node.js über den Paketmanager, um das Node.js-Paket und die Installationsanweisungen für Ihre Linux-Version zu finden.

Windows Subsystem for Linux: Wenn Sie Windows verwenden, ist WSL eine großartige Möglichkeit für die Node.js-Entwicklung. Sie können Linux-Distributionen unter Windows ausführen und Node.js in der Linux-Umgebung installieren. In Verbindung mit der WSL-Erweiterung erhalten Sie vollständige VS Code-Bearbeitungs- und Debugging-Unterstützung im Kontext von WSL. Weitere Informationen finden Sie unter Entwicklung in WSL oder probieren Sie das Arbeiten in WSL-Tutorial aus.

Hallo Welt

Beginnen wir mit der Erstellung der einfachsten Node.js-Anwendung, "Hello World".

Erstellen Sie einen leeren Ordner namens "hello", navigieren Sie hinein und öffnen Sie VS Code

mkdir hello
cd hello
code .

Tipp: Sie können Dateien oder Ordner direkt von der Befehlszeile aus öffnen. Der Punkt '.' bezieht sich auf den aktuellen Ordner, daher wird VS Code gestartet und der Ordner Hello geöffnet.

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

und nennen Sie die Datei app.js

Durch die Dateiendung .js interpretiert VS Code diese Datei als JavaScript und wertet ihren Inhalt mit dem JavaScript-Sprachdienst aus. Lesen Sie das VS Code-Thema JavaScript-Sprache, um mehr über die JavaScript-Unterstützung zu erfahren.

Erstellen Sie eine einfache Zeichenkettenvariable in app.js und senden Sie den Inhalt der Zeichenkette an die Konsole

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

Beachten Sie, dass beim Tippen von console. IntelliSense für das console-Objekt automatisch für Sie angezeigt wurde.

Beachten Sie auch, dass VS Code weiß, dass msg eine Zeichenkette ist, basierend auf der Initialisierung mit 'Hello World'. Wenn Sie msg. eingeben, sehen Sie IntelliSense, das alle Zeichenkettenfunktionen anzeigt, die für msg verfügbar sind.

Nachdem Sie mit IntelliSense experimentiert haben, machen Sie alle zusätzlichen Änderungen am obigen Quellcodebeispiel rückgängig und speichern Sie die Datei (⌘S (Windows, Linux Ctrl+S)).

Hello World ausführen

Es ist einfach, app.js mit Node.js auszuführen. Geben Sie im Terminal einfach ein

node app.js

Sie sollten "Hello World" im Terminal sehen und dann kehrt Node.js zurück.

Integriertes Terminal

VS Code verfügt über ein integriertes Terminal, mit dem Sie Shell-Befehle ausführen können. Sie können Node.js direkt von dort aus ausführen und vermeiden, VS Code zu verlassen, während Sie Befehlszeilentools ausführen.

Anzeigen > Terminal (⌃` (Windows, Linux Ctrl+`) mit dem Backtick-Zeichen) öffnet das integrierte Terminal, und Sie können dort node app.js ausführen.

Für diese Anleitung können Sie entweder ein externes Terminal oder das integrierte Terminal von VS Code verwenden, um die Befehlszeilentools auszuführen.

Hello World debuggen

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

Um einen Haltepunkt in app.js zu setzen, platzieren Sie den Cursor im Editor in der ersten Zeile und drücken Sie F9 oder klicken Sie in der linken Leiste des Editors neben den Zeilennummern. Ein roter Kreis erscheint in der Leiste.

Um mit dem Debugging zu beginnen, wählen Sie die Ansicht Ausführen und Debuggen in der Aktivitätsleiste aus.

Sie können nun auf den grünen Pfeil der Debugging-Symbolleiste klicken oder F5 drücken, um "Hello World" zu starten und zu debuggen. Ihr Haltepunkt wird erreicht und Sie können die einfache Anwendung durchlaufen. Beachten Sie, dass VS Code eine Statusleiste mit anderer Farbe anzeigt, um anzuzeigen, dass es sich im Debug-Modus befindet, und die DEBUG-KONSOLE angezeigt wird.

Nachdem Sie VS Code in Aktion mit "Hello World" gesehen haben, zeigt der nächste Abschnitt die Verwendung von VS Code mit einer Full-Stack Node.js-Web-App.

Hinweis: Wir sind mit dem "Hello World"-Beispiel fertig. Navigieren Sie aus diesem Ordner heraus, bevor Sie eine Express-App erstellen. Sie können den Ordner "Hello" löschen, wenn Sie möchten, da er für den Rest der Anleitung nicht benötigt wird.

Eine Express-Anwendung

Express ist ein sehr beliebtes Anwendungsframework für die Erstellung und Ausführung von Node.js-Anwendungen. Sie können eine neue Express-Anwendung mit dem Express Generator-Tool erstellen (scaffolding). Der Express Generator wird als npm-Modul vertrieben und mit dem npm-Befehlszeilentool npm installiert.

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

Installieren Sie den Express Generator, indem Sie Folgendes in einem Terminal 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 nun eine neue Express-Anwendung namens myExpressApp erstellen, indem wir Folgendes ausführen:

express myExpressApp --view pug

Dies erstellt einen neuen Ordner namens myExpressApp mit dem Inhalt Ihrer Anwendung. Die Parameter --view pug weisen den Generator an, die Pug-Template-Engine zu verwenden.

Um alle Abhängigkeiten der Anwendung zu installieren (ebenfalls als npm-Module vertrieben), wechseln Sie in den neuen Ordner und führen Sie npm install aus.

cd myExpressApp
npm install

An diesem Punkt sollten wir testen, ob unsere Anwendung läuft. Die generierte Express-Anwendung verfügt über eine Datei package.json, die ein start-Skript zum Ausführen von node ./bin/www enthält. Dies startet die Node.js-Anwendung.

Führen Sie im Terminal im Ordner der Express-Anwendung Folgendes aus:

npm start

Der Node.js-Webserver wird gestartet und Sie können unter https://:3000 nachsehen, um die laufende Anwendung zu sehen.

Hervorragende Code-Bearbeitung

Schließen Sie den Browser und stoppen Sie den Node.js-Server im Terminal im Ordner myExpressApp, indem Sie CTRL+C drücken.

Starten Sie nun VS Code

code .

Hinweis: Wenn Sie das integrierte VS Code-Terminal verwendet haben, um den Express-Generator zu installieren und die App zu erstellen, können Sie den Ordner myExpressApp von Ihrer laufenden VS Code-Instanz aus mit dem Befehl Datei > Ordner öffnen öffnen.

Die Node.js- und Express-Dokumentation erklärt hervorragend, wie man mit der Plattform und dem Framework anspruchsvolle Anwendungen erstellt. Visual Studio Code macht Sie produktiver bei der Entwicklung dieser Arten von Anwendungen, indem es hervorragende Code-Bearbeitungs- und Navigationserlebnisse bietet.

Öffnen Sie die Datei app.js und fahren Sie mit der Maus über das globale Node.js-Objekt __dirname. Beachten Sie, wie VS Code versteht, dass __dirname eine Zeichenkette ist. Noch interessanter ist, dass Sie vollständiges IntelliSense für das Node.js-Framework erhalten können. Sie können beispielsweise http anfordern und vollständiges IntelliSense für die http-Klasse erhalten, während Sie in Visual Studio Code tippen.

VS Code verwendet TypeScript-Deklarationsdateien (Typisierungen) (z. B. node.d.ts), um VS Code Metadaten über die JavaScript-basierten Frameworks bereitzustellen, die Sie in Ihrer Anwendung verwenden. Typdeklarationsdateien sind in TypeScript geschrieben, damit sie Datentypen von Parametern und Funktionen ausdrücken können, was es VS Code ermöglicht, eine umfassende IntelliSense-Erfahrung zu bieten. Dank einer Funktion namens Automatic Type Acquisition müssen Sie sich keine Sorgen um den Download 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 erfordern wir in app.js das Modul ./routes/index, das eine Express.Router-Klasse exportiert. Wenn Sie IntelliSense für index aufrufen, können Sie die Struktur der Router-Klasse sehen.

Debuggen Sie Ihre Express-App

Sie müssen eine Debugger-Konfigurationsdatei launch.json für Ihre Express-Anwendung erstellen. Klicken Sie auf Ausführen und Debuggen in der Aktivitätsleiste (⇧⌘D (Windows, Linux Ctrl+Shift+D)) und wählen Sie dann den Link launch.json-Datei erstellen aus, um eine Standard-launch.json-Datei zu erstellen. Wählen Sie die Umgebung Node.js, indem Sie sicherstellen, dass die Eigenschaft type in configurations auf "node" gesetzt ist. Wenn die Datei zum ersten Mal erstellt wird, sucht VS Code in package.json nach einem start-Skript und verwendet diesen Wert als program (was in diesem Fall "${workspaceFolder}\\bin\\www ist) für die Konfiguration Programm starten.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}\\bin\\www"
    }
  ]
}

Speichern Sie die neue Datei und stellen Sie sicher, dass Programm starten in der Konfigurationsdropdownliste oben in der Ansicht Ausführen und Debuggen ausgewählt ist. Öffnen Sie app.js und setzen Sie einen Haltepunkt nahe oben in der Datei, wo das Express-App-Objekt erstellt wird, indem Sie in die Leiste links neben der Zeilennummer klicken. Drücken Sie F5, um das Debugging der Anwendung zu starten. VS Code startet den Server in einem neuen Terminal und erreicht den von uns gesetzten Haltepunkt. Von dort aus können Sie Variablen inspizieren, Überwachungen erstellen und Ihren Code durchlaufen.

Stellen Sie Ihre Anwendung bereit

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

Nächste Schritte

Es gibt noch viel mehr zu entdecken mit Visual Studio Code. Probieren Sie die folgenden Themen aus:

• Node.js-Profilvorlage - Erstellen Sie ein neues Profil mit einer kuratierten Auswahl an Erweiterungen, Einstellungen und Code-Snippets.
• Einstellungen - Erfahren Sie, wie Sie VS Code an Ihre Arbeitsweise anpassen.
• Debuggen - Hier glänzt VS Code wirklich.
• Video: Erste Schritte mit dem Debugging in VS Code - Erfahren Sie, wie Sie das Debugging in VS Code nutzen.
• Node.js-Debugging - Erfahren Sie mehr über das integrierte Node.js-Debugging von VS Code.
• Debugging-Rezepte - Beispiele für Szenarien wie Client-seitiges und Container-Debugging.
• Aufgaben - Ausführen von Aufgaben mit Gulp, Grunt und Jake. Anzeigen von Fehlern und Warnungen.