Przejdź do głównej zawartości

Konfiguracja edytora

Dostosuj swój edytor kodu, aby poprawić doświadczenie programowania z Astro i odblokować nowe funkcje.

VS Code

Dział zatytułowany VS Code

VS Code to popularny edytor kodu dla twórców stron internetowych, zbudowany przez Microsoft. Silnik VS Code zasila również popularne edytory kodu w przeglądarce, takie jak GitHub Codespaces i Gitpod

Astro działa z każdym edytorem kodu. Jednak VS Code jest zalecanym przez nas edytorem. Utrzymujemy oficjalne rozszerzenie Astro VS Code, które pozwala na korzystanie z kilku kluczowych funkcji i usprawnień dla deweloperów w projektach Astro.

  • Podświetlanie składni dla plików .astro.
  • Informacje o typach TypeScript dla plików .astro.
  • VS Code Intellisense dla uzupełniania kodu, podpowiedzi i wiele więcej.

Aby zacząć, zainstaluj już dziś rozszerzenie Astro VS Code.

📚 Zobacz, jak skonfigurować TypeScript w swoim projekcie Astro.

JetBrains IDEs

Dział zatytułowany JetBrains IDEs

Wsparcie początkowe dla Astro pojawiło się wraz z wydaniem WebStorm 2023.1. Oficjalne rozszerzenie możesz zainstalować przez JetBrains Marketplace, albo poprzez wyszukanie “Astro”, w zakładce Pluginy w ustawieniach edytora. Dostępne są funkcje takie jak podświetlanie składni, uzupełnianie kodu i formatowanie, z planami dodania jeszcze bardziej zaawansowanych funkcji w przyszłości. Rozszerzenie jest również dostępne dla wszystkich innych IDE JetBrains z obsługą JavaScript.

Nadchodzące Fleet IDE firmy JetBrains również obsługuje silniki językowe, dlatego nasze obecnie dostępne narzędzia będą mogły być tam uruchamiane bez problemu.

Inne edytory kodu

Dział zatytułowany Inne edytory kodu

Nasza niesamowita społeczność utrzymuje kilka rozszerzeń dla innych popularnych edytorów, w tym:

  • Rozszerzenie VS Code na Open VSX Oficjalne - Oficjalne rozszerzenie kodu Astro VS, dostępne w rejestrze Open VSX dla otwartych platform takich jak VSCodium
  • Rozszerzenie Nova Społeczność - Zapewnia podświetlanie składni i uzupełnianie kodu Astro wewnątrz edytora Nova
  • Plugin Vim Społeczność - Zapewnia podświetlanie składni, wcięcie i wsparcie dla zawijania kodu Astro wewnątrz Vim’a lub Neovim’a.
  • Pluginy Neovim LSP i TreeSitter Społeczność - Zapewniają podświetlanie składni, przetwarzanie drzewa i uzupełnianie kodu Astro wewnątrz Neovim.

Edytory w przeglądarce

Dział zatytułowany Edytory w przeglądarce

Poza lokalnymi edytorami, Astro działa dobrze również na edytorach hostowanych w przeglądarce, w tym:

  • StackBlitz i CodeSandbox - edytory online działające w przeglądarce, z wbudowaną obsługą kolorowania składni dla plików .astro. Nie wymagają instalacji ani konfiguracji!
  • GitHub.dev - pozwala zainstalować rozszerzenie Astro VS Code jako rozszerzenie webowe, co daje dostęp tylko do niektórych funkcji pełnego rozszerzenia. Obecnie obsługiwane jest tylko podświetlanie składni.
  • Gitpod - pełne środowisko deweloperskie w chmurze, w którym można zainstalować oficjalne rozszerzenie Astro VS Code z Open VSX.

Inne narzędzia

Dział zatytułowany Inne narzędzia

ESLint

Dział zatytułowany ESLint

ESLint jest popularnym linterem dla JavaScript i JSX. Dla obsługi Astro można zainstalować utrzymywany przez społeczność plugin.

Zobacz wskazówki dla użytkowników zawarte w projekcie, aby uzyskać więcej informacji na temat instalacji i konfiguracji ESLint dla twojego projektu.

Stylelint

Dział zatytułowany Stylelint

Stylelint jest popularnym linterem dla CSS. Dla obsługi Astro można zainstalować utrzymywaną przez społeczność konfigurację Stylint.

Ważne informację, takie jak instrukcje instalacji i konfiguracji, a także informację o integracji z edytorami, znajdziesz w README projektu.

Prettier

Dział zatytułowany Prettier

Prettier to popularny formater dla JavaScript, HTML, CSS i wielu innych języków. Formatowanie kodu z Prettier jest dostępne automatycznie, jeżeli korzystasz z rozszerzenia Astro VS Code albo z innych rozszerzeń tworzonych przez społeczność.

Aby dodać wsparcie dla formatowania plików .astro poza edytorem (np. CLI), albo wewnątrz edytora, który nie obsługuje naszego narzędzia, użyj oficjalnej wtyczki Astro Prettier.

Aby zacząć, najpierw zainstaluj Prettier i naszą wtyczkę:

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

Prettier będzie wtedy automatycznie wykrywał plugin i używał go do przetwarzania plików .astro, gdy go uruchomisz:

Okno terminala
prettier --write .

Zobacz README wtyczki Prettier, aby uzyskać więcej informacji na temat obsługiwanych opcji, jak skonfigurować Prettier wewnątrz VS Code, i więcej.