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

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

VS Code

VS Code — популярный редактор кода для веб-разработчиков, созданный Microsoft. Движок VS Code также используется в популярных онлайн-редакторах кода, таких как GitHub Codespaces.

Astro работает с любым редактором кода. Однако VS Code является рекомендуемым редактором для проектов Astro. Мы поддерживаем официальное расширение Astro для VS Code, которое открывает несколько ключевых функций и улучшает опыт разработки проектов на Astro.

• Подсветка синтаксиса для файлов .astro.
• Информация о типах TypeScript для файлов .astro.
• VS Code Intellisense для автодополнения кода, подсказок и многого другого.

Чтобы начать, установите расширение Astro для VS Code уже сегодня.

Узнайте, как настроить TypeScript в вашем проекте Astro.

Zed

Zed — это высокопроизводительный многопользовательский редактор кода, оптимизированный для скорости и больших проектов. Их расширение Astro включает такие функции, как подсветка синтаксиса для файлов .astro, автодополнение кода, форматирование, диагностика и переход к определению.

JetBrains IDEs

Webstorm — это IDE для JavaScript и TypeScript, в которую была добавлена поддержка Astro Language Server в версии 2024.2. Это обновление принесло такие функции, как подсветка синтаксиса, автодополнение кода и форматирование.

Установите официальный плагин через JetBrains Marketplace или выполнив поиск по запросу «Astro» на вкладке Plugins (Плагины) в IDE. Вы можете переключить языковой сервер в Settings | Languages & Frameworks | TypeScript | Astro.

Для получения дополнительной информации о поддержке Astro в Webstorm ознакомьтесь с официальной документацией Webstorm по Astro.

Другие редакторы кода

Наше замечательное сообщество поддерживает несколько расширений для других популярных редакторов, включая:

• Расширение VS Code на Open VSX Официально — Официальное расширение Astro для VS Code, доступное в реестре Open VSX для таких редакторов, как Cursor или VSCodium.
• Плагин для Vim Сообщество — Обеспечивает подсветку синтаксиса, отступы и сворачивание кода для Astro в Vim или Neovim.
• Плагины Neovim LSP и TreeSitter Сообщество — Обеспечивают подсветку синтаксиса, парсинг treesitter и автодополнение кода для Astro в Neovim.
• Emacs — См. инструкции по настройке Emacs и Eglot Сообщество для работы с Astro.
• Подсветка синтаксиса Astro для Sublime Text Сообщество — Пакет Astro для Sublime Text, доступный в менеджере пакетов Sublime Text.
• Расширение Nova Сообщество — Обеспечивает подсветку синтаксиса и автодополнение кода для Astro в Nova.

Онлайн-редакторы

Помимо локальных редакторов, Astro также хорошо работает в онлайн-редакторах, включая:

• StackBlitz и CodeSandbox — онлайн-редакторы, которые работают в браузере и имеют встроенную поддержку подсветки синтаксиса для файлов .astro. Установка или настройка не требуются!
• GitHub.dev — позволяет установить расширение Astro для VS Code как веб-расширение, что дает доступ только к части функций полного расширения. В настоящее время поддерживается только подсветка синтаксиса.
• Firebase Studio — полноценная среда разработки в облаке, которая может установить официальное расширение Astro для VS Code из Open VSX.

Другие инструменты

ESLint

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

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

Stylelint

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

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

Biome

Biome — это универсальный линтер и форматер для веба. Biome в настоящее время имеет экспериментальную поддержку файлов .astro и может использоваться для линтинга и форматирования метаданных (frontmatter) в файлах .astro.

Prettier

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

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

1. Установите prettier и prettier-plugin-astro.

   npm

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

   pnpm

   pnpm add --save-dev --save-exact prettier prettier-plugin-astro

   Yarn

   yarn add --dev --exact prettier prettier-plugin-astro

2. Создайте файл конфигурации .prettierrc (или .prettierrc.json, .prettierrc.mjs, или другие поддерживаемые форматы) в корне вашего проекта и добавьте в него prettier-plugin-astro.

   В этом файле также вручную укажите парсер для файлов Astro.

   .prettierrc

   {
     "plugins": ["prettier-plugin-astro"],
     "overrides": [
       {
         "files": "*.astro",
         "options": {
           "parser": "astro"
         }
       }
     ]
   }

3. Опционально установите другие плагины Prettier для вашего проекта и добавьте их в файл конфигурации. Эти дополнительные плагины, возможно, потребуется перечислить в определенном порядке. Например, если вы используете Tailwind, prettier-plugin-tailwindcss должен быть последним плагином Prettier в массиве плагинов.

   .prettierrc

   {
     "plugins": [
       "prettier-plugin-astro",
       "prettier-plugin-tailwindcss" // должен быть последним
     ],
     "overrides": [
       {
         "files": "*.astro",
         "options": {
           "parser": "astro"
         }
       }
     ]
   }

4. Запустите следующую команду в терминале, чтобы отформатировать файлы.

   npm

   npx prettier . --write

   pnpm

   pnpm exec prettier . --write

   Yarn

   yarn exec prettier . --write

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

dprint

dprint — это легко настраиваемый форматер кода, поддерживающий множество языков, включая JavaScript, TypeScript, CSS и другие. Поддержку файлов .astro можно добавить с помощью плагина markup_fmt.