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

В этой статье

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

Введение

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

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

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

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

Перейдите в репозиторий шаблонов github/haikus-for-codespaces .
Щелкните Использовать этот шаблон, а затем щелкните Открыть в codespace.

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

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

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

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

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

Вернитесь в codespace и откройте файл, haikus.json щелкнув его в проводнике.
Измените поле text первого haiku, чтобы персонализировать приложение с помощью собственного haiku.
Для просмотра изменений вернитесь на вкладку запущенного приложения в браузере и обновите ее.

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

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

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

На панели действий щелкните представление Система управления версиями.
Чтобы подготовить изменения, щелкните рядом с haikus.json файлом или рядом с элементом Изменения , если вы изменили несколько файлов и хотите подготовить их все.
Чтобы зафиксировать промежуточные изменения, введите сообщение фиксации, описывающее внесенные изменения, а затем нажмите кнопку Зафиксировать.
Щелкните Опубликовать ветвь.
В раскрывающемся списке "Имя репозитория" введите имя нового репозитория, а затем выберите Опубликовать в GitHub частный репозиторий или Опубликовать в GitHub общедоступный репозиторий.

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

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

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

На панели действий щелкните значок Расширения.
В строке поиска введите fairyfloss и нажмите кнопку Установить.
Выберите тему fairyfloss, выбрав ее из списка.

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

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

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

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

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

"Подробные сведения о GitHub Codespaces": в этом кратком руководстве представлены некоторые функции GitHub Codespaces. В глубоком обзоре эти области рассматриваются с технической точки зрения.
"Добавление конфигурации контейнера разработки в репозиторий": эти руководства содержат сведения о настройке репозитория для использования GitHub Codespaces с определенными языками.
"Основные сведения о контейнерах разработки": в этом руководстве содержатся сведения о создании настраиваемой конфигурации для Codespaces для проекта.