Tutorial

Использование интеграции Git в Visual Studio Code

Published on November 13, 2020

Русский

Использование интеграции 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.

Используя терминал, создайте каталог для нового проекта и перейдите в этот каталог:

mkdir git_test
cd git_test

Затем создайте репозиторий Git:

git init

Также вы можете сделать это в Visual Studio Code, открыв вкладку Source Control (иконка выглядит как развилка дороги) в левой панели:

Иконка Source Control

Затем нажмите кнопку Open Folder:

Снимок экрана с кнопкой Open Folder

При нажатии кнопки откроется проводник файлов, где будет открыт текущий каталог. Выберите предпочитаемый каталог проекта и нажмите Open.

Затем нажмите Initialize Repository:

Снимок экрана с кнопкой инициализации репозитория Initialize Repository

Если теперь вы посмотрите на свою файловую систему, вы увидите, что она содержит каталог .git. Чтобы сделать это, используйте терминал для перехода в каталог проекта и вывода его содержимого:

ls -la

Вы увидите созданный каталог .git:

Output.
..
.git

Это означает, что репозиторий инициализирован, и теперь вам следует добавить в него файл index.html.

После этого на панели Source Control вы увидите, что рядом с именем вашего нового файла отображается буква U. Обозначение U означает, что файл не отслеживается, то есть, что это новый или измененный файл, который еще не был добавлен в репозиторий:

Снимок экрана с изображением неотслеживаемого файла, обозначенного буквой U

Вы можете нажать значок плюс (+) рядом с файлом index.html, чтобы включить отслеживание файла в репозитории.

После этого рядом с файлом появится буква A. A обозначает новый файл, который был добавлен в репозиторий.

Чтобы записать изменения, введите команду отправки в поле ввода в верхней части панели Source Control. Затем нажмите иконку отметки check для отправки файла в репозиторий.

Снимок экрана с изображением добавленного файла, помеченного буквой A, и команды отправки

После этого вы увидите, что несохраненных изменений нет.

Теперь добавьте немного содержания в файл index.html.

Вы можете использовать ярлык Emmet для генерирования базовой структуры кода HTML5 в VS Code, нажав !, а затем клавишу Tab. Теперь добавьте что-нибудь в раздел <body>, например, заголовок <h1>, и сохраните файл.

На панели исходного кода вы увидите, что ваш файл изменился. Рядом с именем файла появится буква M, означающая, что файл изменен:

Снимок измененного файла, обозначенного буквой M

Для практики давайте запишем это изменение в репозиторий.

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

Шаг 2 — Интерпретация показателей Gutter

На этом шаге мы рассмотрим концепцию Gutter («Желоб») в VS Code. Gutter — это небольшая область справа от номера строки.

Если ранее вы использовали сворачивание кода, то в области Gutter находятся иконки «Свернуть» и «Развернуть».

Для начала внесем небольшое изменение в файл index.html, например, изменим содержание внутри тега <h1>. После этого вы увидите, что измененная строка помечена в области Gutter синей вертикальной чертой. Синяя вертикальная черта означает, что соответствующая строка кода была изменена.

Теперь попробуйте удалить строку кода. Вы можете удалить одну из строк в разделе <body> вашего файла index.html. Обратите внимание, что в области Gutter появился красный треугольник. Красный треугольник означает строку или группу строк, которые были удалены.

Теперь добавьте новую строку в конец раздела <body> и обратите внимание на зеленую полосу. Вертикальная зеленая полоса обозначает добавленную строку кода.

В этом примере описаны индикаторы области Gutter для случаев изменения, удаления и добавления строки:

Снимок экрана с примерами трех индикаторов области Gutter

Шаг 3 — Просмотр отличий файлов

VS Code также позволяет посмотреть отличия между разными версиями файла. Обычно для этого нужно загружать отдельный инструмент diff, так что встроенная функция повысит эффективность работы.

Чтобы посмотреть отличия, откройте панель контроля исходного кода и дважды нажмите на измененный файл. В этом случае следует дважды нажать на файл index.html. Откроется типовое окно сравнения, где текущая версия файла отображается слева, а ранее сохраненная в репозитории версия — справа.

В этом примере мы видим, что в текущей версии добавлена строка:

Снимок разделенного экрана для сравнения версий

Шаг 4 — Работа с ветвлением

Вы можете использовать нижнюю панель для создания и переключения ветвей кода. В нижней левой части редактора отображается иконка контроля исходного кода (которая выглядит как дорожная развилка), после которой обычно идет имя главной ветви или ветви, над которой вы сейчас работаете.

Индикатор ветви в нижней панели VS Code с именем: master

Чтобы создать ветвление, нажмите на имя ветви. Откроется меню, где вы сможете создать новую ветвь:

Диалог создания новой ветви

Создайте новую ветвь с именем 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 Blame на нижней панели инструментов

Git History

Хотя вы можете просматривать текущие изменения, сравнивать версии и управлять ветвлением с помощью встроенных функций VS Code, они не дают возможности просматривать историю Git. Расширение Git History решает эту проблему.

Как можно увидеть на снимке ниже, это расширение позволяет тщательно изучать историю файла, автора, ветви и т. д. Чтобы активировать показанное ниже окно Git History, нажмите на файл правой кнопкой мыши и выберите пункт Git: View File History:

Результаты работы расширения Git History

Также вы сможете сравнивать ветви и записанные в репозиторий версии, создавать ветви из записанных версий и т. д.

Git Lens

GitLens дополняет возможности Git, встроенные в Visual Studio Code. Это расширение помогает визуализировать принадлежность кода через аннотации Git Blame и линзу кода, просматривать и изучать репозитории Git из среды VS Code, получать полезные аналитические данные с помощью мощных команд сравнения, а также выполнять многие другие задачи.

Расширение Git Lens — одно из самых мощных и популярных среди сообщества разработчиков расширений. В большинстве случаев его функции могут заменить каждое из вышеперечисленных двух расширений.

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

Функционал Git Blame в Git Lens

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

При этом откроется следующее окно:

Функционал Git History в Git Lens

Это расширение имеет очень много функций, и потребуется время, чтобы разобраться со всеми открываемыми им возможностями.

Заключение

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

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors