Пропустить до содержимого

Настройка редактора

Настройте ваш редактор, чтобы улучшить опыт разработки и разблокировать новые функции Astro.

VS Code

Заголовок раздела VS Code

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

Заголовок раздела ESLint

ESLint - популярный линтер для JavaScript и JSX. Для поддержки Astro может быть установлен поддерживаемый сообществом плагин.

Посмотрите руководство пользователя проекта для получения дополнительной информации о том, как установить и настроить ESLint для вашего проекта.

Prettier

Заголовок раздела Prettier

Prettier - популярный форматтер для JavaScript, HTML, CSS и многого другого. Чтобы добавить поддержку форматирования .astro файлов, используйте оффициальный плагин Astro Prettier.

Чтобы начать, сначала установите Prettier и плагин:

Terminal window
npm install --save-dev prettier prettier-plugin-astro

Prettier автоматически обнаружит плагин и будет использовать его для обработки .astro файлов при запуске:

Terminal window
prettier --write .

Посмотрите README плагина Prettier для получения дополнительной информации о поддерживаемых опциях, о том, как настроить Prettier внутри VS Code, и многом другом.