Использование интеграции Git в Visual Studio Code
Published on November 12, 2020
Введение
Редактор Visual Studio Code (VS Code) стал одним из самых популярных для веб-разработки. Его популярность обусловлена множеством встроенных возможностей, в том числе интеграции с системой контроля исходного кода, а именно с Git. Использование возможностей Git из VS Code позволяет сделать рабочие процессы более эффективными и надежными.
В этом учебном модуле мы изучим интеграцию контроля исходного кода в VS с помощью Git.
Предварительные требования
Для этого обучающего модуля вам потребуется следующее:
Шаг 1 — Знакомство с вкладкой Source Control
Прежде всего, чтобы воспользоваться преимуществами интеграции контроля исходного кода, следует инициализировать проект как репозиторий Git.
Откройте Visual Studio Code и запустите встроенный терминал. Вы можете открыть его, используя сочетание клавиш CTRL + ` в Linux, macOS или Windows.
Используя терминал, создайте каталог для нового проекта и перейдите в этот каталог:
Затем создайте репозиторий Git:
Также вы можете сделать это в Visual Studio Code, открыв вкладку Source Control (иконка выглядит как развилка дороги) в левой панели:
Затем нажмите кнопку Open Folder:
При нажатии кнопки откроется проводник файлов, где будет открыт текущий каталог. Выберите предпочитаемый каталог проекта и нажмите Open.
Затем нажмите Initialize Repository:
После этого на панели Source Control вы увидите, что рядом с именем вашего нового файла отображается буква U. Обозначение U означает, что файл не отслеживается, то есть, что это новый или измененный файл, который еще не был добавлен в репозиторий:
После этого рядом с файлом появится буква A. A обозначает новый файл, который был добавлен в репозиторий.
Чтобы записать изменения, введите команду отправки в поле ввода в верхней части панели Source Control. Затем нажмите иконку отметки check для отправки файла в репозиторий.
После этого вы увидите, что несохраненных изменений нет.
, и сохраните файл.
На панели исходного кода вы увидите, что ваш файл изменился. Рядом с именем файла появится буква M, означающая, что файл изменен:
Для практики давайте запишем это изменение в репозиторий.
Теперь вы познакомились с работой через панель контроля исходного кода, и мы переходим к интерпретации показателей gutter.
Шаг 2 — Интерпретация показателей Gutter
На этом шаге мы рассмотрим концепцию Gutter («Желоб») в VS Code. Gutter — это небольшая область справа от номера строки.
Если ранее вы использовали сворачивание кода, то в области Gutter находятся иконки «Свернуть» и «Развернуть».
. После этого вы увидите, что измененная строка помечена в области Gutter синей вертикальной чертой. Синяя вертикальная черта означает, что соответствующая строка кода была изменена.
Теперь добавьте новую строку в конец раздела и обратите внимание на зеленую полосу. Вертикальная зеленая полоса обозначает добавленную строку кода.
В этом примере описаны индикаторы области Gutter для случаев изменения, удаления и добавления строки:
Шаг 3 — Просмотр отличий файлов
VS Code также позволяет посмотреть отличия между разными версиями файла. Обычно для этого нужно загружать отдельный инструмент diff, так что встроенная функция повысит эффективность работы.
В этом примере мы видим, что в текущей версии добавлена строка:
Шаг 4 — Работа с ветвлением
Вы можете использовать нижнюю панель для создания и переключения ветвей кода. В нижней левой части редактора отображается иконка контроля исходного кода (которая выглядит как дорожная развилка), после которой обычно идет имя главной ветви или ветви, над которой вы сейчас работаете.
Чтобы создать ветвление, нажмите на имя ветви. Откроется меню, где вы сможете создать новую ветвь:
Шаг 5 — Работа с удаленными репозиториями
В этом учебном модуле мы не будем вдаваться в детали, но панель Source Control также предоставляет доступ для работы с удаленными репозиториями. Если вы уже работали с удаленными репозиториями, то вы увидите знакомые вам команды, такие как pull, sync, publish, stash и т. д.
Шаг 6 — Установка полезных расширений
В VS Code имеется не только множество встроенных функций для Git, но и несколько очень популярных расширений, добавляющих дополнительные функции.
Git Blame
Это расширение дает возможность просматривать информацию Git Blame в панели состояния для текущей выделенной строки.
Английское слово Blame имеет значение «винить», но не стоит беспокоиться — расширение Git Blame призвано сделать процесс разработки более практичным, а не обвинять кого-то в чем-то плохом. Идея «винить» кого-то за изменения кода относится не к буквальному возложению вины, а к идентификации человека, к которому следует обращаться с вопросами в отношении определенных частей кода.
Как вы видите на снимке экрана, это расширение выводит на нижней панели инструментов небольшое сообщение, указывающее, кто изменял текущую строку кода, и когда было сделано это изменение.
Git History
Хотя вы можете просматривать текущие изменения, сравнивать версии и управлять ветвлением с помощью встроенных функций VS Code, они не дают возможности просматривать историю Git. Расширение Git History решает эту проблему.
Как можно увидеть на снимке ниже, это расширение позволяет тщательно изучать историю файла, автора, ветви и т. д. Чтобы активировать показанное ниже окно Git History, нажмите на файл правой кнопкой мыши и выберите пункт Git: View File History:
Также вы сможете сравнивать ветви и записанные в репозиторий версии, создавать ветви из записанных версий и т. д.
Git Lens
GitLens дополняет возможности Git, встроенные в Visual Studio Code. Это расширение помогает визуализировать принадлежность кода через аннотации Git Blame и линзу кода, просматривать и изучать репозитории Git из среды VS Code, получать полезные аналитические данные с помощью мощных команд сравнения, а также выполнять многие другие задачи.
Расширение Git Lens — одно из самых мощных и популярных среди сообщества разработчиков расширений. В большинстве случаев его функции могут заменить каждое из вышеперечисленных двух расширений.
В правой части текущей строки, над которой вы работаете, отображается небольшое сообщение о том, кто внес изменение, когда это было сделано, а также сообщение о записи изменения в репозиторий. При наведении курсора на это сообщение выводится всплывающий блок с дополнительной информацией, включая само изменение кода, временную метку и т. д.
Также данное расширение предоставляет много функций, связанных с историей Git. Вы можете легко получить доступ к разнообразной информации, включая историю файлов, сравнение с предыдущими версиями, открытие определенных редакций и т. д. Чтобы открыть эти опции, вы можете нажать на текст на нижней панели состояния, где указан автор, изменивший строку кода, а также время ее изменения.
При этом откроется следующее окно:
Это расширение имеет очень много функций, и потребуется время, чтобы разобраться со всеми открываемыми им возможностями.
Заключение
В этом учебном модуле вы научились использовать интеграцию с системой контроля исходного кода в VS Code. VS Code предоставляет множество функций, для использования которых раньше нужно было загружать отдельный инструмент.
Учебник. Открытие проекта из репозитория
В этом руководстве вы примените Visual Studio для первичного подключения к репозиторию и открытия проекта.
Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.
Открытие проекта из репозитория GitHub
Visual Studio позволяет легко открыть проект из репозитория. Это можно сделать при запуске Visual Studio или непосредственно в интегрированной среде разработки Visual Studio.
Ниже описывается порядок действий.
С помощью начального окна
Запустите Visual Studio.
В начальном окне выберите раздел Клонировать репозиторий.
Введите или укажите расположение репозитория, а затем нажмите кнопку Клонировать.
Возможно, появится диалоговое окно Сведения о пользователе Git с запросом на информацию для входа. Вы можете либо добавить сведения, либо изменить указанные сведения по умолчанию.
Нажмите кнопку Сохранить, чтобы добавить эту информацию в GITCONFIG-файл. (Или нажмите кнопку Отменить, чтобы сделать это позже.)
Дополнительные сведения о выполнении входа в Visual Studio см. на странице Вход в Visual Studio. Дополнительные сведения о том, как использовать учетную запись GitHub для входа, см. на странице Работа с учетными записями GitHub в Visual Studio. Если вы получили уведомление о доверии и хотите узнать больше, перейдите на страницу Настройка параметров доверия для файлов и папок.
Просмотр файлов в обозревателе решений
Затем Visual Studio загрузит решения из репозитория с помощью окна Представление папок в Обозревателе решений.
Чтобы просмотреть решение в окне Представление решения, дважды щелкните его SLN-файл.
Можно также нажать кнопку Переключить представления, а затем выбрать program.cs, чтобы просмотреть код решения.
По умолчанию отображается представление папок. Его можно изменить на представление решения в меню Git. Для этого выберите Параметры > Система управления версиями > Глобальные параметры Git > Автоматически загружать решение при открытии репозитория Git.
Открытие локального проекта из репозитория GitHub, клонированного ранее
Запустите Visual Studio.
В начальном окне выберите Открыть проект или решение.
В Visual Studio откроется проводник. Найдите решение или проект и выберите его, чтобы открыть.
Если вы недавно открывали проект или решение, его можно быстро открыть снова из раздела Открыть последние.
Теперь можно приступать к написанию кода.
Использование интегрированной среды разработки
Для взаимодействия с папками и файлами репозитория можно также использовать меню Git или элемент управления Выбор репозитория в интегрированной среде разработки Visual Studio.
Ниже описывается порядок действий.
Клонирование репозитория и открытие проекта
В интегрированной среде разработки Visual Studio откройте меню Git и выберите Клонировать репозиторий.
Следуйте инструкциям на экране, чтобы подключиться к репозиторию Git, содержащему нужные файлы.
Открытие локальных папок и файлов
В интегрированной среде разработки Visual Studio откройте меню Git, выберите Локальные репозитории, а затем выберите Открыть локальный репозиторий.
Кроме того, можно выполнить ту же задачу в Обозревателе решений. Для этого выберите элемент управления Выбрать репозиторий, щелкните значок с многоточием рядом с полем Фильтровать репозитории, а затем выберите Открыть локальный репозиторий.
Следуйте инструкциям на экране, чтобы подключиться к репозиторию Git, содержащему нужные файлы.
Переход к репозиторию Azure DevOps
Ниже описано, как можно перейти к репозиторию Azure DevOps и клонировать его с помощью Visual Studio.
Запустите Visual Studio.
В начальном окне выберите раздел Клонировать репозиторий.
В разделе Просмотреть репозиторий выберите пункт Azure DevOps.
Следуйте инструкциям на экране, чтобы клонировать репозиторий Azure DevOps с нужными файлами, а затем откройте проект.
Открытие проекта из репозитория GitHub с помощью Visual Studio 2019
Способ открытия проектов из репозитория GitHub с помощью Visual Studio зависит от версии. В частности, если вы установили Visual Studio 2019 версии 16.8 или выше, вам доступны новые полностью интегрированные возможности Git.
Но вы всегда можете открыть проект из репозитория GitHub с помощью Visual Studio, какая бы версия у вас ни была.
Visual Studio 2019 версии 16.8 и более поздней
Ниже описано, как можно использовать Git в Visual Studio 2019 версии 16.8 или выше.
Клонирование репозитория GitHub, а затем открытие проекта
Запустите Visual Studio 2019.
В начальном окне выберите раздел Клонировать репозиторий.
Введите или укажите расположение репозитория, а затем нажмите кнопку Клонировать.
Возможно, появится диалоговое окно Сведения о пользователе Git с запросом на информацию для входа. Вы можете либо добавить сведения, либо изменить указанные сведения по умолчанию.
Нажмите кнопку Сохранить, чтобы добавить эту информацию в GITCONFIG-файл. (Или нажмите кнопку Отменить, чтобы сделать это позже.)
Дополнительные сведения о входе в Visual Studio см. на странице Вход в Visual Studio. Дополнительные сведения о том, как использовать учетную запись GitHub для входа, см. на странице Работа с учетными записями GitHub в Visual Studio.
Затем Visual Studio автоматически загрузит и откроет решение из репозитория.
Если репозиторий содержит несколько решений, они будут отображаться в обозревателе. Список решений можно просмотреть, нажав кнопку Переключить представления в обозревателе решений.
В обозревателе решений можно либо открыть корневую папку в представлении папки, либо выбрать файл решения, который следует открыть.
Чтобы сменить представление, нажмите кнопку Переключить представления еще раз.
Вы также можете использовать меню Git в интегрированной среде разработки Visual Studio, чтобы клонировать репозиторий и открыть проект.
Открытие локального проекта из репозитория GitHub, клонированного ранее
Откройте Visual Studio 2019 версии 16.8 или выше.
В начальном окне выберите Открыть проект или решение.
В Visual Studio откроется проводник. Найдите решение или проект и выберите его, чтобы открыть.
Если вы недавно открывали проект или решение, его можно быстро открыть снова из раздела Открыть последние.
Кроме того, можно использовать меню Git в интегрированной среде разработки Visual Studio, чтобы открывать локальные папки и файлы из репозитория, который ранее клонировали.
Теперь можно приступать к написанию кода.
Visual Studio 2019 версии 16.7 и более ранней
Ниже описано, как можно использовать Git в Visual Studio 2019 версии 16.7 или ниже.
Клонирование репозитория GitHub, а затем открытие проекта
Откройте Visual Studio 2019 версии 16.7 или ниже.
В начальном окне выберите Клонирование или извлечение кода.
Введите или укажите расположение репозитория, а затем нажмите кнопку Клонировать.
Visual Studio откроет проект из репозитория.
Если у вас есть файл решения, он будет отображаться в раскрывающемся меню «Решения и папки». Выберите его, и в Visual Studio откроется нужное решение.
Если в вашем репозитории нет файла решения (а именно SLN-файла), во всплывающем меню будет сообщение «Решения не найдены.». Но вы можете дважды щелкнуть любой файл в меню папок, чтобы открыть этот файл в редакторе кода Visual Studio.
Теперь можно приступать к написанию кода.
Переход к репозиторию Azure DevOps с помощью Visual Studio 2019
Сведения, отображаемые при переходе к репозиторию Azure DevOps и его клонировании с помощью Visual Studio 2019, зависят от установленной версии. В частности, если вы установили версию 16.8 или более позднюю, то уже получили новый полностью интегрированный интерфейс Git в Visual Studio.
Но независимо от установленной версии вы всегда можете перейти к репозиторию Azure DevOps и клонировать его с помощью Visual Studio.
Visual Studio 2019 версии 16.8 и более поздней
Откройте Visual Studio 2019 версии 16.8 или выше.
В начальном окне выберите раздел Клонировать репозиторий.
В разделе Просмотреть репозиторий выберите пункт Azure DevOps.
Если появится окно входа, войдите в свою учетную запись.
В диалоговом окне Подключение к проекту выберите репозиторий, с которым нужно установить соединение, а затем нажмите кнопку Клонировать.
Если вы не видите предварительно заполненный список репозиториев для подключения, выберите меню Добавление Azure DevOps Server, чтобы ввести URL-адрес сервера. (Кроме того, вы можете увидеть сообщение «Серверы не обнаружены.» со ссылками для добавления имеющегося сервера Azure DevOps Server или создания учетной записи Azure DevOps.)
Затем в Visual Studio откроется окно Обозреватель решений с папками и файлами.
Перейдите на вкладку Team Explorer, чтобы просмотреть действия Azure DevOps.
Visual Studio 2019 версии 16.7 и более ранней
Откройте Visual Studio 2019 версии 16.7 или ниже.
В начальном окне выберите Клонирование или извлечение кода.
В разделе Просмотреть репозиторий выберите пункт Azure DevOps.
Если появится окно входа, войдите в свою учетную запись.
В диалоговом окне Подключение к проекту выберите репозиторий, с которым нужно установить соединение, а затем нажмите кнопку Клонировать.
Содержимое этого списка зависит от того, какие репозитории Azure DevOps вам доступны.
Visual Studio открывает Team Explorer, и после завершения клонирования появится уведомление.
Чтобы просмотреть папки и файлы, нажмите ссылку Показать представление папки.
Visual Studio откроет обозреватель решений.
Нажмите ссылку Решения и папки, чтобы найти файл решения (SLN-файл), который нужно открыть.
Если в используемом репозитории нет файла решения, появится сообщение «Решения не найдены.». Но вы можете дважды щелкнуть любой файл в меню папок, чтобы открыть этот файл в редакторе кода Visual Studio.
Открытие проекта из репозитория GitHub с помощью Visual Studio 2017
Откройте Visual Studio 2017.
В верхней строке меню выберите Файл > Открыть > Открыть из системы управления версиями.
Откроется панель подключения к Team Explorer.
В разделе Локальные репозитории Git выберите меню Клонировать.
В поле с текстом Enter the URL of a Git repo to clone _ (Введите URL-адрес клонируемого репозитория Git) введите или вставьте URL-адрес нужного репозитория и нажмите клавишу _ВВОД. (Если появится запрос на вход в GitHub, выполните его.)
Завершив клонирование репозитория, Visual Studio закрывает Team Explorer и открывает обозреватель решений. Появится сообщение Click on Solutions and Folders above to view a list of Solutions (Щелкните выше «Решения и папки», чтобы просмотреть список решений). Щелкните Решения и папки.
Если у вас есть файл решения, он будет отображаться в раскрывающемся меню «Решения и папки». Выберите его, и Visual Studio откроет нужное решение.
Если в используемом репозитории нет файла решения (SLN-файла), раскрывающееся меню будет содержать текст No Solutions Found (Решение не найдено). Но вы можете дважды щелкнуть любой файл в меню папок, чтобы открыть этот файл в редакторе кода Visual Studio.
Проверка работы
Просмотрите следующую анимацию для проверки работы, выполненной в предыдущем разделе.
Открытие проекта из репозитория Azure DevOps с помощью Visual Studio 2017
Откройте Visual Studio 2017.
В верхней строке меню выберите Файл > Открыть > Открыть из системы управления версиями.
Откроется панель подключения к Team Explorer.
Ниже описаны два способа подключиться к репозиторию Azure DevOps.
В диалоговом окне Подключение к проекту выберите репозиторий, с которым нужно установить соединение, а затем нажмите кнопку Клонировать.
Содержимое этого списка зависит от того, какие репозитории Azure DevOps вам доступны.
Завершив клонирование репозитория, Visual Studio закрывает Team Explorer и открывает обозреватель решений. Появится сообщение Click on Solutions and Folders above to view a list of Solutions (Щелкните выше «Решения и папки», чтобы просмотреть список решений). Щелкните Решения и папки.
Файл решения (SLN-файл) будет отображаться в раскрывающемся меню «Решения и папки». Выберите его, и Visual Studio откроет нужное решение.
Если в используемом репозитории нет файла решения, раскрывающееся меню будет содержать текст No Solutions Found (Решение не найдено). Но вы можете дважды щелкнуть любой файл в меню папок, чтобы открыть этот файл в редакторе кода Visual Studio.
Дальнейшие действия
Вы можете перейти к любому из следующих руководств, посвященных разным языкам: