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, stworzony przez Microsoft. Silnik VS Code zasila również popularne przeglądarkowe edytory kodu, takie jak GitHub Codespaces czy Gitpod.

Astro działa z dowolnym edytorem kodu. VS Code jest jednak przez nas zalecany jeżeli chodzi o projekty Astro. Utrzymujemy oficjalne rozszerzenie Astro dla VS Code, które pozwala na korzystanie z kilku kluczowych funkcji i usprawnień dla deweloperów w projektach Astro.

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

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

Zobacz jak skonfigurować TypeScript w swoim projekcie Astro.

Zed

Dział zatytułowany Zed

Zed to edytor kodu o otwartym kodzie źródłowym, który zaczął wspierać Astro w wersji 0.123.2. Rozszerzenie Astro możesz zainstalować w zakładce Extensions tego IDE. Dodaje ono funkcje takie jak podświetlanie składni, uzupełnianie kodu oraz formatowanie.

JetBrains IDEs

Dział zatytułowany JetBrains IDEs

Początkowe wsparcie dla Astro pojawiło się wraz z wydaniem WebStorm 2023.1. Oficjalne rozszerzenie możesz zainstalować w JetBrains Marketplace, albo poprzez wyszukanie “Astro” w zakładce Plugins 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 obsługujących JavaScript.

Inne edytory kodu

Dział zatytułowany Inne edytory kodu

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

  • Rozszerzenie VS Code na Open VSX Oficjalne - Oficjalne rozszerzenie Astro dla VS Code, dostępne w rejestrze Open VSX dla otwartych platform takich jak VSCodium
  • Rozszerzenie Nova Społeczności - Zapewnia podświetlanie składni i uzupełnianie kodu Astro w edytorze Nova
  • Plugin Vim Społeczności - 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ści - Zapewniają podświetlanie składni, przetwarzanie drzewa i uzupełnianie kodu Astro wewnątrz Neovim
  • Emacs - Zobacz jak skonfigurować Emacs i Eglot Społeczności aby działał z Astro
  • Podświetlanie składni Astro dla Sublime Text Społeczności - Pakiet Astro dla Sublime Text, dostępny w menedżerze pakietów Sublime Text.

Edytory przeglądarkowe

Dział zatytułowany Edytory przeglądarkowe

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

  • StackBlitz i CodeSandbox - edytory online działające w przeglądarce, z wbudowanym podświetlaniem składni dla plików .astro. Nie wymagają instalacji ani konfiguracji!
  • GitHub.dev - pozwala zainstalować rozszerzenie Astro dla VS Code jako rozszerzenie webowe, co daje dostęp wyłącznie 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 ESLinta 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.

Instrukcje instalacji, integracje z edytorem oraz inne dodatkowe informacje 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 oficjalnego plugina Astro Prettier.

Aby zacząć, najpierw zainstaluj Prettier oraz nasz plugin:

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

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

Okno terminala
prettier --write .

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