💻 VS Code – Deine JavaScript-Werkstatt
So arbeitest du effizient, schnell und fehlerfrei
1. VS Code installieren
Lade dir Visual Studio Code von der offiziellen Website herunter:
2. Live Server installieren (Pflicht!)
Ohne Live Server funktionieren externe CSS- und JS-Dateien nicht.
- Klicke auf das Erweiterungs-Symbol (vier Quadrate)
- Suche nach:
Live Server - Installiere die Erweiterung von Ritwick Dey
- Öffne deinen Projektordner → klicke unten rechts auf „Go Live“
💡 Merke: Die URL muss mit
http:// beginnen – nicht file://!
3. 🚀 Wichtige Tastenkombinationen
Spare wertvolle Zeit mit diesen Shortcuts:
| Aktion | Windows/Linux | macOS |
|---|---|---|
| Alles auswählen | Strg + A |
Cmd + A |
| Ausschneiden / Kopieren / Einfügen | Strg + X / C / V |
Cmd + X / C / V |
| Zeile kopieren | Strg + C (ohne Auswahl) |
Cmd + C |
| Zeile löschen | Strg + X (ohne Auswahl) |
Cmd + X |
| Zeile nach oben/unten verschieben | Alt + ↑ / ↓ |
Option + ↑ / ↓ |
| Kommentar ein-/ausblenden | Strg + / |
Cmd + / |
| Suchen | Strg + F |
Cmd + F |
| Ersetzen | Strg + H |
Cmd + Alt + F |
| Konsole öffnen | Strg + ~ |
Ctrl + ~ |
| Befehlspalette öffnen | Strg + Umschalt + P |
Cmd + Shift + P |
4. 💡 Effizienz-Tipps für JavaScript-Entwicklung
- Autovervollständigung nutzen: VS Code schlägt Variablen, Methoden und HTML-Tags automatisch vor.
- Fehler sofort sehen: Syntax-Fehler werden rot unterstrichen – Mauszeiger für Details.
- Mehrfachauswahl: Halte
Alt(Windows) oderOption(Mac) gedrückt → klicke an mehrere Stellen → bearbeite alle gleichzeitig. - Code falten: Kleine Pfeile links im Rand → große Code-Blöcke ein-/ausklappen.
- Snippets nutzen: Gib
log+ Tab ein → erzeugtconsole.log(). - Formatierung:
Umschalt + Alt + F(Windows) formatiert den gesamten Code automatisch.
5. 🔌 Empfohlene Erweiterungen
- Live Server – zum Testen von Webseiten
- ESLint – findet JavaScript-Fehler und Stilprobleme
- Bracket Pair Colorizer – farbige Klammern für bessere Übersicht
- Auto Rename Tag – HTML-Tags automatisch umbenennen