Node.js und VS Code einrichten

💡

Dauer: 45 Minuten

Herunterladen und installieren

Node.js
VS Code

Alternative: replit.com

Ziel: Entwicklungsumgebung für JavaScript einrichten

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

VS Code von der offiziellen Website (https://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).

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

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

Wir erstellen gemeinsam ein erstes Programm („Hello, Wordl!“) 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 im Explorer)
→ den neu erstellten Ordner auswählen und öffnen

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

Datei für 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 Entwicklungsumgebung replit.com als Alternative eingesetzt werden. Dort kann ein kostenloses Konto erstellt werden.

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

Alternative: replit.com

Eine weitere Möglichkeit, JavaScript-Programme zu schreiben und auszuführen, ist replit.com.

Replit unterstützt neben JavaScript auch viele weitere Programmiersprachen und hat einige zusätzliche Funktionen (Datenbanken, Deployment, usw.). Insbesondere hat Replit einige sehr leistungsfähige KI-Tools integriert.

Allerdings sind die vollen KI-Tools nur in der kostenpflichtigen Variante verfügbar und in der kostenlosen Variante können nur drei Projekte erstellt werden.

Im Prinzip ist Replit eine vollwertige Entwicklungsumgebung, die im Browser läuft. Auch hier können Dateien erstellt und ausgeführt werden.

💡

Zu Beginn sollten in Replit die Vorschläge der KI-Tools deaktiviert werden, um die Grundlagen der Programmierung zu erlernen.

Dazu in den User Settings die Option AI Code Completion ausschalten.

→ Dies wird direkt in Replit gezeigt.

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.

Auch replit kann von einem Team genutzt werden.

2 - Grundlagen Variablen und Konstanten