Skip to main content
We publish frequent updates to our documentation, and translation of this page may still be in progress. For the most current information, please visit the English documentation.
All products
GitHub Codespaces

Quickstart for GitHub Codespaces

In this article

Try out GitHub Codespaces in 5 minutes.

Введение

В этом руководстве вы создадите codespace из репозитория шаблонов и изучите некоторые важные возможности, доступные в codespace. Вы будете работать в версии браузера Visual Studio Code, которая изначально является редактором по умолчанию для GitHub Codespaces. После работы с этим кратким руководством вы можете использовать Codespaces в других редакторах и изменить редактор по умолчанию. Ссылки приведены в конце этого руководства.

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

Дополнительные сведения о том, как именно работает GitHub Codespaces, см. в дополнительном руководстве "Deep dive into GitHub Codespaces".

Создание кодового пространства

  1. Перейдите к репозиторию шаблонов github/haikus-for-codespaces .

  2. Щелкните Использовать этот шаблон, а затем щелкните Открыть в codespace.

    Снимок экрана: кнопка и раскрывающееся меню "Использовать этот шаблон"

Запуск приложения

После создания codespace репозиторий шаблонов будет автоматически клонирован в него. Теперь вы сможете выполнить приложение и запустить его в браузере.

  1. Когда терминал будет доступен, введите команду npm run dev. В этом примере используется проект Node.js, и эта команда выполняет скрипт с меткой dev в package.json файле, который запускает веб-приложение, определенное в примере репозитория.

    npm запускают разработку в терминале

    Если вы используете другой тип приложения, введите соответствующую команду запуска для этого проекта.

  2. Во время запуска приложения codespace распознает порт, на котором выполняется приложение, и отображает запрос, чтобы сообщить, что он был переадресован.

    Всплывающее уведомление о перенаправлении портов

  3. Нажмите Открыть в браузере, чтобы просмотреть запущенное приложение на новой вкладке.

Изменение приложения и просмотр изменений

  1. Вернитесь в codespace и откройте haikus.json файл, щелкнув его в проводнике.

  2. Измените поле text первого haiku, чтобы персонализировать приложение с помощью собственного haiku.

  3. Для просмотра изменений вернитесь на вкладку запущенного приложения в браузере и обновите ее.

    Если вы закрыли вкладку, откройте панель Порты и щелкните значок Открыть в браузере для работающего порта.

    Панель переадресации порта

Фиксация и отправка изменений

Теперь, когда вы внесли несколько изменений, вы можете использовать встроенный терминал или исходное представление для публикации работы в новом репозитории.

  1. На панели действий щелкните представление Система управления версиями. Представление "Система управления версиями"

  2. Чтобы выполнить изменения, щелкните + рядом с файлом haikus.json или рядом с элементом Изменения , если вы изменили несколько файлов и хотите создать их все.

    Боковая панель управления исходным кодом с выделенной кнопкой подготовки

  3. Чтобы зафиксировать промежуточные изменения, введите сообщение фиксации с описанием внесенных изменений, а затем нажмите кнопку Зафиксировать.

    Боковая панель управления исходным кодом с сообщением о фиксации

  4. Щелкните Опубликовать ветвь.

    Снимок экрана: кнопка "Опубликовать ветвь" в VS Code

  5. В раскрывающемся списке "Имя репозитория" введите имя нового репозитория, а затем выберите Опубликовать в GitHub частный репозиторий или Опубликовать в общедоступном репозитории GitHub.

    Снимок экрана: раскрывающийся список "Имя репозитория" в VS Code

    Владельцем нового репозитория будет учетная запись GitHub, с помощью которой вы создали codespace.

  6. Во всплывающем окне, которое появится в правом нижнем углу редактора, щелкните Открыть в GitHub , чтобы просмотреть новый репозиторий в GitHub.com. В новом репозитории просмотрите haikus.json файл и убедитесь, что изменения, внесенные в codespace, успешно отправлены в репозиторий.

    Снимок экрана: всплывающее окно "Открыть в GitHub" в VS Code

Персонализация с помощью расширения

При подключении к codespace с помощью браузера или классического приложения Visual Studio Code доступ к Visual Studio Code Marketplace можно получить непосредственно из редактора. В этом примере вы установите расширение VS Code, которое изменяет тему, но вы можете установить любое расширение, полезное для вашего рабочего процесса.

  1. На боковой панели слева нажмите значок "Расширения".

  2. В строке поиска введите fairyfloss и нажмите кнопку Установить.

    Добавление расширения

  3. Выберите тему fairyfloss, выбрав ее из списка.

    Выбор темы fairyfloss

Сведения о синхронизации параметров

Вы можете включить синхронизацию параметров, чтобы синхронизировать расширения и другие параметры на разных устройствах и экземплярах VS Code. При включении синхронизации параметров в экземпляре VS Code, например в классическом приложении VS Code на ноутбуке, параметры для этого экземпляра сохраняются в облаке. Из облака параметры извлекаются во все новые codespace в момент создания и непрерывно синхронизируются со всеми существующими пространствами кода, в которых включена синхронизация параметров.

Включена ли синхронизация параметров по умолчанию в codespace, зависит от существующих параметров и от того, открываете ли вы codespace в браузере или в классическом приложении VS Code. Дополнительные сведения см. в разделе Personalizing GitHub Codespaces for your account.

Дальнейшие действия

Вы успешно создали, персонализировали и запустили свое первое приложение в codespace, но еще многое нужно изучить! Ниже приведены некоторые полезные ресурсы для выполнения дальнейших действий с GitHub Codespaces.

Дополнительные материалы