Tutorials

How To Setup: Die perfekte Entwicklungsumgebung für Web-Projekte

Melden

Eine saubere und gut konfigurierte Entwicklungsumgebung ist das Fundament für jedes erfolgreiche Projekt. In dieser Schritt-für-Schritt-Anleitung richten wir eine moderne, flexible und robuste Basis für die Webentwicklung ein – bestehend aus einem Code-Editor, Versionskontrolle und einer JavaScript-Laufzeitumgebung.

Voraussetzungen

  • Ein Computer mit Internetzugang (Windows, macOS oder Linux).
  • Administrator-Rechte zur Installation von Software.

Schritt 1: Den Code-Editor installieren (Visual Studio Code)

Visual Studio Code (VS Code) ist der aktuell beliebteste und flexibelste Editor.

  1. Download: Gehe auf die offizielle Website von Visual Studio Code und lade den Installer für dein Betriebssystem herunter.
  2. Installation: Führe die Installationsdatei aus.
    • Tipp für Windows: Aktiviere die Optionen „Mit Code öffnen“ im Kontextmenü des Windows-Explorers.
  3. Wichtige Erweiterungen installieren: Öffne VS Code, klicke links auf das Erweiterungs-Symbol (Extensions) und installiere folgende Must-Haves:
    • Prettier – Code formatter: Hält deinen Code automatisch sauber und lesbar.
    • Live Server: Ermöglicht eine lokale Live-Vorschau deiner HTML/CSS-Dateien im Browser.
    • GitLens: Erleichtert die Arbeit mit der Versionskontrolle.

Schritt 2: Versionskontrolle einrichten (Git)

Git ist der Standard, um Änderungen im Code zu verfolgen und im Team zu arbeiten.

  1. Download: Lade Git von der offiziellen Website (git-scm.com) herunter und installiere es mit den Standardeinstellungen.
  2. Konfiguration: Öffne dein Terminal (oder die Eingabeaufforderung) und teile Git deinen Namen und deine E-Mail-Adresse mit:
    git config --global user.name "Dein Vorname Nachname"
git config --global user.email "deine.email@beispiel.de"
  3. Überprüfung: Teste die Installation mit folgendem Befehl:
    git --version

Schritt 3: Laufzeitumgebung & Paketmanager (Node.js & npm)

Selbst wenn du kein reines Backend entwickelst, benötigst du Node.js und den Paketmanager npm für moderne Web-Tools, Frameworks und Abhängigkeiten.

  1. Download: Gehe auf nodejs.org und wähle die LTS-Version (Long Term Support). Diese ist am stabilsten.
  2. Installation: Folge dem Installationsassistenten. Der Paketmanager npm wird automatisch mitinstalliert.
  3. Test: Prüfe im Terminal, ob beides korrekt erkannt wird:
    node -v
npm -v

    (Beide Befehle sollten jeweils eine Versionsnummer zurückgeben).

Schritt 4: Das integrierte Terminal in VS Code nutzen

Du musst nicht ständig zwischen Fenstern wechseln – VS Code hat ein integriertes Terminal.

  1. Öffne VS Code.
  2. Drücke das Tastenkürzel:
    • Windows/Linux: Strg + Ö (oder Strg + ~)
    • macOS: Cmd + J
  3. Du kannst hier dieselben Befehle ausführen wie in deiner normalen System-Konsole.

Schritt 5: Der Funktionstest (Dein erstes Mini-Projekt)

Lass uns testen, ob alles reibungslos zusammenarbeitet.

  1. Erstelle einen neuen Ordner über das Terminal und wechsle hinein:
    mkdir mein-projekt
cd mein-projekt
  2. Öffne den Ordner in VS Code:
    code .
  3. Erstelle eine Datei namens index.html mit folgendem Inhalt:
    <!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Setup Test</title>
</head>
<body>
    <h1>Das Setup war erfolgreich!</h1>
</body>
</html>
  4. Klicke mit der rechten Maustaste in den Editor und wähle „Open with Live Server“.
  5. Dein Standard-Browser öffnet sich und zeigt deine Seite an.

Fazit

Glückwunsch! Du hast nun ein vollständiges, professionelles Entwickler-Setup:

  • VS Code zum Schreiben des Codes.
  • Git zur Sicherung und Verwaltung deiner Stände.
  • Node.js/npm für moderne Entwicklungstools.

Von hier aus kannst du mit Frameworks wie React, Vue, Angular oder purem HTML/JavaScript durchstarten.

0