Suche
MenüSchließen
AnleitungEinsteiger

Astro

Die besten VS-Code-Erweiterungen für Astro

Astro, Prettier, Error Lens und weitere VS-Code-Erweiterungen: Empfehlungen für Einsteiger, Installation und passende Einstellungen für deinen Astro-Kurs.

Veröffentlicht am

12 Minuten Lesezeit

Wer mit Astro Webseiten erstellt, arbeitet häufig mit Visual Studio Code (VS Code). Der kostenlose Editor ist bereits gut ausgestattet. Mit einigen Erweiterungen wird das Arbeiten mit .astro-Dateien, HTML, CSS, JavaScript und Markdown jedoch angenehmer.

In diesem Beitrag lernst du, welche Erweiterungen wirklich wichtig sind, welche du später ergänzen kannst und wie du deine Entwicklungsumgebung für Astro einrichtest. Du musst dafür noch kein erfahrener Programmierer sein.

Empfehlung für Anfänger: Beginne mit Astro, Prettier und Error Lens. Installiere weitere Erweiterungen erst dann, wenn du ihre Funktionen benötigst.

1. Was sind VS-Code-Erweiterungen?

Erweiterungen (englisch Extensions) sind zusätzliche Funktionen für VS Code. Sie können beispielsweise:

  • Quellcode farblich hervorheben und vervollständigen,
  • Fehler und Warnungen anzeigen,
  • Dateien automatisch formatieren,
  • Markdown-Beiträge komfortabler bearbeiten und
  • bei der Versionsverwaltung mit Git helfen.

Du findest sie in VS Code über das Erweiterungen-Symbol in der linken Seitenleiste oder über die Tastenkombination Strg + Umschalt + X (Windows/Linux).

Gib dort den Namen einer Erweiterung ein, prüfe den Herausgeber und klicke auf Installieren. Die Links in der folgenden Übersicht führen direkt zum Visual Studio Marketplace.

2. Die sechs wichtigsten Erweiterungen

2.1 Astro – die wichtigste Erweiterung

Die offizielle Astro-Erweiterung versteht die besondere Syntax der .astro-Dateien. Sie unterstützt unter anderem Syntaxhervorhebung, Vervollständigung, Hinweise bei Fehlern und die Formatierung von Astro-Dateien.

Beispiel: Während du in einer Astro-Komponente arbeitest, bekommst du Hinweise zur Syntax und zu verwendeten Eigenschaften. Das erleichtert gerade den Einstieg.

2.2 Prettier – Code automatisch formatieren

Prettier sorgt für eine einheitliche Darstellung von Code. Einrückungen, Zeilenumbrüche und andere Formatierungsdetails werden nach festgelegten Regeln angepasst. Das macht Dateien leichter lesbar.

Achtung: Die offizielle Astro-Erweiterung besitzt ebenfalls Formatierungsfunktionen. Lege deshalb fest, welcher Formatter für welchen Dateityp zuständig ist. Eine passende Konfiguration findest du weiter unten.

Für Projekte, in denen Prettier selbst .astro-Dateien formatieren soll, kann zusätzlich das Projektpaket prettier-plugin-astro verwendet werden. Das ist für den Einstieg nicht notwendig.

2.3 Error Lens – Fehlermeldungen direkt im Code

Error Lens macht Hinweise und Fehlermeldungen des Editors direkt an den betroffenen Codezeilen sichtbar. So musst du nicht ständig zur separaten Problems-Ansicht wechseln.

Wichtig: Error Lens analysiert den Code nicht selbst. Es zeigt die Meldungen anderer Werkzeuge deutlicher an, beispielsweise aus der Astro-Sprachunterstützung oder von ESLint.

2.4 ESLint – JavaScript und TypeScript überprüfen

ESLint erkennt mögliche Probleme und Verstöße gegen festgelegte Programmierregeln in JavaScript und TypeScript. Das ist besonders bei interaktiven Webseiten hilfreich.

