Node.js und VS Code einrichten

Dauer: bis zu 45 Minuten

Herunterladen und installieren

Node.js
VS Code

Ziel: Entwicklungsumgebung für JavaScript einrichten

Node.js von der offiziellen Webseite nodejs.org herunterladen und installieren (die stabile LTS-Version (long term support)).

VS Code von der offiziellen Webseite code.visualstudio.com herunterladen und installieren.

Node.js wird für die Ausführung von JavaScript-Programmen außerhalb des Browsers auf dem eigenen Rechner benötigt.

VS Code ist ein beliebter Editor für die Programmierung in vielen Programmiersprachen (JavaScript, Python, Java, usw.).

Es gibt viele Funktionen und Erweiterungen für VS Code. Bei Bedarf besprechen wir diese bei passender Gelegenheit in der Vorlesung.

Wir verwenden VS Code zu Beginn möglichst ohne KI-Tools (Copilot), um die ausreichenden Grundlagen der Programmierung in JavaScript zu erlernen. Diese sind notwendig, um später mit KI-Tools effektiv arbeiten zu können.

Später werden wir den Einsatz von KI-Tools besprechen.

GitHub Copilot in VS Code deaktivieren:

Unten rechts in der Statusleiste von VS Code auf das Copilot-Symbol klicken.
Im erscheinenden Menü alle Haken unter Inline Suggestions deaktivieren

→ Später können die Inline Suggestions jederzeit wieder aktiviert werden.

Wir können die rechte Seitenleiste von Copilot verbergen, wobei der Chat gelegentlich sehr nützlich zum Lernen sein kann (z. B. um bestimmte Konzepte zu erklären).

Die erfolgreiche Installation von Node.js kann im Terminal mit folgendem Befehl überprüft werden:


node --version

Sollte eine Versionsnummer ausgegeben werden, dann ist Node.js erfolgreich installiert.

Programm in VS Code erstellen und mit Node.js ausführen

Wir erstellen gemeinsam ein erstes Programm („Hello, World!“) in VS Code und führen es mit Node.js aus.

→ Dies wird im gemeinsamen Live-Coding durchgeführt.

Projekt erstellen

VS Code starten
Ordner für das Projekt erstellen:

Menü File → Open Folder
- zum gewünschten Ort im Dateisystem navigieren
- neuen Ordner erstellen z. B. Programmieren (Windows: Rechtsklick)
- den neu erstellten Ordner auswählen und öffnen

In diesem Ordner können alle Dateien für die Übungen abgespeichert werden.

Datei erstellen

Neue Datei erstellen (Menü File → New File)
JavaScript-Code eingeben: console.log("Hello, World!");
Datei speichern (Menü File → Save As...)
Dateiendung .js verwenden (z. B. main.js)

(main.js ist der Name der JavaScript-Datei, die ausgeführt werden soll. Dieser Name kann frei gewählt werden.)

Programm ausführen

Mit View → Terminal kann in VS Code ein Terminalfenster geöffnet werden, in dem mit Node.js Programme ausgeführt werden:


node main.js

Dadurch wird das Programm mit Node.js ausgeführt und die Ausgabe Hello, World! erscheint im Terminal.

Sollte es Probleme bei der Installation geben, dann kann die eine Online-Entwicklungsumgebung genutzt werden (siehe unten).

→ ggf. ist am Ende dieser Vorlesungseinheit Zeit, um mögliche Probleme zu lösen.

Alternativen

Es gibt einige Online-Editoren, die JavaScript-Programme direkt im Browser ausführen. Von sehr einfachen Texteditoren bis zu vollwertigen Entwicklungsumgebungen gibt es eine Vielzahl von Möglichkeiten. Wir nennen hier nur zwei Beispiele:

Eine vollwertige Entwicklungsumgebung ist stackblitz.com . Mit dem Link node.new kann ein neues Node.js-Projekt in StackBlitz erstellt werden.

Für einzelne Skripte oder Übungen bieten jsplayground.dev oder runjs.app/play einfache Möglichkeiten, diese einzugeben und auszuführen. Manchmal ist dies völlig ausreichend.

Für die Programmierung von JavaScript kann im Prinzip jeder Texteditor eingesetzt werden (VS Code, WebStorm, Notepad++, usw.).

Beim Programmierprojekt sollten alle Mitglieder einer Gruppe die gleiche Entwicklungsumgebung einsetzen, damit die Teamarbeit einheitlich abläuft. Hierzu ist dann auch die Verwendung von git sinnvoll.