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.

JetBrains IDEs

Abschnitt betitelt JetBrains IDEs

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.

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
• 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 package manager.

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.

Stylelint

Abschnitt betitelt 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.

Prettier

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

Um loszulegen, installiere zuerst Prettier und das Plugin:

npm

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

pnpm

pnpm add -D prettier prettier-plugin-astro

Yarn

yarn add --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.