Kapitel 3: Entwicklungsumgebung einrichten

📘 Lernziel: VS Code und essentielle Erweiterungen für Vue 3 Entwicklung installieren!

---

3.1 VS Code Installation

Visual Studio Code (VS Code) ist der beliebteste Editor für Vue-Entwicklung.

Download:

• Offizielle Website: https://code.visualstudio.com/
• Windows: .exe Installer
• macOS: .dmg Datei
• Linux: .deb oder .rpm

Installation (Windows):

1. Download die .exe Datei
2. Doppelklick zum Installieren
3. Folge den Installationsschritten
4. ✅ Aktiviere "Zu PATH hinzufügen"

---

3.2 VS Code Erweiterungen für Vue 3

Essentielle Erweiterungen:

1. Volar (Offiziell empfohlen)

• Vue 3 Language Support
• Syntax-Highlighting
• Code-Vervollständigung
• Fehlerprüfung

Installation:

• Drücke Ctrl+Shift+X
• Suche nach "Volar"
• Klicke "Installieren"

2. TypeScript Vue Plugin (Volar)

• Verbesserte TypeScript-Unterstützung
• Zusammen mit Volar installieren

3. ESLint

• Code-Qualität prüfen
• Fehler automatisch beheben

4. Prettier

• Code-Formatierung
• Einheitlicher Code-Stil

5. Auto Rename Tag

• Tag-Namen automatisch umbenennen
• Nützlich für HTML/Vue Templates

6. GitLens

• Git-Integration
• Code-Historie anzeigen

Empfohlene Einstellungen (settings.json):

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "volar.inlayHints.functionLikeReturnTypes.enabled": true
}

---

3.3 Browser-Erweiterungen

Vue Devtools:

• Browser-Erweiterung zur Debugging
• Komponenten-Struktur anzeigen
• Daten inspizieren

Installation:

• Chrome: Chrome Web Store → "Vue.js devtools"
• Firefox: Firefox Add-ons → "Vue.js devtools"

Verwendung:

1. Öffne eine Vue-Webseite
2. Drücke F12
3. Gehe zum "Vue" Tab

---

✅ Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ VS Code installieren
• ✅ Volar und andere Erweiterungen installieren
• ✅ Vue Devtools im Browser installieren

🎯 Nächster Schritt: In Kapitel 4 lernst du Node.js und npm/pnpm installieren!

---

← Zurück zu Kapitel 2: Frontend-GrundlagenWeiter zu Kapitel 4: Node.js & npm/pnpm →