Entwicklungsumgebung einrichten

Für unser MERN-Stack-Projekt verwenden wir Visual Studio Code (VS Code) als primären Code-Editor. VS Code bietet hervorragende Unterstützung für JavaScript-Entwicklung und lässt sich optimal für unsere Anforderungen anpassen.

Visual Studio Code einrichten

Installation

1. Laden Sie VS Code von der offiziellen Website herunter 2. Folgen Sie den Installationsanweisungen für Ihr Betriebssystem 3. Starten Sie VS Code nach der Installation

Empfohlene Erweiterungen

Installieren Sie diese Erweiterungen über das Extensions-Panel (Tastenkürzel: Ctrl+Shift+X oder Cmd+Shift+X auf Mac):

Produktivität

• Liveserver: Lokaler Webserver für effizientes Arbeiten Link zur Extension

• Auto Rename Tag: Automatisches Umbenennen von HTML/XML-Tags Link zur Extension

• Prettier: Code-Formatter für automatische Formatierung deines Codes Link zur Extension Wichtig: Befolgen Sie die Installationsanleitung in der Beschreibung der Erweiterung. In den VS Code Einstellungen muss der Codeeditor aktiviert werden.

  {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

  Prettier Konfiguration über settings.json in VS Code hinterlegen:

1. Öffne die VS Code-Einstellungen: Drücke Strg+Shift+P (Windows/Linux) oder Cmd+Shift+P (Mac)

2. Gib “Preferences: Open Settings (JSON)” ein und wähle es aus

3. In der geöffneten settings.json Datei füge die Prettier-Einstellungen hinzu:

4. Speichere die Datei mit Strg+S (Windows/Linux) oder Cmd+S (Mac)

Grundlegende Einstellungen anpassen

Öffnen Sie die Einstellungen mit Ctrl+, (Cmd+, auf Mac):

Empfohlene Einstellungen:

• Aktivieren Sie “Format On Save” für automatische Formatierung
• Setzen Sie die Tab-Grösse auf 2 Spaces (typisch für JavaScript-Projekte)
• Aktivieren Sie “Auto Save” für kontinuierliches Speichern

Terminal einrichten

Öffnen Sie das integrierte Terminal mit Ctrl+` oder über das Menü Terminal > New Terminal:

Projektordner erstellen

1. Wählen Sie in VS Code “Open Folder” oder nutzen Sie Ctrl+K Ctrl+O

2. Erstellen Sie einen neuen Ordner für Ihr Projekt und öffnen Sie diesen

   

Nächste Schritte

Mit VS Code sind wir für die Entwicklung gerüstet. Die weiteren erforderlichen Tools (Node.js, MongoDB, Git etc.) werden wir in den folgenden Kapiteln installieren und einrichten. Dort werden wir auch die Projektstruktur erstellen und mit der eigentlichen Entwicklung unseres MERN-Stack-Projekts beginnen.

Tipp

Immer im VS Code den Ordner öffnen um mit Dateien zu arbeiten. Nur so funktioniert der Live Server korrekt und aktualisiert automatisch den Browser bei jeder Änderung. Dadurch spart man sich das manuelle Neuladen der Seite nach jeder Code-Änderung, was den Entwicklungsprozess erheblich beschleunigt. Für maximale Effizienz empfiehlt es sich, das VS Code Fenster und den Browser nebeneinander anzuordnen. So behält man beide Ansichten gleichzeitig im Blick und kann die Auswirkungen der Codeänderungen sofort sehen, ohne zwischen Fenstern wechseln zu müssen.