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.
 

 

Краткое руководство по GitHub Codespaces

In this article

Испытайте GitHub Codespaces за 5 минут.

Введение

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

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

Дополнительные сведения о принципах работы GitHub Codespaces см. в сопутствующем руководстве Подробный обзор 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. Дополнительные сведения см. в разделе Персонализация GitHub Codespaces для вашей учетной записи.

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

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

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