A1.2 Приложение A: Git в других окружениях — Git в Visual Studio
Начиная с Visual Studio 2013 Update 1, пользователям Visual Studio доступен Git-клиент, встроенный непосредственно в IDE. Visual Studio уже в течение достаточно долгого времени имеет встроенные функции управления исходным кодом, но они были ориентированы на централизованные системы с блокировкой файлов, и Git не очень хорошо вписывался в такой рабочей процесс. Поддержка Git в Visual Studio 2013 была существенно переработана по сравнению со старой версией, и в результате удалось добиться лучшей интеграции Visual Studio и Git.
Чтобы воспользоваться этой функциональностью, откройте проект, который управляется Git (или выполните git init для существующего проекта) и выберите пункты View (Вид) > Team Explorer (Командный обозреватель) в главном меню. В результате откроется окно «Connect» («Подключить»), которое выглядит примерно вот так:
Visual Studio запоминает все проекты, управляемые с помощью Git, которые Вы открыли, и они доступны в списке в нижней части окна. Если в списке нет проекта, который вам нужен, нажмите кнопку «Add» («Добавить») и укажите путь к рабочему каталогу. Двойной клик по одному из локальных Git-репозиториев откроет главную страницу репозитория, которая выглядит примерно так «Домашняя» страница Git-репозитория в Visual Studio.
Это центр управления Git; когда вы пишете код, вы, вероятно, проводите большую часть своего времени на странице «Changes» («Изменения»), но когда приходит время получать изменения, сделанные вашими коллегами по работе, вам необходимо использовать страницы «Unsynced Commits» («Несинхронизированные коммиты») и «Branches» («Ветки»).
Использование интеграции Git в Visual Studio Code
Редактор Visual Studio Code (VS Code) стал одним из самых популярных для веб-разработки. Его популярность обусловлена множеством встроенных возможностей, в том числе интеграции с системой контроля исходного кода, а именно с Git. Использование возможностей Git из VS Code позволяет сделать рабочие процессы более эффективными и надежными.
В этом учебном модуле мы изучим интеграцию контроля исходного кода в VS с помощью Git.
Предварительные требования
Для этого обучающего модуля вам потребуется следующее:
- Git, установленный на вашем компьютере. Более подробную информацию о том, как добиться этого, можно найти в учебном модуле Введение в Git.
- Последняя версия Visual Studio Code, установленная на вашем компьютере.
Шаг 1 — Знакомство с вкладкой Source Control
Прежде всего, чтобы воспользоваться преимуществами интеграции контроля исходного кода, следует инициализировать проект как репозиторий Git.
Откройте Visual Studio Code и запустите встроенный терминал. Вы можете открыть его, используя сочетание клавиш CTRL + ` в Linux, macOS или Windows.
Используя терминал, создайте каталог для нового проекта и перейдите в этот каталог:
Затем создайте репозиторий Git:
Также вы можете сделать это в Visual Studio Code, открыв вкладку Source Control (иконка выглядит как развилка дороги) в левой панели:
Затем нажмите кнопку Open Folder:
При нажатии кнопки откроется проводник файлов, где будет открыт текущий каталог. Выберите предпочитаемый каталог проекта и нажмите Open.
Затем нажмите Initialize Repository:
Если теперь вы посмотрите на свою файловую систему, вы увидите, что она содержит каталог .git . Чтобы сделать это, используйте терминал для перехода в каталог проекта и вывода его содержимого:
Вы увидите созданный каталог .git :
Это означает, что репозиторий инициализирован, и теперь вам следует добавить в него файл index.html .
После этого на панели Source Control вы увидите, что рядом с именем вашего нового файла отображается буква U. Обозначение U означает, что файл не отслеживается, то есть, что это новый или измененный файл, который еще не был добавлен в репозиторий:
Вы можете нажать значок плюс (+) рядом с файлом index.html , чтобы включить отслеживание файла в репозитории.
После этого рядом с файлом появится буква A. A обозначает новый файл, который был добавлен в репозиторий.
Чтобы записать изменения, введите команду отправки в поле ввода в верхней части панели Source Control. Затем нажмите иконку отметки check для отправки файла в репозиторий.
После этого вы увидите, что несохраненных изменений нет.
Теперь добавьте немного содержания в файл index.html .
Вы можете использовать ярлык Emmet для генерирования базовой структуры кода HTML5 в VS Code, нажав ! , а затем клавишу Tab . Теперь добавьте что-нибудь в раздел <body> , например, заголовок <h1> , и сохраните файл.
На панели исходного кода вы увидите, что ваш файл изменился. Рядом с именем файла появится буква M, означающая, что файл изменен:
Для практики давайте запишем это изменение в репозиторий.
Теперь вы познакомились с работой через панель контроля исходного кода, и мы переходим к интерпретации показателей gutter.
Шаг 2 — Интерпретация показателей Gutter
На этом шаге мы рассмотрим концепцию Gutter («Желоб») в VS Code. Gutter — это небольшая область справа от номера строки.
Если ранее вы использовали сворачивание кода, то в области Gutter находятся иконки «Свернуть» и «Развернуть».
Для начала внесем небольшое изменение в файл index.html , например, изменим содержание внутри тега <h1> . После этого вы увидите, что измененная строка помечена в области Gutter синей вертикальной чертой. Синяя вертикальная черта означает, что соответствующая строка кода была изменена.
Теперь попробуйте удалить строку кода. Вы можете удалить одну из строк в разделе <body> вашего файла index.html . Обратите внимание, что в области Gutter появился красный треугольник. Красный треугольник означает строку или группу строк, которые были удалены.
Теперь добавьте новую строку в конец раздела <body> и обратите внимание на зеленую полосу. Вертикальная зеленая полоса обозначает добавленную строку кода.
В этом примере описаны индикаторы области Gutter для случаев изменения, удаления и добавления строки:
Шаг 3 — Просмотр отличий файлов
VS Code также позволяет посмотреть отличия между разными версиями файла. Обычно для этого нужно загружать отдельный инструмент diff, так что встроенная функция повысит эффективность работы.
Чтобы посмотреть отличия, откройте панель контроля исходного кода и дважды нажмите на измененный файл. В этом случае следует дважды нажать на файл index.html . Откроется типовое окно сравнения, где текущая версия файла отображается слева, а ранее сохраненная в репозитории версия — справа.
В этом примере мы видим, что в текущей версии добавлена строка:
Шаг 4 — Работа с ветвлением
Вы можете использовать нижнюю панель для создания и переключения ветвей кода. В нижней левой части редактора отображается иконка контроля исходного кода (которая выглядит как дорожная развилка), после которой обычно идет имя главной ветви или ветви, над которой вы сейчас работаете.
Чтобы создать ветвление, нажмите на имя ветви. Откроется меню, где вы сможете создать новую ветвь:
Создайте новую ветвь с именем test .
Теперь внесите изменение в файл index.html , чтобы перейти в новую ветвь test , например, добавьте текст this is the new test branch .
Сохраните эти изменения ветви test в репозитории. Затем нажмите на имя ветви в левом нижнем углу еще раз, чтобы переключиться обратно на главную ветвь master .
После переключения обратно на ветвь master вы увидите, что текст this is the new test branch , сохраненный для ветви test , отсутствует в главной ветви.
Шаг 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 предоставляет множество функций, для использования которых раньше нужно было загружать отдельный инструмент.
Интерфейс GIT в Visual Studio
Git является интерфейсом системы управления версиями по умолчанию в Visual Studio. Мы продолжаем расширять набор возможностей Git, постоянно анализируя результаты и учитывая ваши отзывы. Дополнительные сведения о недавно обновленных компонентах и ссылки на опрос, через который вы можете оставить свой отзыв, см. в записи блога, посвященной поддержке нескольких репозиториев в Visual Studio.
Теперь GIT является интерфейсом системы управления версиями по умолчанию в Visual Studio 2019. Начиная с версии 16.6 мы работаем над созданием набора функций на основе ваших отзывов. В версии 16.8 Git стал интерфейсом управления версиями по умолчанию для всех.
Мы продолжаем расширять набор возможностей Git в Visual Studio 2022. Дополнительные сведения о последнем обновлении компонентов см. в записи блога Поддержка нескольких репозиториев в Visual Studio.
Дополнительные сведения о Git
Git — это наиболее широко используемая современная система управления версиями, которая может быть полезна как профессиональным разработчикам, так и только начинающим изучать программирование. Если вы новичок в Git, вы можете начать с сайта https://git-scm.com/. Там вы найдете памятки, популярную электронную книгу и видеоматериалы по основам Git.
Использование GIT в Visual Studio
Мы подробно расскажем вам о том, как использовать новый интерфейс Git в Visual Studio. Однако если вы хотите сначала ознакомиться с кратким обзором, посмотрите следующее видео:
Длительность видео: 05:27 мин.
Существует три способа начать использование Git в Visual Studio для повышения производительности:
- . Если ваш код не связан с GIT, можно создать новый репозиторий GIT. . Если код, с которым вы хотите работать, не находится на вашем компьютере, можно клонировать любые существующие удаленные репозитории. . Если у вас уже есть код на компьютере, его можно открыть с помощью пункта меню Файл > Открыть > Решение/проект (или Папка). Visual Studio автоматически определяет, имеется ли инициализированный репозиторий GIT.
Начиная с версии 16.8 Visual Studio 2019 включает полностью интегрированный интерфейс для работы с учетными записями GitHub. Теперь вы можете добавить в цепочку ключей учетные записи GitHub и GitHub Enterprise. Вы сможете добавлять и использовать их так же, как и учетные записи Майкрософт. Это позволит упростить доступ к ресурсам GitHub в Visual Studio. Дополнительные сведения см. на странице Работа с учетными записями GitHub в Visual Studio.
Visual Studio включает полностью интегрированную учетную запись GitHub. Вы не только можете добавить учетные записи GitHub и GitHub Enterprise в цепочку ключей, но и использовать их так же, как учетные записи Майкрософт. Дополнительные сведения см. на странице Работа с учетными записями GitHub в Visual Studio.
Создание репозитория GIT
Если ваш код не связан с GIT, можно начать с создания нового репозитория GIT. Подробные сведения см. в разделе Создание репозитория в Visual Studio.
Если ваш код не связан с GIT, можно начать с создания нового репозитория GIT. Для этого в строке меню выберите GIT > Создать репозиторий GIT. Затем в диалоговом окне Создание репозитория GIT введите свои данные.
С помощью диалогового окна Создание репозитория GIT можно легко отправить новый репозиторий в GitHub. По умолчанию новый репозиторий является частным. Это означает, что доступ к нему есть только у вас. Если снять соответствующий флажок, репозиторий будет общедоступным. Это означает, что любой пользователь в GitHub сможет его просмотреть.
Независимо от того, является ли репозиторий общедоступным или частным, лучше создать удаленную резервную копию кода, которая будет безопасно храниться в GitHub, даже если вы работаете сами по себе. Это также позволит вам получать доступ к коду с любого компьютера.
Вы можете создать исключительно локальный репозиторий GIT, выбрав параметр Только локальный. Вы также можете связать локальный проект с любым существующим пустым удаленным репозиторием, размещенным в Azure DevOps или у любого другого поставщика Git, с помощью параметра Существующий удаленный репозиторий.
Клонирование существующего репозитория GIT
В Visual Studio процесс клонирования прост. Пошаговые инструкции см. в разделе Клонирование репозитория в Visual Studio.
В Visual Studio процесс клонирования прост. Если вы знаете URL-адрес репозитория, который нужно клонировать, можно вставить его в разделе Расположение репозитория, а затем выбрать место на диске, в которое будет клонирован репозиторий.
Если вы не знаете URL-адрес репозитория, в Visual Studio можно легко перейти к существующему репозиторию GitHub или Azure DevOps и выбрать его.
Открытие существующего локального репозитория
После клонирования или создания репозитория GIT Visual Studio обнаружит его и добавит в список Локальные репозитории в меню GIT.
В нем можно быстро открывать репозитории GIT и переключаться между ними.
Просмотр файлов в обозревателе решений
При клонировании репозитория или открытии локального репозитория Visual Studio переключается в этот контекст GIT, сохраняя и закрывая все ранее открытые решения и проекты. Обозреватель решений загружает папку в корне репозитория Git и проверяет дерево каталогов на наличие просматриваемых файлов. К ним относятся такие файлы, как CMakeLists.txt или файлы с расширением SLN.
Visual Studio настраивает представление в зависимости от файла, загруженного в обозреватель решений:
- При клонировании репозитория, содержащего один SLN-файл, обозреватель решений напрямую загружает это решение.
- Если обозреватель решений не обнаруживает файлов SLN в репозитории, по умолчанию он загружает представление папки.
- Если репозиторий содержит несколько файлов SLN, то обозреватель решений выводит список доступных представлений для выбора.
Переключаться между текущим представлением и списком представлений можно с помощью кнопки Переключить представления на панели инструментов обозревателя решений.
Окно "Изменения GIT"
GIT отслеживает изменения файлов в репозитории в процессе работы и разделяет файлы на три категории. Это те же изменения, которые отображаются при вводе команды git status в командной строке.
- Файлы без изменений: эти файлы не были изменены с момента последней фиксации.
- Измененные файлы: эти файлы изменились с момента последней фиксации, но еще не были подготовлены для следующей фиксации.
- Промежуточные файлы: эти файлы содержат изменения, которые будут добавлены в следующую фиксацию.
В процессе работы Visual Studio отслеживает изменения в файлах проекта в разделе Изменения окна Изменения GIT.
Когда вы будете готовы подготовить изменения, нажмите кнопку + (плюс) для каждого из файлов, которые необходимо подготовить, или щелкните файл правой кнопкой мыши и выберите пункт Промежуточно сохранить. Можно также подготовить все измененные файлы одним щелчком мыши, используя кнопку "Промежуточно сохранить все" ( + ) в верхней части раздела Изменения.
При подготовке изменения Visual Studio создает раздел Подготовленные изменения. Только изменения из раздела Подготовленные изменения добавляются к следующей фиксации, которую можно выполнить, выбрав команду Зафиксировать промежуточные. Эквивалентная команда для этого действия — git commit -m "Your commit message" . Можно также отменить подготовку изменений, нажав кнопку – (минус). Эквивалентная команда для этого действия — git reset <file_path> для отмены размещения одного файла или git reset <directory_path> для отмены размещения всех файлов в каталоге.
Кроме того, можно отказаться от подготовки измененных файлов, пропустив область подготовки. В этом случае Visual Studio позволяет зафиксировать изменения напрямую без предварительной подготовки. Просто введите сообщение о фиксации и выберите Зафиксировать все. Эквивалентная команда для этого действия — git commit -a .
Visual Studio также позволяет выполнить фиксацию и синхронизацию одним щелчком мыши с помощью ярлыков Зафиксировать все и отправить и Зафиксировать все и синхронизировать. Если дважды щелкнуть любой файл в разделе Изменения или Подготовленные изменения, то можно построчно сравнить измененную версию файла с неизмененной.
Если вы подключены к репозиторию Azure DevOps, вы можете связать рабочий элемент Azure DevOps с фиксацией, используя символ #.
Если вы подключены к репозиторию Azure DevOps, вы можете связать рабочий элемент Azure DevOps с фиксацией, используя символ #. Чтобы подключить репозиторий Azure DevOps, выберите Team Explorer > Управление подключениями.
Выбор существующей ветви
В Visual Studio текущая ветвь отображается в селекторе в верхней части окна Изменения GIT.
Текущая ветвь также доступна в строке состояния в правом нижнем углу интегрированной среды разработки Visual Studio.
В обоих местах можно переключаться между имеющимися ветвями.
Создание ветви
Можно также создать новую ветвь. Эквивалентная команда для этого действия — git checkout -b <branchname> .
Чтобы создать ветвь, достаточно ввести ее имя и указать существующую ветвь, на основе которой будет создана данная.
В качестве базовой можно выбрать существующую локальную или удаленную ветвь. Если флажок Извлечь ветвь установлен, вы автоматически переключитесь на новую ветвь после ее создания. Эквивалентная команда для этого действия — git checkout -b <new-branch><existing-branch> .
Окно "Репозиторий GIT"
В Visual Studio имеется новое окно Репозиторий GIT, в котором представлены все сведения о репозитории, включая все ветви, удаленные репозитории и журналы фиксации. Открыть это окно можно из меню GIT или Вид либо непосредственно из строки состояния.
Управление ветвями
При выборе в меню GIT пункта Управление ветвями отображается древовидное представление ветвей в окне Репозиторий GIT. В левой области можно использовать контекстное меню для извлечения, создания, объединения ветвей, перемещения изменений из одной ветви в другую, отбора изменений и других действий. Щелкнув ветвь, можно просмотреть ее журнал фиксаций в правой области.
Входящие и исходящие фиксации
При принесении ветви в окне Изменения GIT под раскрывающемся списком ветвей отображается индикатор, который показывает количество фиксаций, которые не были вытянуты из удаленной ветви. Он также показывает число локальных фиксаций, которые не были отправлены.
Индикатор также является ссылкой, по которой можно перейти к журналу фиксаций этой ветви в окне Репозиторий GIT. В начале журнала теперь отображаются сведения об этих входящих и исходящих фиксациях. Здесь можно также вытянуть или отправить фиксации.
Сведения о фиксации
Если дважды щелкнуть фиксацию, в Visual Studio откроются сведения о ней в отдельном окне инструментов. Здесь можно отменить фиксацию, сбросить ее, исправить сообщение о фиксации или создать тег для нее. Если щелкнуть измененный файл в фиксации, в Visual Studio откроется инструмент сравнения, в котором рядом друг с другом показаны фиксация и ее предок.
Разрешение конфликтов слияния
Во время слияния могут возникать конфликты, если два разработчика изменяют одни и те же строки в файле и GIT неизвестно, какой вариант правильный. В этом случае GIT прерывает слияние и сообщает о конфликтном состоянии.
Дополнительные сведения о конфликтах слияния и способах их обработки см. на странице Устранение конфликтов слияния.
В Visual Studio можно легко выявлять и устранять конфликты слияния. Во-первых, в верхней части окна Репозиторий GIT имеется золотистая информационная панель.
В окне Изменения GIT также выводится сообщение Слияние выполняется с конфликтами, под которым в отдельном разделе указываются файлы, слияние которых не было выполнено.
Но если ни одно из этих окон не открыто и вы переходите к файлу с конфликтами слияния, вам не придется искать следующий текст:
Вместо этого в верхней части страницы в Visual Studio отображается золотистая информационная панель с сообщением о наличии конфликтов в открытом файле. Щелкните ссылку, чтобы открыть редактор слияния.
Редактор слияния
Редактор слияния в Visual Studio позволяет выполнять трехстороннее сравнение: в нем приводятся входящие изменения, текущие изменения и результат слияния. С помощью панели инструментов вверху редактора слияния можно переходить между конфликтами и просматривать результаты автоматического слияния в файле.
Можно также использовать переключатели для отображения и скрытия различий, отображения и скрытия различий в словах и настройки макета. Вверху с каждой стороны есть флажки, с помощью которых можно перенести все изменения с одной стороны на другую. Чтобы перенести отдельные изменения, можно установить флажки слева от конфликтующих строк с любой стороны. Завершив разрешение конфликтов, нажмите в редакторе слияния кнопку Принять слияние. После этого нужно ввести сообщение о фиксации и зафиксировать изменения, чтобы завершить процесс разрешения.
Настройка параметров GIT
Чтобы настроить параметры GIT на уровне репозитория, а также на глобальном уровне, выберите в строке меню пункты GIT > Параметры или Сервис > Параметры > Управление исходным кодом. Затем выберите нужные параметры.
Использование всех возможностей Team Explorer в Visual Studio
Новый интерфейс GIT — это система контроля версий по умолчанию в Visual Studio 2019 начиная с версии 16.8. Однако при желании этот интерфейс можно отключить. Чтобы вернуться в Team Explorer для Git, выберите Средства > Параметры > Среда > Функции предварительной версии и снимите флажок Новый пользовательский интерфейс Git.
Что дальше?
Хотя новый интерфейс Git теперь включен по умолчанию в Visual Studio 2019 начиная с версии 16.8, мы продолжаем добавлять новые функции для его совершенствования. Чтобы ознакомиться с новыми обновлениями интерфейса Git в предварительном выпуске, скачайте и установите его со страницы Visual Studio 2022, предварительная версия.
Мы продолжаем добавлять новые функции для расширения возможностей Git в Visual Studio. Дополнительные сведения о недавно обновленных компонентах и ссылки на опрос, через который вы можете оставить свой отзыв, см. в записи блога, посвященной поддержке нескольких репозиториев в Visual Studio.
Если у вас есть предложение, отправьте его нам. Мы будем рады вашему участию в работе над решением на портале Сообщества разработчиков.