Editor-Einrichtung

Passe deinen Code-Editor an, um die Astro-Entwicklererfahrung zu verbessern und neue Funktionen freizuschalten.

VS Code

Abschnitt betitelt VS Code

VS Code ist ein beliebter Code-Editor für Webentwickler, der von Microsoft entwickelt wurde. Die VS Code-Engine treibt auch beliebte browserbasierte Code-Editoren wie GitHub Codespaces und Gitpod an.

Astro funktioniert mit jedem Code-Editor. VS Code ist jedoch der von uns empfohlene Editor für Astro-Projekte. Wir bieten eine offizielle Astro VS Code-Erweiterung an, die mehrere wichtige Funktionen und Verbesserungen für Entwickler in Astro-Projekten freischaltet.

• Syntaxhervorhebung für .astro-Dateien.
• TypeScript-Typinformationen für .astro-Dateien.
• VS Code IntelliSense für Code-Vervollständigung, Hinweise und mehr.

Um loszulegen, installiere noch heute die Astro VS Code-Erweiterung.

📚 Schau dir an, wie du in deinem Astro-Projekt TypeScript einrichtest.

Andere Code-Editoren

Abschnitt betitelt Andere Code-Editoren

Unsere wunderbare Community stellt mehrere Erweiterungen für andere beliebte Editoren bereit, darunter auch:

• VS Code-Erweiterung auf Open VSX Offiziell - Die offizielle Astro-Erweiterung für VS Code, verfügbar in der Open VSX Registry für quelloffene Plattformen wie VSCodium
• Nova-Erweiterung Community - Syntaxhervorhebung, IntelliSense und Autovervollständigung für Astro

Browser-Editoren

Abschnitt betitelt Browser-Editoren

Zusätzlich zu lokalen Code-Editoren funktioniert Astro auch gut in browserbasierten Editoren, einschließlich:

• StackBlitz und CodeSandbox - Online-Editoren, die in deinem Browser laufen, mit eingebauter Syntaxhervorhebungs-Unterstützung für .astro-Dateien. Keine Installation oder Konfiguration erforderlich!
• GitHub.dev - ermöglicht die Installation der Astro VS Code-Erweiterung als Web-Erweiterung, bietet aber nur einen reduzierten Funktionsumfang. Derzeit wird nur die Syntaxhervorhebung unterstützt.
• Gitpod - eine vollständige Entwicklungsumgebung in der Cloud, mit der die offizielle Astro VS Code-Erweiterung von Open VSX installiert werden kann.

Andere Tools

Abschnitt betitelt Andere Tools

ESLint

Abschnitt betitelt ESLint

ESLint ist ein beliebter Linter für JavaScript und JSX. Zur Unterstützung von Astro kann ein von der Community gepflegtes Plugin installiert werden.

Sieh dir das Benutzerhandbuch des Projekts an, um mehr über die Installation und Einrichtung von ESLint in deinem Projekt zu erfahren.

Prettier

Abschnitt betitelt Prettier

Prettier ist ein beliebtes Code-Formatierungs-Tool für JavaScript, HTML, CSS und mehr. Um das Formatieren von .astro-Dateien zu ermöglichen, kannst du das offizielle Prettier-Plugin für Astro verwenden.

Um loszulegen, installiere zuerst Prettier und das Plugin:

npm install --save-dev prettier prettier-plugin-astro

Wenn du Prettier dann ausführst, erkennt es automatisch das Plugin und verwendet es zur Verarbeitung von .astro-Dateien:

prettier --write .

Lies die README-Datei des Prettier-Plugins für weitere Informationen über die unterstützten Optionen, die Einrichtung von Prettier in VS Code und vieles mehr.

Verwendung mit pnpm

Aufgrund von Problemen in von Prettier verwendeten Paketen wird das Plugin nicht automatisch erkannt, wenn du den Paketmanager pnpm einsetzt. Damit Prettier in diesem Fall das Plugin findet, musst du den nachfolgenden Parameter bei der Ausführung ergänzen:

prettier --write --plugin-search-dir=. .

Auch zur Verwendung von Prettier innerhalb von VS Code sind in diesem Fall weitere Einstellungen erforderlich. Lies die README-Datei des Plugins für weitere Informationen.