Управление репозиториями GitHub для разработки JavaScript в Visual Studio Code

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

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

Предпосылки

• Git , установленный на локальном компьютере
• Visual Studio Код установлен
• Учетная запись GitHub

Откройте удаленный репозиторий

Откройте удаленный репозиторий на локальном компьютере.

Панель действий

1. Установите расширение удаленного репозитория
2. Выберите удаленный индикатор в нижней левой части Visual Studio Code.
3. Следуйте инструкциям.

Строка состояния

Это действие недоступно из этой функции. Выберите другую вкладку.

Палитра команд

1. Откройте палитру команд с сочетанием клавиш CTRL SHIFT + + P.
2. В командной строке палитры введите gitcl, выберите команду Git: Клонировать, а затем выберите Клонировать из GitHub и нажмите Enter.
3. Если появится запрос на ввод URL-адреса репозитория, выберите параметр клонирования из GitHub и нажмите клавишу ВВОД.
4. Если вам будет предложено войти в GitHub, завершите процесс входа.
5. Введите azure-samples/js-e2e-express-server в поле URL-адрес репозитория.
6. Выберите (или создайте) локальный каталог, в который нужно клонировать проект, а затем выберите " Выбрать в качестве назначения репозитория".
7. Когда появится уведомление с вопросом, нужно ли открыть клонированный репозиторий, выберите вариант Открыть.

Встроенный терминал

1. Откройте интегрированный терминал из Терминал —> Новый Терминал.

2. Клонируйте репозиторий с помощью следующей команды Git:

   git clone https://github.com/<ACCOUNT>/<REPOSITORY>
   

3. Откройте в Visual Studio Code:

   code <REPOSITORY>
   

Visual Studio Code использует проверку подлинности Git, предоставляемую операционной системой (например, macOS KeyChain или диспетчер учетных данных Windows) с любой функциональностью Git. Выходные данные видны в Командной палитре > Git: Показать вывод Git.

Подключение к пользовательским доменам GitHub

По умолчанию Visual Studio Code предполагает, что репозитории размещаются в github.com. Если необходимо подключиться к репозиторию в другом домене (например, корпоративный GitHub, например, github.<company_name>.com), необходимо настроить путь Git соответствующим образом.

Чтобы обновить путь Git в VS Code, откройте Файл → Параметры → Настройки и найдите Git: Path. Этот параметр позволяет указать абсолютный путь к исполняемому файлу Git, который работает с пользовательским доменом GitHub.

Кроме того, можно добавить или обновить параметр git.path непосредственно в файле settings.json, чтобы убедиться, что VS Code использует правильный двоичный файл Git для всех операций репозитория.

Открытие локального репозитория

Если у вас есть существующий репозиторий на локальном компьютере и хотите открыть его в Visual Studio Code, просто откройте папку. Visual Studio Code распознает вложенную папку .git и отображает соответствующие сведения.

Панель действий

1. Нажмите клавиши CTRL + +
2. Выберите папку .

Строка состояния

Это действие недоступно из этой функции. Выберите другую вкладку.

Палитра команд

1. Откройте палитру команд с сочетанием клавиш CTRL SHIFT + + P.
2. Отфильтруйте с помощью Git, а затем выберите Open repository.
3. Выберите папку в качестве корневого каталога репозитория.

Встроенный терминал

1. Откройте интегрированный терминал из Терминал —> Новый Терминал.

2. Откройте новый экземпляр Visual Studio Code для каталога репозитория:

   code ../dir1/dir2/my-repo
   

Инициализация нового репозитория

Используйте следующую процедуру, чтобы создать локальный репозиторий исходного кода с помощью git.

Панель действий

1. Выберите элемент управления версиями на панели действий или используйте сочетание клавиш Ctrl + Shift + G.

2. Выберите инициализировать репозиторий.

   

Строка состояния

Это действие недоступно из этой функции. Выберите другую вкладку.

Палитра команд

1. Откройте палитру команд с сочетанием клавиш CTRL SHIFT + + P.
2. Отфильтруйте с помощью Git, а затем выберите Initialize repository.
3. Выберите папку в качестве корневого каталога репозитория.

Встроенный терминал

1. Откройте интегрированный терминал из Терминал —> Новый Терминал.

2. Инициализировать папку с помощью Git с помощью следующей команды Git:

   git init
   