Die Erweiterung allein genügt nicht in jedem Projekt: Du benötigst auch eine passende ESLint-Konfiguration und die erforderlichen Projektpakete. Für reine HTML/CSS-Übungen kannst du ESLint zunächst weglassen.

2.5 Markdown All in One – Beiträge komfortabler schreiben

Mit Markdown verfasst du Beiträge, Tutorials oder Dokumentationen, ohne jedes Textelement in HTML schreiben zu müssen. Die Erweiterung erleichtert beispielsweise das Bearbeiten von Listen, Überschriften und Inhaltsverzeichnissen.

VS Code bietet bereits eine integrierte Markdown-Vorschau. Markdown All in One ergänzt diese Funktionen.

2.6 GitLens – Änderungen nachvollziehen

GitLens ergänzt die integrierten Git-Funktionen von VS Code. Du kannst unter anderem nachvollziehen, wann bestimmte Zeilen geändert wurden und welche Commits zu einer Datei gehören.

Wenn du bereits GitHub Desktop verwendest, ist GitLens ein zusätzliches Werkzeug und keine Voraussetzung für die Astro-Entwicklung. Einige erweiterte Funktionen können vom jeweiligen GitLens-Angebot abhängen.

3. Weitere nützliche Erweiterungen

Erweiterung Wofür ist sie gut? Wann installieren?
markdownlint Prüft Markdown-Dateien auf Stil- und Strukturprobleme Wenn du regelmäßig Beiträge verfasst
EditorConfig Vereinheitlicht Einrückung und Zeilenenden in Projekten mit .editorconfig Bei Teamarbeit und einheitlichen Repositories
Tailwind CSS IntelliSense Unterstützt die Arbeit mit Tailwind-Klassen Nur wenn das Projekt Tailwind nutzt
Path Intellisense Hilft beim Schreiben von Dateipfaden Bei vielen Imports und Dateien
Code Spell Checker Erkennt mögliche Tippfehler in Texten und Bezeichnern Optional, Wörterbücher prüfen

Merke: Mehr Erweiterungen bedeuten nicht automatisch eine bessere Entwicklungsumgebung. Manchmal überschneiden sich Funktionen, oder unterschiedliche Formatter geraten in Konflikt.

4. Erweiterungen passend zum Astro-Kurs auswählen

Du findest alle 32 Lektionen in der Astro-Kursübersicht. Für die Einrichtung startest du mit Lektion 3: Entwicklungsumgebung einrichten.

Für den Astro-Anfängerkurs der Know-How-Schmiede bietet sich folgende Reihenfolge an:

Kursabschnitt Sinnvolle Erweiterungen
Modul 1 – Einstieg und Installation Astro, Error Lens
Modul 2 – HTML, CSS und Layout Astro, Prettier
Modul 3 – Komponenten und Layouts Astro, Prettier; ESLint bei Bedarf
Modul 4 – Markdown und Blog Markdown All in One, optional markdownlint
Modul 5 – JavaScript und Interaktivität ESLint, Error Lens
Modul 6 – GitHub und Deployment Optional GitLens

So lernen Einsteiger jede Erweiterung dann kennen, wenn sie einen konkreten Nutzen bietet.

5. Erweiterungen im Repository empfehlen

VS Code unterstützt eine Liste empfohlener Erweiterungen pro Projekt. Erstelle dazu im Projektordner die Datei:

.vscode/extensions.json

Füge folgenden Inhalt ein:

{
  "recommendations": [
    "astro-build.astro-vscode",
    "esbenp.prettier-vscode",
    "usernamehw.errorlens",
    "dbaeumer.vscode-eslint",
    "yzhang.markdown-all-in-one",
    "DavidAnson.vscode-markdownlint",
    "eamodio.gitlens"
  ]
}

Wenn jemand das Repository in VS Code öffnet, kann der Editor diese Erweiterungen vorschlagen. Sie werden dadurch nicht automatisch installiert.

