Konfiguracja edytora
Dostosuj swój edytor kodu, aby poprawić doświadczenie programowania z Astro i odblokować nowe funkcje.
VS Code
Dział zatytułowany VS CodeVS 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 IDEsWsparcie 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 koduNasza 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ądarcePoza 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ędziaESLint 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 StylelintStylelint 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 PrettierPrettier 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ę:
npm install --save-dev prettier prettier-plugin-astropnpm add -D prettier prettier-plugin-astroyarn add --dev prettier prettier-plugin-astroPrettier będzie wtedy automatycznie wykrywał plugin i używał go do przetwarzania plików .astro, gdy go uruchomisz:
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.
Learn