Suche
MenüSchließen
Astro für Anfänger · Teil 3TutorialEinsteiger

Astro

Astro-Kurs 03: Entwicklungsumgebung einrichten

VS Code, Node.js und Terminal sicher bedienen. Schritt-für-Schritt-Lektion für den Astro-Anfängerkurs der Know-How-Schmiede.

Veröffentlicht am

Etappe 1 – Grundlagen · Lektion 3 von 11 · Lernziel: VS Code, Node.js und Terminal sicher bedienen.

Voraussetzung: Grundlagen aus Lektion 2. Das Projekt modellbau-webseite legen wir in Lektion 4 an.

Was brauchst du?

  • Visual Studio Code als Editor: https://code.visualstudio.com/
  • Node.js in einer aktuell von Astro unterstützten LTS-Version: https://nodejs.org/
  • Einen aktuellen Browser wie Firefox, Chrome oder Edge
  • Eine Internetverbindung zur erstmaligen Paketinstallation

Unter Windows, Linux und macOS sind die Schritte weitgehend identisch. Installiere zuerst Node.js und starte danach VS Code neu, damit das Terminal die neuen Programme findet.

Installation prüfen

Öffne in VS Code Terminal → Neues Terminal. Gib diese Befehle nacheinander ein:

node --version
npm --version

Beide Befehle müssen eine Versionsnummer anzeigen. node führt JavaScript außerhalb des Browsers aus. npm ist der Paketmanager, über den später Astro und seine Abhängigkeiten installiert werden.

Sinnvolle VS-Code-Erweiterung

Öffne Erweiterungen in der Seitenleiste und suche nach der offiziellen Astro-Erweiterung. Sie ergänzt Syntaxhervorhebung und Hinweise zu .astro-Dateien. Zusätzliche Erweiterungen sind für die ersten Lektionen nicht erforderlich.

Eine ausführliche Übersicht mit Installation und Einstellungen findest du im Beitrag Die besten VS-Code-Erweiterungen für Astro.

Ordner und Terminal verstehen

In der linken Seitenleiste siehst du die Dateien des geöffneten Ordners. Im Terminal werden Befehle im aktuellen Arbeitsverzeichnis ausgeführt. Mit cd wechselst du den Ordner:

cd mein-projekt

Diesen Beispielbefehl brauchst du erst, nachdem der Ordner erstellt wurde. Mit pwd (Linux/macOS oder PowerShell) lässt du dir den aktuellen Ort anzeigen.

Übung

Lege einen Arbeitsordner für deine Webseiten an, beispielsweise Webprojekte. Öffne ihn in VS Code über Datei → Ordner öffnen. Öffne danach das Terminal und prüfe erneut node --version.

Kontrolle: Du kannst den Ordner im Dateibaum sehen und beide Versionsbefehle funktionieren.

Häufige Fehler

„node wird nicht erkannt“: Installation prüfen, Terminal und VS Code neu starten. PowerShell blockiert npm: Nutze zunächst die Eingabeaufforderung als Terminalprofil oder prüfe die lokale PowerShell-Konfiguration; ändere Sicherheitsrichtlinien nicht blind. Versionskonflikt: Aktuelle Voraussetzungen unter https://docs.astro.build/de/install-and-setup/ prüfen.

Weitere Informationen: Offizielle Astro-Dokumentation.