import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro' import Badge from "/components/Badge.astro"

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

import ReadMore from '~/components/ReadMore.astro';

Посмотрите, как настроить 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 и плагин:

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

prettier --write .

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