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

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

Настройте ваш редактор, чтобы улучшить опыт разработки и разблокировать новые функции 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.

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

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

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

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

Stylelint

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

Stylelint - популярный линтер для CSS. Конфигурация Stylelint, поддерживаемая сообществом, предоставляет поддержку Astro.

Инструкции по установке, интеграции с редактором и дополнительная информация можно найти в README проекта.

Prettier

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

Prettier - популярный форматтер для JavaScript, HTML, CSS и многого другого. Если вы используете расширение Astro VS Code или сервер языка Astro в другом редакторе, поддержка форматирования кода с использованием Prettier включена.

Чтобы добавить поддержку форматирования файлов .astro вне редактора (например, через CLI) или в редакторах, которые не поддерживают наши инструменты редактирования, установите официальный плагин Prettier для Astro.

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

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

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

Terminal window
prettier --write .

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