Deine JavaScript-Entwicklungsumgebung

Bevor wir richtig loslegen, brauchen wir die richtigen Werkzeuge. In diesem Kapitel richten wir eine professionelle Entwicklungsumgebung ein, die dir das Coden erleichtert und Spaß macht.

Was du brauchst

Ein Code-Editor – VS Code (empfohlen)
Ein Browser – Chrome, Firefox oder Edge
Node.js – JavaScript außerhalb des Browsers
Hilfreiche Erweiterungen – Für Produktivität und Fehlervermeidung

Visual Studio Code installieren

VS Code ist der beliebteste Code-Editor für JavaScript-Entwicklung. Er ist kostenlos, schnell und extrem erweiterbar.

Download & Installation

Gehe zu code.visualstudio.com
Lade die Version für dein Betriebssystem herunter
Installiere VS Code
Starte VS Code

Erste Schritte in VS Code

Nach dem Start siehst du den Willkommens-Bildschirm. Hier ein schneller Überblick:

┌─────────────────────────────────────────────────┐
│  [Explorer]  [Search]  [Git]  [Extensions]      │
├─────────────────────────────────────────────────┤
│                                                 │
│  Datei-            Code-Editor                  │
│  Browser                                        │
│                                                 │
│                                                 │
├─────────────────────────────────────────────────┤
│  Terminal / Probleme / Output                   │
└─────────────────────────────────────────────────┘

Wichtige Shortcuts:

Ctrl + Shift + P – Command Palette (alle Befehle)
Ctrl + P – Datei schnell öffnen
Ctrl + ` – Terminal öffnen/schließen
Ctrl + S – Speichern
Ctrl + / – Zeile auskommentieren

Wichtige VS Code Erweiterungen

Klicke auf das Extensions-Icon (oder Ctrl + Shift + X) und installiere diese Erweiterungen:

1. ESLint

Findet Fehler, bevor du sie machst.

// ESLint warnt dich bei Fehlern wie:
const x = 5
const x = 10  // ❌ Variable bereits deklariert!

// Oder bei potenziellen Bugs:
if (x = 5) {  // ❌ Wolltest du == oder === ?
}

2. Prettier - Code Formatter

Formatiert deinen Code automatisch.

Vorher:

const person={name:"Max",age:25,city:"Berlin"}
function greet(name){return "Hallo "+name}

Nach Prettier (Shift + Alt + F):

const person = {
  name: "Max",
  age: 25,
  city: "Berlin"
};

function greet(name) {
  return "Hallo " + name;
}

3. Live Server

Startet einen lokalen Webserver mit Auto-Reload.

Rechtsklick auf HTML-Datei
“Open with Live Server”
Änderungen werden automatisch im Browser angezeigt

4. JavaScript (ES6) code snippets

Schnelle Code-Vorlagen.

Tippe einen Shortcut und drücke Tab:

clg → console.log()
fn → function name() {}
afn → const name = () => {}

5. Bracket Pair Colorizer

Färbt zusammengehörige Klammern.

function outer() {           // Blau
    function inner() {       // Gelb
        if (true) {          // Pink
            console.log()
        }                    // Pink
    }                        // Gelb
}                            // Blau

Node.js installieren

Node.js ermöglicht es, JavaScript außerhalb des Browsers auszuführen – zum Beispiel auf deinem Computer oder einem Server.

Installation

Gehe zu nodejs.org
Lade die LTS-Version herunter (Long Term Support)
Installiere Node.js

Überprüfe die Installation

Öffne ein Terminal (in VS Code: Ctrl + `) und tippe:

node --version
# Sollte sowas wie v20.x.x zeigen

npm --version
# Sollte sowas wie 10.x.x zeigen

Node.js nutzen

Erstelle eine Datei test.js:

// test.js
const message = "Hallo von Node.js!";
console.log(message);

// Mathe
const result = 42 * 2;
console.log(`42 * 2 = ${result}`);

Führe sie aus:

node test.js
# Ausgabe:
# Hallo von Node.js!
# 42 * 2 = 84

Wow! Du hast gerade JavaScript ohne Browser ausgeführt.

Dein erstes Projekt erstellen

Lass uns ein echtes Projekt-Setup erstellen.

1. Ordner erstellen

mkdir mein-js-projekt
cd mein-js-projekt

Oder in VS Code: Datei → Ordner öffnen → Neuen Ordner erstellen

2. Projektstruktur

Erstelle diese Dateien:

mein-js-projekt/
├── index.html
├── style.css
└── script.js

