close
Skip to main content

Быстрый старт для GitHub Codespaces

Быстро приступить к работе с данными GitHub Codespaces.

Введение

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

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

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

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

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

  2. Нажмите кнопку "Использовать этот шаблон", а затем нажмите кнопку "Открыть" в пространстве кода.

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

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

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

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

    Снимок экрана: терминал в VS Code с введенной командой npm run dev.

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

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

    Снимок экрана: "Доступно приложение, работающее через порт 3000". Ниже это зеленая кнопка, помеченная как "Открыть в браузере".

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

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

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

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

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

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

    Снимок экрана: панель "Порты". Вкладка "Порты" и значок глобуса, который открывает переадресованный порт в браузере, выделены оранжевыми контурами.

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

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

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

    Снимок экрана: панель действий VS Code с выделенной кнопкой управления версиями с оранжевым контуром.

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

    Снимок экрана: боковая панель "Управление версиями" с промежуточной кнопкой (знак плюса) справа от "Изменения", выделенная темно-оранжевым контуром.

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

    Снимок экрана: боковая панель "Управление версиями". Сообщение фиксации: "Изменение текста и стилей haiku" и кнопка "Фиксация" описаны оранжевым цветом.

  4. Нажмите кнопку "Опубликовать ветвь".

    Снимок экрана: боковая панель "Управление версиями" с кнопкой "Опубликовать ветвь".

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

    Снимок экрана: раскрывающийся список имени репозитория в VS Code. Показаны два варианта публикации в частном или общедоступный репозиторий.

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

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

    Снимок экрана: сообщение подтверждения для успешно опубликованного репозитория с кнопкой "Открыть на GitHub".

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

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

  1. На панели действий щелкните значок расширений.

    Снимок экрана: панель действий. Значок расширений выделен оранжевым контуром.

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

    Снимок экрана: "Расширения: Marketplace". В поле поиска отображается "fairyfloss". В результатах отображается расширение "fairyfloss" с кнопкой "Установить".

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

    Снимок экрана: раскрывающийся список "Выбор цветовой темы" с выбранной темой "fairyfloss".

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

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

Следующие шаги

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

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