Skip to content

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 dowolnym edytorem kodu. VS Code jest jednak przez nas zalecany jeżeli chodzi o projekty Astro. 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ąć, już dziś zainstaluj rozszerzenie Astro VS Code.

Zobacz jak skonfigurować TypeScript w swoim projekcie Astro.

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ć 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 obsługujących JavaScript.

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 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 wewnątrz edytora 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 w przeglądarce

Dział zatytułowany Edytory w przeglądarce

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

  • StackBlitz i CodeSandbox - edytory online działające w przeglądarce, z wbudowanym podświetlaniem składni dla plików .astro. Nie wymaga 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 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:

Terminal window
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:

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