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

Zed

Zed ist ein Open-Source-Code-Editor, der in Version 0.123.2 Unterstützung für Astro hinzugefügt hat. Du kannst die Astro-Erweiterung auf der Registerkarte „Erweiterungen“ der IDE installieren. Diese Erweiterung enthält Funktionen wie Syntaxhervorhebung, Codevervollständigung und Formatierung.

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 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

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

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.

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 prettier prettier-plugin-astro
Terminal-Fenster
pnpm add -D prettier prettier-plugin-astro
Terminal-Fenster
yarn add --dev prettier prettier-plugin-astro

Erstelle eine Konfigurationsdatei .prettierrc.mjs 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.

/** @type {import("prettier").Config} */
export default {
  plugins: ['prettier-plugin-astro'],
  overrides: [
    {
      files: '*.astro',
      options: {
        parser: 'astro',
      },
    },
  ],
};

Führe den Befehl prettier . --write im Terminal aus, um deine Dateien zu formatieren.
- npm
- pnpm
- Yarn
Terminal-Fenster
npx prettier . --write
Terminal-Fenster
pnpm exec prettier . --write
Terminal-Fenster
yarn 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.

Wirke mit

Community