| title | description | i18nReady |
|---|---|---|
Настройка редактора |
Настройте ваш редактор для работы с Astro. |
true |
import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro'
import Badge from "/components/Badge.astro"
Настройте ваш редактор, чтобы улучшить опыт разработки и разблокировать новые функции 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.
import ReadMore from '~/components/ReadMore.astro';
Посмотрите, как настроить TypeScript в вашем проекте Astro.
Поддержка 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 - популярный линтер для JavaScript и JSX. Для поддержки Astro можно установить плагин, поддерживаемый сообществом.
См. руководство пользователя проекта для получения дополнительной информации о том, как установить и настроить ESLint для вашего проекта.
Stylelint - популярный линтер для CSS. Конфигурация Stylelint, поддерживаемая сообществом, предоставляет поддержку Astro.
Инструкции по установке, интеграции с редактором и дополнительная информация можно найти в README проекта.
Prettier - популярный форматтер для JavaScript, HTML, CSS и многого другого. Если вы используете расширение Astro VS Code или сервер языка Astro в другом редакторе, поддержка форматирования кода с использованием Prettier включена.
Чтобы добавить поддержку форматирования файлов .astro вне редактора (например, через CLI) или в редакторах, которые не поддерживают наши инструменты редактирования, установите официальный плагин Prettier для Astro.
Чтобы начать, сначала установите Prettier и плагин:
```shell npm install --save-dev prettier prettier-plugin-astro ``` ```shell pnpm add -D prettier prettier-plugin-astro ``` ```shell yarn add --dev prettier prettier-plugin-astro ```Prettier автоматически обнаружит плагин и будет использовать его для обработки файлов .astro при запуске:
prettier --write .Для получения дополнительной информации о поддерживаемых параметрах плагина, о том, как настроить Prettier внутри VS Code и многое другое, см. README плагина Prettier.