После инициализации репозитория создайте репозиторий на сайте GitHub. Затем добавьте этот репозиторий в качестве удалённого репозитория в локальный проект через палитру команд: выполните поиск Git: Add remote.

Создание ветви для изменений

Создайте новую ветвь, чтобы фиксировать изменения и изолировать их от основной или ветви по умолчанию.

Панель действий

1. Выберите систему управления версиями на панели действий.
2. Выберите многоточие (...) рядом с элементом контроля версий.
3. Выберите Ветвь ->.

Строка состояния

1. Выберите имя ветви в строке состояния. Откроется палитра команд.

   Строка состояния находится в нижней части Visual Studio Code.

2. Выберите в палитре команд элемент Создание ветви.

3. Введите новое имя ветви.

4. Введите имя для новой ветви. Имя ветки отображается в строке состояния.

   

Палитра команд

1. Откройте палитру команд с сочетанием клавиш CTRL SHIFT + + P.

2. Найдите элемент git branch и выберите Git: Create Branch.

   

3. Введите новое имя ветви, например test.

4. Имя ветки отображается в строке состояния.

   

Встроенный терминал

1. Откройте интегрированный терминал из Терминал —> Новый Терминал.

2. Создайте новую ветвь, названную MY-BRANCH, с помощью следующей команды Git:

   git checkout -b MY-BRANCH
   

Фиксация изменений локально

После внесения изменений в файлы в ветви зафиксируйте изменения.

Панель действий

1. Выберите систему управления версиями на панели действий.

2. Введите сообщение коммита, затем нажмите Commit.

   

Строка состояния

Это действие недоступно из этой функции. Выберите другую вкладку.

Палитра команд

1. Откройте палитру команд с сочетанием клавиш CTRL SHIFT + + P.
2. В палитре команд отфильтруйте с помощью Git, затем выберите Commit.
3. Введите сообщение фиксации, а затем нажмите клавишу ВВОД.

Встроенный терминал

1. Откройте интегрированный терминал из Терминал —> Новый Терминал.

2. Создайте новую ветвь, названную MY-BRANCH, с помощью следующей команды Git:

   git commit -m "YOUR COMMIT MESSAGE"
   

Отправьте локальную ветвь в GitHub

Панель действий

1. Выберите значок "Система управления версиями" на панели действий.
2. Выберите Опубликовать ветвь. Если репозиторий не существует на GitHub, он создает репозиторий для вас.

Строка состояния

1. В строке состояния Visual Studio Code выберите значок 'push', который находится справа от названия ветки.

   

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

Палитра команд

1. Откройте палитру команд с сочетанием клавиш CTRL SHIFT + + P.
2. В палитре команд отфильтруйте с помощью Git, затем выберите Push.
3. Если у вас несколько исходящих удаленных адресов, выберите удаленное имя, а затем нажмите клавишу ВВОД.

Встроенный терминал

1. Откройте интегрированный терминал из Терминал —> Новый Терминал.

2. Создайте новую ветвь, названную MY-BRANCH, с помощью следующей команды Git:

   git push <remote-name> <branch-name>
   

Просмотр выходных данных Git

Вы можете просмотреть выходные данные команд Git, используя расширение Source Control. Эти выходные данные помогают отладить при сбое команды.

1. Выберите значок "Система управления версиями" на панели действий.

2. Щелкните многоточие (...) и выберите элемент Показать выходные данные Git.

   

Инструменты Visual Studio Code для работы с Git и GitHub

При работе в Visual Studio Code с репозиторием необходимо использовать отдельные средства.

Значок	Информация	Доступ из
	Команды Git в палитре команд	F1
	Расширение контроля исходного кода	Панель действий
	Расширение запросов на вытягивание и сообщений о проблемах на GitHub	Панель действий
	Расширение репозиториев GitHub	Вы можете быстро и без труда открыть репозиторий GitHub. Для этого можно выполнить поиск репозиториев GitHub и выбрать команду "Открыть репозиторий" в палитре команд, нажать клавишу F1 или выбрать команду Open GitHub Repository... (Открыть репозиторий GitHub) из удаленного индикатора (зеленая кнопка слева в нижнем углу строки состояния).

Связанные ресурсы

• Узнайте о развертывании веб-приложения
• Работа с GitHub в Visual Studio Code
• Использование Visual Studio Code с другими поставщиками систем управления версиями