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

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

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

Поддержка 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 - популярный линтер для JavaScript и JSX. Для поддержки Astro можно установить плагин, поддерживаемый сообществом.

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

Stylelint

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

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

Prettier

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

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

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

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

pnpm add -D prettier prettier-plugin-astro

yarn add --dev prettier prettier-plugin-astro

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

prettier --write .

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

Внести свой вклад

Сообщество