Für ein reines Anfängerprojekt kannst du die Liste zunächst auf die ersten drei Erweiterungen reduzieren.

6. Automatische Formatierung beim Speichern einschalten

Du kannst VS Code so einstellen, dass Quellcode beim Speichern formatiert wird. Für Einstellungen, die gemeinsam mit dem Projekt versioniert werden sollen, erstelle:

.vscode/settings.json

Beispiel:

{
  "editor.formatOnSave": true,
  "[astro]": {
    "editor.defaultFormatter": "astro-build.astro-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Mit dieser Konfiguration übernimmt die offizielle Astro-Erweiterung die Formatierung von .astro-Dateien. Prettier formatiert JavaScript-, CSS- und JSON-Dateien.

Hinweis: Wenn dein Projekt später Prettier mit prettier-plugin-astro und einer gemeinsamen Formatierungskonfiguration verwendet, kannst du den Formatter für Astro-Dateien entsprechend umstellen. Es sollte möglichst nur ein Formatter für denselben Dateityp zuständig sein.

7. Brauche ich die Erweiterung „Live Server“?

Nein, normalerweise nicht. Astro bringt einen eigenen Entwicklungsserver mit. Starte ihn im Terminal des Astro-Projekts:

npm run dev

Die Terminalausgabe zeigt dir die lokale Adresse, üblicherweise:

http://localhost:4321/

Der Astro-Entwicklungsserver aktualisiert die Webseite bei Änderungen und verarbeitet Astro-Komponenten. Ein separater Live Server ist für dieses Vorgehen nicht erforderlich.

8. Häufige Probleme und ihre Lösungen

.astro-Dateien werden nicht richtig hervorgehoben: Prüfe, ob die offizielle Astro-Erweiterung installiert und aktiviert ist. Kontrolliere unten rechts in VS Code den ausgewählten Sprachmodus.

Beim Speichern verändert sich der Code unerwartet: Prüfe die Einstellungen für editor.defaultFormatter und editor.formatOnSave. Vermeide mehrere konkurrierende Formatierungswerkzeuge für denselben Dateityp.

ESLint zeigt keine Fehler: Prüfe, ob ESLint und die benötigten Konfigurationsdateien beziehungsweise Pakete im Projekt vorhanden sind. Die VS-Code-Erweiterung benötigt eine funktionierende Projektkonfiguration.

Die Webseite wird nicht angezeigt: Öffne das Terminal im richtigen Projektverzeichnis und starte npm run dev. Schau auf mögliche Fehlermeldungen und verwende die tatsächlich ausgegebene lokale URL.

9. Kleine Praxisübung

  1. Öffne dein Astro-Projekt in VS Code.
  2. Installiere Astro, Prettier und Error Lens.
  3. Erstelle die Dateien .vscode/extensions.json und .vscode/settings.json aus diesem Beitrag.
  4. Öffne eine vorhandene .astro-Datei und verändere einen Text.
  5. Speichere die Datei und kontrolliere die Formatierung.
  6. Starte mit npm run dev die Vorschau im Browser.
  7. Teste anschließend bewusst eine fehlerhafte Schreibweise in einer Übungsdatei und beobachte, ob VS Code eine Diagnose anzeigt. Korrigiere den Fehler danach wieder.

Ergebnis: Du besitzt eine übersichtliche Entwicklungsumgebung, die dich beim Schreiben, Prüfen und Formatieren deiner Astro-Webseite unterstützt.

10. Deine Auswahl für den Einstieg

Für den Einstieg reichen drei Erweiterungen: Astro, Prettier und Error Lens. Wer später viele Markdown-Beiträge schreibt, ergänzt Markdown All in One. Bei interaktiven Funktionen wird ESLint interessant; für die Versionsgeschichte bietet sich optional GitLens an.

Installiere nicht möglichst viele Werkzeuge, sondern nur solche, die dein aktuelles Projekt tatsächlich erleichtern. So bleibt die Entwicklungsumgebung verständlich und gut wartbar.