Настройка редактора
Настройте ваш редактор, чтобы улучшить опыт разработки и разблокировать новые функции Astro.
VS Code
Заголовок раздела VS CodeVS Code - популярный редактор кода для веб-разработчиков, созданный Microsoft. Движок VS Code также обеспечивает работу популярных внутрибраузерных редакторов кода, таких как GitHub Codespaces и Gitpod.
Astro работает с любым редактором кода. Однако VS Code является нашим рекомендуемым редактором для Astro проектов. Мы поддерживаем официальное расширение Astro VS Code, которое открывает несколько ключевых функций и улучшает работу разработчиков в проектах Astro.
- Подсветка синтаксиса для файлов с расширением
.astro
. - Информация о типах TypeScript для файлов с расширением
.astro
. - VS Code Intellisense для автозавершения кода, подсказок и многого другого.
Для начала раьботы установите расширение Astro VS Code.
IDE JetBrains
Заголовок раздела IDE JetBrainsПоддержка Astro была добавлена в WebStorm 2023.1. Вы можете установить официальный плагин через JetBrains Marketplace или выполнив поиск “Astro” во вкладке Плагины IDE. Этот плагин включает функции, такие как подсветка синтаксиса, автозавершение кода и форматирование, а также планирует добавить еще более продвинутые возможности в будущем. Он также доступен для всех других IDE JetBrains с поддержкой JavaScript.
Другие редакторы кода
Заголовок раздела Другие редакторы кодаНаше потрясающее сообщество поддерживает несколько расширений для других популярных редакторов, включая:
- Расширение VS Code на Open VSX Оффициальное - Оффициальное расширение Astro VS Code, доступное в реестре Open VSX для открытых платформ, таких как VSCodium
- Расширение Nova Сообщество - Предоставляет подсветку синтаксиса и автозавершение кода для Astro в Nova
- Плагин Vim Сообщество - Предоставляет подсветку синтаксиса, выравнивание и поддержку сворачивания кода для Astro в Vim или Neovim
- Плагины Neovim LSP и TreeSitter Сообщество - Предоставляют подсветку синтаксиса, парсинг синтаксического дерева, и автозавершение кода для Astro в Neovim
- Emacs - См. инструкции по настройке Emacs и Eglot Сообщество для работы с Astro
- Подсветка синтаксиса Astro для Sublime Text Сообщество - Пакет Astro для Sublime Text, доступный в менеджере пакетов Sublime Text.
Редакторы в браузере
Заголовок раздела Редакторы в браузереПомимо локальных редакторов, Astro также хорошо работает в редакторах, запущенных в браузере, включая:
- StackBlitz и CodeSandbox - онлайн-редакторы которые запускаются в вашем браузере, со встроенной поддержкой подсветки синтаксиса для
.astro
файлов. Установка или настройка не требуется! - GitHub.dev - позволяет вам установить расширение Astro VS Code как веб-расширение, что дает доступ только к некоторым функциям полного расширения. В настоящее время поддерживается только подсветка синтаксиса.
- Gitpod - полноценная среда разработки в облаке, которая может установить оффициальное расширение Astro VS Code от Open VSX.
Другие инструменты
Заголовок раздела Другие инструментыESLint
Заголовок раздела ESLintESLint - популярный линтер для JavaScript и JSX. Для поддержки Astro можно установить плагин, поддерживаемый сообществом.
См. руководство пользователя проекта для получения дополнительной информации о том, как установить и настроить ESLint для вашего проекта.
Stylelint
Заголовок раздела StylelintStylelint - популярный линтер для CSS. Конфигурация Stylelint, поддерживаемая сообществом, предоставляет поддержку Astro.
Инструкции по установке, интеграции с редактором и дополнительная информация можно найти в README проекта.
Prettier
Заголовок раздела PrettierPrettier - популярный форматтер для JavaScript, HTML, CSS и многого другого. Если вы используете расширение Astro VS Code или сервер языка Astro в другом редакторе, поддержка форматирования кода с использованием Prettier включена.
Чтобы добавить поддержку форматирования файлов .astro
вне редактора (например, через CLI) или в редакторах, которые не поддерживают наши инструменты редактирования, установите официальный плагин Prettier для Astro.
Чтобы начать, сначала установите Prettier и плагин:
Prettier автоматически обнаружит плагин и будет использовать его для обработки файлов .astro при запуске:
Для получения дополнительной информации о поддерживаемых параметрах плагина, о том, как настроить Prettier внутри VS Code и многое другое, см. README плагина Prettier.
Learn