3. HTML-Grundgerüst

index.html:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mein JS Projekt</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>JavaScript Playground</h1>
    <p id="output">Warte auf JavaScript...</p>
    <button id="myButton">Klick mich!</button>

    <!-- JavaScript am Ende laden -->
    <script src="script.js"></script>
</body>
</html>

4. Etwas CSS

style.css:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: system-ui, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

h1 {
    font-size: 2.5rem;
}

#output {
    font-size: 1.2rem;
    opacity: 0.9;
}

button {
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    background: white;
    color: #764ba2;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

5. JavaScript

script.js:

// Warte, bis die Seite geladen ist
document.addEventListener('DOMContentLoaded', () => {
    // Elemente finden
    const output = document.getElementById('output');
    const button = document.getElementById('myButton');

    // Text ändern
    output.textContent = 'JavaScript ist geladen! 🎉';

    // Zähler
    let clicks = 0;

    // Button-Klick
    button.addEventListener('click', () => {
        clicks++;
        output.textContent = `Button wurde ${clicks}x geklickt!`;

        // Farbe ändern
        button.style.background = `hsl(${clicks * 30}, 70%, 60%)`;
    });

    // In der Konsole
    console.log('Script erfolgreich geladen!');
});

6. Testen

Rechtsklick auf index.html
“Open with Live Server”
Klicke den Button und beobachte!

Browser Developer Tools

Die Developer Tools sind unverzichtbar für JavaScript-Entwicklung.

Öffnen

F12 oder
Ctrl + Shift + I oder
Rechtsklick → “Untersuchen”

Wichtige Tabs

Console

Hier siehst du:

console.log() Ausgaben
Fehler (rot)
Warnungen (gelb)

console.log('Normal');
console.warn('Warnung!');
console.error('Fehler!');
console.table(['A', 'B', 'C']);

Elements

HTML/CSS der Seite untersuchen
Styles live ändern
DOM-Struktur sehen

Sources

Dein JavaScript-Code
Breakpoints setzen
Schritt für Schritt debuggen

Network

API-Requests beobachten
Ladezeiten analysieren

VS Code Einstellungen für JavaScript

Öffne die Einstellungen (Ctrl + ,) und konfiguriere:

settings.json

Ctrl + Shift + P → “Preferences: Open Settings (JSON)“

{
    // Formatierung beim Speichern
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",

    // JavaScript spezifisch
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },

    // Automatische Importe
    "javascript.suggest.autoImports": true,
    "javascript.updateImportsOnFileMove.enabled": "always",

    // Emmet für JavaScript
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },

    // Schönere Klammern
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": true,

    // Mini-Map ausblenden (optional)
    "editor.minimap.enabled": false,

    // Schriftgröße
    "editor.fontSize": 14,
    "editor.lineHeight": 1.6
}

Nützliche Tastenkürzel

Aktion	Windows/Linux	Mac
Command Palette	`Ctrl+Shift+P`	`Cmd+Shift+P`
Datei öffnen	`Ctrl+P`	`Cmd+P`
Terminal	Ctrl+`	Cmd+`
Speichern	`Ctrl+S`	`Cmd+S`
Alle speichern	`Ctrl+K S`	`Cmd+K S`
Suchen	`Ctrl+F`	`Cmd+F`
Suchen & Ersetzen	`Ctrl+H`	`Cmd+H`
Zeile duplizieren	`Alt+Shift+↓`	`Opt+Shift+↓`
Zeile verschieben	`Alt+↑/↓`	`Opt+↑/↓`
Mehrere Cursor	`Alt+Click`	`Opt+Click`
Kommentar togglen	`Ctrl+/`	`Cmd+/`

Zusammenfassung

Du hast jetzt:

✅ VS Code installiert und konfiguriert ✅ Wichtige Erweiterungen installiert (ESLint, Prettier, Live Server) ✅ Node.js für JavaScript außerhalb des Browsers ✅ Dein erstes Projekt erstellt ✅ Developer Tools kennengelernt

Checkliste vor dem Weitermachen

VS Code installiert
Erweiterungen installiert (mindestens: ESLint, Prettier, Live Server)
Node.js installiert (node --version funktioniert)
Erstes Projekt erstellt und getestet
Developer Tools im Browser geöffnet

🚀 Bereit für mehr? Im nächsten Kapitel tauchen wir in Variablen und Datentypen ein – das Fundament jedes JavaScript-Programms!

JavaScript Entwicklungsumgebung einrichten