VSCode: Erweiterungen, Emmet, Shortcuts
Installieren Sie wichtige Erweiterungen, verwenden Sie Emmet-Abkürzungen, um HTML und CSS sofort zu schreiben, und lernen Sie Tastenkürzel für schnelleres Editieren.
VSCode: Erweiterungen, Emmet, Shortcuts ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Warum VSCode?
Visual Studio Code ist der beliebteste Code-Editor für die Frontend-Entwicklung. Er ist kostenlos, quelloffen und schnell und bietet ein riesiges Erweiterungsökosystem. Die meisten Frontend-Teams verwenden standardmäßig diesen Editor.
Unverzichtbare Erweiterungen
Unverzichtbare Erweiterungen für die Frontend-Entwicklung: ESLint (Linting direkt im Editor), Prettier (automatische Formatierung), GitLens (Git-Blame direkt im Editor), Path Intellisense (Autovervollständigung für Dateipfade) und Auto Rename Tag (gekoppelte HTML-Tags gemeinsam umbenennen).
Sprachspezifische Erweiterungen
Für TypeScript: TypeScript and JavaScript Language Features (integriert). Für React: ES7+ React/Redux snippets. Für Vue: Volar (offiziell). Für Tailwind: Tailwind CSS IntelliSense.
Was ist Emmet?
Emmet ist in VSCode integriert. Geben Sie eine Abkürzung ein und drücken Sie die Tabulatortaste, um sie zu vollständigem HTML oder CSS zu erweitern. Dadurch schreiben Sie Markup wesentlich schneller.
<!-- Type then press Tab: -->
nav>ul>li*3>a{Link $}
<!-- Expands to: -->
<nav>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</nav>Häufige Emmet-Abkürzungen
Lernen Sie diese Emmet-Kürzel: ! → HTML-Grundgerüst, div.container → div mit einer Klasse, ul>li*5 → Liste mit 5 Elementen, input:email → E-Mail-Eingabefeld, form:post → Formular mit method=post.
<!-- type: div.card>img+h3{Title}+p{Description} → -->
<div class="card">
<img src="" alt="">
<h3>Title</h3>
<p>Description</p>
</div>Unverzichtbare Tastenkürzel
Diese Tastenkürzel sparen besonders viel Zeit: Ctrl/Cmd+P (Datei schnell öffnen), Ctrl/Cmd+Shift+P (Befehlspalette), Alt+Click (mehrere Cursor), Ctrl/Cmd+D (nächstes Vorkommen auswählen), Ctrl/Cmd+/ (Kommentar ein- oder auskommentieren).
Bearbeiten mit mehreren Cursors
Mit Alt+Click fügen Sie Cursor hinzu. Mit Ctrl+Alt+Up/Down fügen Sie Cursor oberhalb oder unterhalb hinzu. Mit Ctrl+D wählen Sie das nächste Vorkommen der Auswahl aus. Bei mehreren Cursors werden alle Änderungen gleichzeitig vorgenommen – ideal zum Umbenennen von Variablen in kleinen Gültigkeitsbereichen.
Integriertes Terminal
Öffnen Sie das Terminal innerhalb von VSCode mit Ctrl+` (backtick). Sie können es aufteilen, um den Dev-Server in einem Bereich auszuführen und in einem anderen Tests laufen zu lassen, ohne den Editor zu verlassen.
Workspace-Einstellungen
Erstellen Sie in Ihrem Projekt eine Datei .vscode/settings.json, um projektspezifische Einstellungen festzulegen, die Benutzereinstellungen überschreiben. Committen Sie diese Datei, damit alle Teammitglieder dieselbe Umgebung verwenden: Formatieren beim Speichern, Tabulatorbreite und Spalten für das Lineal.
// .vscode/settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
}IntelliSense und automatische Importe
Die IntelliSense-Funktion von VSCode bietet Autovervollständigung, Parameterhinweise und Dokumentation beim Überfahren mit dem Mauszeiger. In TypeScript-Projekten importiert sie Symbole außerdem automatisch, sobald Sie eine Vervollständigung übernehmen – ein manueller Import ist nicht erforderlich.
Zu Definition und Referenzen wechseln
Klicken Sie mit Ctrl+Click (oder F12) auf ein beliebiges Symbol, um zu seiner Definition zu springen. Mit Shift+F12 werden alle Referenzen angezeigt. Mit Ctrl+Shift+F durchsuchen Sie alle Dateien. Diese Funktionen sind für die Navigation in großen Codebasen unverzichtbar.
Problems-Panel
Das Problems-Panel (Ctrl+Shift+M) listet alle ESLint- und TypeScript-Fehler und -Warnungen in geöffneten Dateien auf. So sehen Sie am schnellsten, was vor einem Commit behoben werden muss.
Kurzer Check
Wozu wird die Emmet-Abkürzung ul>li*3 in VSCode erweitert?
Zusammenfassung: VSCode-Workflow
Installieren Sie ESLint, Prettier und sprachspezifische Erweiterungen. Verwenden Sie Emmet, um HTML/CSS schnell zu schreiben. Lernen Sie die Tastenkürzel (Cmd+P, Cmd+Shift+P, Cmd+D). Setzen Sie formatOnSave in .vscode/settings.json. Verwenden Sie die Bearbeitung mit mehreren Cursors für wiederholte Änderungen. Nutzen Sie „Go to Definition“, um im Code zu navigieren.
Häufig gestellte Fragen
Ist die Lektion „VSCode: Erweiterungen, Emmet, Shortcuts“ kostenlos?
Ja — der vollständige Text von „VSCode: Erweiterungen, Emmet, Shortcuts“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „VSCode: Erweiterungen, Emmet, Shortcuts“?
Installieren Sie wichtige Erweiterungen, verwenden Sie Emmet-Abkürzungen, um HTML und CSS sofort zu schreiben, und lernen Sie Tastenkürzel für schnelleres Editieren. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „VSCode: Erweiterungen, Emmet, Shortcuts“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Chrome DevTools: Elements, Console, Network
- VSCode: Erweiterungen, Emmet, Shortcuts
- Prettier- und ESLint-Einrichtung
- Browserkompatibilität und caniuse.com