Zum Inhalt springen

Editor-Einrichtung

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

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.

Erstmals kam Support für Astro auf WebStorm 2023.1. Du kannst das offizielle Plugin über den JetBrains Marketplace installieren oder indem du im Plugins Tab deiner IDE nach “Astro” suchst. Dieses Plugin bietet dir Syntaxhervorhebung, Code-Vervollständigung, Code-Formatierung, und wir planen in Zukunft weitere, fortschrittliche Features hinzuzufügen. Es ist auch für alle anderen JetBrains IDEs mit JavaScript Support erhältlich.

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

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.

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.

Stylelint ist ein beliebter Linter für CSS. Eine von der Community verwaltete Stylelint Konfiguration verfügt über Astro Support.

Eine Installationsanleitung, Editor Integration und weitere Informationen findest du im README des Projekts.

Prettier ist ein beliebtes Code-Formatierungs-Tool für JavaScript, HTML, CSS und mehr. Wenn du die Astro VS Code Extension oder die Astro language server für andere Editoren verwendest, ist Code-Formatierung mit Prettier integriert.

Um das Formatieren von .astro-Dateien außerhalb des Editors (z.B. in der Kommandozeilen­schnittstelle (CLI)) zu ermöglichen, kannst du das offizielle Prettier-Plugin für Astro verwenden.

Um loszulegen, installiere zuerst Prettier und das Plugin:

Terminal-Fenster
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:

Terminal-Fenster
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.

Contribute

Worum geht es?

Community