Node.js-Tutorial in Visual Studio Code

Node.js ist eine Plattform für die Entwicklung 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 sowie das Debuggen von Node.js direkt nach der Installation. Um jedoch eine Node.js-Anwendung auszuführen, müssen Sie die Node.js-Laufzeitumgebung auf Ihrem Computer installieren.

Um mit 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 verfügbar sind.

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

Linux: Es gibt spezifische Node.js-Pakete für die verschiedenen Linux-Varianten. Siehe Installing Node.js via package manager, um das Node.js-Paket und Installationsanweisungen für Ihre Linux-Version zu finden.

Windows Subsystem for Linux: Wenn Sie unter Windows arbeiten, 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 volle VS Code-Bearbeitungs- und Debugging-Unterstützung, während Sie im Kontext von WSL arbeiten. Um mehr zu erfahren, besuchen Sie Developing in WSL oder probieren Sie das Working in WSL-Tutorial aus.

Hallo Welt

Lassen Sie uns mit der Erstellung der einfachsten Node.js-Anwendung beginnen: "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 über die Befehlszeile öffnen. Der Punkt '.' bezieht sich auf den aktuellen Ordner; daher wird VS Code gestartet und der Ordner Hello geöffnet.

Klicken Sie in der Symbolleiste des Datei-Explorers auf 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 den Inhalt mit dem JavaScript-Sprachdienst aus. Lesen Sie das Thema JavaScript-Sprache in der VS Code-Dokumentation, um mehr über die JavaScript-Unterstützung zu erfahren.

Erstellen Sie eine einfache String-Variable in app.js und geben Sie den Inhalt des Strings in der Konsole aus.

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

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

Beachten Sie auch, dass VS Code erkennt, dass msg ein String ist, basierend auf der Initialisierung mit 'Hello World'. Wenn Sie msg. tippen, sehen Sie, wie IntelliSense alle verfügbaren String-Funktionen für msg anzeigt.

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

Ausführen von Hello World

Es ist einfach, app.js mit Node.js auszuführen. Geben Sie in einem Terminal einfach Folgendes ein:

node app.js

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

Integriertes Terminal

VS Code verfügt über ein integriertes Terminal, das Sie zum Ausführen von Shell-Befehlen verwenden können. Sie können Node.js direkt von dort ausführen und müssen VS Code nicht verlassen, um Befehlszeilentools zu nutzen.

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

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

Debuggen von Hello World

Wie in der Einleitung erwähnt, liefert VS Code einen Debugger für Node.js-Anwendungen mit. Lassen Sie uns das Debuggen unserer einfachen Hello World-Anwendung ausprobieren.

Um einen Haltepunkt (Breakpoint) in app.js zu setzen, platzieren Sie den Editor-Cursor in der ersten Zeile und drücken Sie F9 oder klicken Sie im Editor-Rand neben die Zeilennummern. Ein roter Kreis erscheint am Rand.

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

Sie können nun auf den grünen Pfeil der Debug-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 inspizieren und schrittweise durchgehen. Beachten Sie, dass VS Code eine andersfarbige Statusleiste anzeigt, um darauf hinzuweisen, dass Sie sich im Debug-Modus befinden, und dass die DEBUG-KONSOLE angezeigt wird.

Nachdem Sie nun 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-Webanwendung.

Hinweis: Wir sind mit dem "Hello World"-Beispiel fertig. Navigieren Sie also aus diesem Ordner heraus, bevor Sie eine Express-App erstellen. Sie können den "Hello"-Ordner 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 Anwendungs-Framework zum Erstellen und Ausführen von Node.js-Anwendungen. Sie können eine neue Express-Anwendung mit dem Express Generator-Tool erstellen. Der Express Generator wird als npm-Modul geliefert und mit dem npm-Befehlszeilentool installiert.

Tipp: Um zu testen, ob npm korrekt auf Ihrem Computer installiert ist, geben Sie npm --help in einem Terminal ein; Sie sollten dann die Dokumentation zur Verwendung 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 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 geliefert), 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 enthält eine package.json-Datei, die ein start-Skript enthält, um node ./bin/www auszuführen. Dies startet die Node.js-Anwendung.

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

npm start

Der Node.js-Webserver startet, und Sie können https://:3000 im Browser aufrufen, um die laufende Anwendung zu sehen.

Exzellente Code-Bearbeitung

Schließen Sie den Browser und stoppen Sie in einem Terminal im Ordner myExpressApp den Node.js-Server durch Drücken von CTRL+C.

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 aus Ihrer laufenden VS Code-Instanz mit dem Befehl Datei > Ordner öffnen öffnen.

Die Dokumentation zu Node.js und Express erklärt hervorragend, wie man reichhaltige Anwendungen mit dieser Plattform und diesem Framework erstellt. Visual Studio Code macht Sie bei der Entwicklung dieser Art von Anwendungen produktiver, indem es exzellente Funktionen zur Code-Bearbeitung und Navigation 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 ein String ist. Noch interessanter ist, dass Sie vollständiges IntelliSense für das Node.js-Framework erhalten können. Sie können zum Beispiel http anfordern (require) und beim Tippen in Visual Studio Code vollständiges IntelliSense für die http-Klasse erhalten.

VS Code verwendet TypeScript-Typdeklarationsdateien (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 die Datentypen von Parametern und Funktionen ausdrücken können, was es VS Code ermöglicht, ein umfangreiches IntelliSense-Erlebnis zu bieten. 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. In app.js fordern wir zum Beispiel das Modul ./routes/index an, das eine Express.Router-Klasse exportiert. Wenn Sie IntelliSense für index aufrufen, können Sie die Struktur der Router-Klasse sehen.

Debuggen Ihrer 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, um eine Standard-launch.json-Datei zu erstellen. Wählen Sie die Node.js-Umgebung aus, indem Sie sicherstellen, dass die Eigenschaft type unter configurations auf "node" gesetzt ist. Wenn die Datei erstellt wird, sucht VS Code in der 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 im Konfigurations-Dropdown oben in der Ansicht Ausführen und Debuggen ausgewählt ist. Öffnen Sie app.js und setzen Sie einen Haltepunkt nahe dem Anfang der Datei, wo das Express-App-Objekt erstellt wird, indem Sie in den Rand 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 gesetzten Haltepunkt. Von dort aus können Sie Variablen untersuchen, Watches erstellen und schrittweise durch Ihren Code navigieren.

Bereitstellung Ihrer Anwendung

Wenn Sie erfahren möchten, wie Sie Ihre Webanwendung bereitstellen, sehen Sie sich die Tutorials zu Deploying Applications to Azure an, in denen wir zeigen, wie Sie Ihre Website in Azure ausführen.

Nächste Schritte

Es gibt noch viel mehr in Visual Studio Code zu entdecken. Bitte probieren Sie die folgenden Themen aus:

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