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