Editor-Einrichtung

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

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 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 (EN).

Zed

Zed ist ein leistungsstarker und kollaborativer Code-Editor, der für Geschwindigkeit und große Projekte optimiert ist. Die Astro-Erweiterung beinhaltet Funktionen wie Syntaxhervorhebung für .astro-Dateien, Code-Vervollständigung, Formatierung, Diagnosefunktionen und Gehe-zu-Definitionen.

JetBrains IDEs

Webstorm ist eine JavaScript- und TypeScript-IDE, die in Version 2024.2 Unterstützung für den Astro Language Server bietet. Dieses Update bringt Funktionen wie Syntaxhervorhebung, Codevervollständigung und Formatierung.

Installiere das offizielle Plugin über den JetBrains Marketplace oder indem du auf der Registerkarte Plugins der IDE nach „Astro“ suchst. Du kannst den Sprachserver unter Settings | Languages & Frameworks | TypeScript | Astro ein- und ausschalten.

Weitere Informationen zur Astro-Unterstützung in Webstorm findest du in der offiziellen Webstorm Astro Dokumentation.

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 Editoren wie Cursor oder VSCodium.
Vim Plugin Community - Syntaxhervorhebung, Einzug und Code-Faltungsunterstützung für Astro in Vim oder Neovim
Neovim LSP und TreeSitter Plugins Community - Syntaxhervorhebung, treesitter Analyse und Autovervollständigung für Astro in Neovim
Emacs - Siehe Anleitung für die Konfiguration von Emacs und Eglot Community um mit Astro zu arbeiten
Astro Syntaxhervorhebung für Sublime Text Community - Das Astro-Paket für Sublime Text, verfügbar im Sublime Text-Paketmanager.
Nova-Erweiterung Community - Stellt Syntaxhervorhebung und Autovervollständigung für Astro in Nova bereit.

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.
Firebase Studio (IDX) - eine vollständige Entwicklungsumgebung in der Cloud, mit der die offizielle Astro VS Code-Erweiterung von Open VSX installiert werden kann.

Andere Tools

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.

Stylelint

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.

Biome

Biome ist ein All-in-One-Linter und Formatierungs-Tool für das Netz. Biome bietet derzeit experimentelle Unterstützung für .astro-Dateien und kann verwendet werden, um das Frontmatter in .astro-Dateien zu linten und zu formatieren.

Prettier

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 Kommandozeilenschnittstelle (CLI)) zu ermöglichen, kannst du das offizielle Prettier-Plugin für Astro verwenden.

Installiere prettier und prettier-plugin-astro.
- npm
- pnpm
- Yarn
Terminal-Fenster
npm install --save-dev --save-exact prettier prettier-plugin-astro
Terminal-Fenster
pnpm add --save-dev --save-exact prettier prettier-plugin-astro
Terminal-Fenster
yarn add --dev --exact prettier prettier-plugin-astro
Erstelle eine Konfigurationsdatei .prettierrc (oder .prettierrc.json, .prettierrc.mjs oder andere unterstützte Formate) im Stammverzeichnis deines Projekts und füge prettier-plugin-astro hinzu.

In dieser Datei gibst du auch den Parser für Astro-Dateien manuell an.
.prettierrc
```
{
  "plugins": ["prettier-plugin-astro"],
  "overrides": [
    {
      "files": "*.astro",
      "options": {
        "parser": "astro"
      }
    }
  ]
}
```
Installiere optional andere Prettier-Plugins für dein Projekt und ergänze sie in der Konfigurationsdatei. Diese zusätzlichen Plugins müssen eventuell in einer bestimmten Reihenfolge gelistet werden. Nutzt du z. B. Tailwind, muss prettier-plugin-tailwindcss das letzte Prettier-Plugin im plugins-Array sein.
.prettierrc
```
{
  "plugins": [
    "prettier-plugin-astro",
    "prettier-plugin-tailwindcss" // muss der letzte Eintrag sein
  ],
  "overrides": [
    {
      "files": "*.astro",
      "options": {
        "parser": "astro"
      }
    }
  ]
}
```
Führe den folgenden Befehl in deinem Terminal aus, um deine Dateien zu formatieren.
- npm
- pnpm
- Yarn
Terminal-Fenster
npx prettier . --write
Terminal-Fenster
pnpm exec prettier . --write
Terminal-Fenster
yarn exec prettier . --write

In der README des Prettier-Plugins findest du weitere Informationen über die unterstützten Optionen, wie du Prettier in VS Code einrichtest und mehr.

dprint

dprint ist ein hochgradig konfigurierbares Code-Formatierungs-Tool mit Unterstützung für viele Sprachen, darunter JavaScript, TypeScript, CSS und mehr. Unterstützung für .astro-Dateien kann mithilfe des markup_fmt-Plugins hinzugefügt werden.

Wirke mit Community Sponsor