Git в Visual Studio Code
Редактор кода VS Code (Visual Studio Code) считается наиболее известной платформой для веб-разработчиков. Его востребованность объясняется широким встроенным функционалом. Например, в перечень возможностей входит взаимодействие с сервисами контроля кода. Применение Git из Visual Studio Code заметно упрощает процессы редактирования кода, повышает эффективность и надежность процесса разработки.
Требования к системе
Все, что понадобится для функционирования платформы – это актуальный релиз Visual Studio Code и пакета Git. В качестве тестовой базы можно выбрать как локальный компьютер с системой Linux, macOS, Windows любой версии. Теоретически можно использовать и виртуальную машину VPS/VDS с Windows, арендованную у облачного провайдера timeweb.cloud, но работа через графический интерфейс Windows Server будет, конечно, менее удобной.
Шаг 1. Знакомимся с вкладкой Source Control
Прежде чем начинать работу с Git и изучать его преимущества в плане контроля исходного кода, необходимо произвести инициализацию проекта в качестве репозитория. Процедура требует предварительного запуска самого редактора VS Code. После этого уже в нем необходимо запустить интегрированный терминал. В этом поможет комбинация клавиш <CTRL и +>.
В нем сделаем папку под новую задачу и сразу перейдем в нее:
mkdir git_test
cd git_testТеперь очередь репозитория Git:
git init
Те же настройки Git возможны в интерфейсе Visual Studio Code. Следует открыть окно Source Control слева на панели (иконка похожа на развилку дороги) и там нажать Open Folder.
При клике на нее система откроет менеджер файлов с открытой по умолчанию текущей папкой. Если предпочтительна другая папка, ее можно выбрать нажатием Open и следом Initialize Repository.
После инициализации в файловой системе накопителя появится каталог .git. Просмотр доступен по команде, введенной в терминале:
ls –laРезультат просмотра будет выглядеть так:
...git
Содержимое экрана указывает на то, что инициализация репозитория была осуществлена, и теперь туда требуется внести файл index.html. После создания «индекса» в панели Source Control рядом с его наименованием будет находиться буква U. Она показывает «не отслеживаемые файлы», в эту категорию попадают все только что созданные или скорректированные файлы, не перенесенные в архив репозитория.
Чтобы добавить объект туда, достаточно кликнуть на значок «плюс», расположенный рядом с созданным index.html.
Смена статуса отслеживается по появлению буквы A – она показывает, что Visual Studio и Git стартовали «совместную работу». Запись изменений сработает после команды на отправку, она расположена внутри поле ввода сверху на панели Source Control. Остается кликнуть на галочку и убедиться, что несохраненные изменения отсутствуют.
Ради мониторинга работы системы сделаем изменения в файле index.html. Например, создадим в нем раздел <body>, а внутри заголовок уровня <h1> (содержимое любое). После сохранения рядом с наименованием файла появится буква M.
Она указывается на различие копии, хранящейся в Git и на «локальном носителе». Если пользователь считает внесенные корректировки правильными, их можно отправить в репозиторий при помощи той же иконки с галочкой (контроль по наличию буквы A).
Вот мы вкратце и ознакомились, как работать с Git на платформе VS Code. Теперь рассмотрим варианты интерпретации показателей Gutter.
Шаг 2. Интерпретация показателей Gutter
И начнем с определения, что же представляет собой концепция Gutter («желоб») в программном обеспечении Visual Studio Code. Формально – это всего лишь некая область, расположенная справа от номера строки. В ней расположены иконки «Свернуть» и «Развернуть», необходимые для того, чтобы при редактировании была возможность сворачивать код и разворачивать его. Есть и другой функционал.
Так, при внесении изменений, например, внутри тега <h1> можно увидеть, что строку с новыми данными система пометила синей вертикальной чертой (в области Gutter). Такое будет происходить со всеми ранее созданными строчками, куда пользователь вносил новый код.
Схожим образом программа помечает удаление строк или их части. Для проверки удалим любое содержимое раздела <body> и в результате увидим красный треугольник, появившийся все в той же области Gutter. Тем же знаком будет помечена и группа строк, например, если вырезали целый кусок кода, состоящего из нескольких строчек.
При добавлении совершенно новой строки, а не редактировании существующей, программа отображает вертикальную зеленую полосу, и этот индикатор снова расположен в области Gutter. Благодаря такому подходу разработчик видит визуально отделенные друг от друга части прежнего кода, где нет никаких изменений и нововведений, которые он только что внес сам. Перед сохранением файла легко перепроверить корректировки, чтобы убедиться в отсутствии ошибок.
Шаг 3. Просмотр отличий файлов
Инструмент VS Code помогает быстро сравнивать две версии файла. Например, если была задача отредактировать index.html и заказчику требуется убедиться во внесении изменений исполнителем. Конечно, можно воспользоваться утилитой сравнения файлов diff, но удобнее работать встроенным функционалом программы.
Всего-то достаточно открыть панель контроля кода и пару раз кликнуть по скорректированному ранее объекту (пусть остается index.html). Система автоматически откроет окошко для сравнения, в нем последняя версия кода отобразится слава, а до этого перенесенная в репозиторий – справа. «Нестыковки» будут помечены зеленым цветом при наличии кода в строке и серым при его отсутствии.
Шаг 4. Работа с ветвлением
Программное обеспечение VS Code поддерживает редактуру с ветвлением кода. Название текущей ветки отображается снизу левой части окна редактора, рядом с иконкой контроля исходного кода («дорожная развилка»). По умолчанию программа показывает главную ветку. Чтобы сделать ответвление от нее, нужно нажать на ее наименование и в открывшемся меню выбрать Create new branch. Например, создадим тестовую ветку под названием test.
После сохранения внесем какие-либо изменения в файл index.html. Появится возможность перехода в главную ветку master и обратно в test (слева в нижнем углу экрана редактирования). Если перейти на основную ветку, будет видно, что внесенный в ответвлении текст отсутствует в коде, как и положено. Чтобы сохранить корректировки, объект выгружают в репозиторий и проверяют его текущий статус (должна отображаться буква A).
Шаг 5. Поддержка удаленных репозиториев
В функционал панели Source Control входит поддержка удаленных репозиториев. В рамках данной статьи углубляться в эту тему мы не будем. Но знать о такой возможности нужно, особенно тем, кто уже имел опыт работы с pull, sync, publish и другими подобными репозиториями. Здесь же продолжим разбираться, как работать с Git.
Шаг 6. Установка модулей расширений
Встроенные функции Virtual Studio Code легко дополнить загружаемыми расширениями. Подобный шаг превращает продукт в универсальный, гибкий инструмент для создания практически любых веб-решений. Приведем примеры нескольких популярных модулей.
Git Blame
Расширение предназначено для сохранения-отображения информации об исполнителе. Это удобно, когда один код редактируют несколько человек, например, на разных этапах реализации проекта или при смене ответственных сотрудников. В панели Git Blame пользователь видит идентификатор «виновника» по каждой из выделенных строк. Плюс там же отображена дата и время внесения всех корректировок, какие вообще совершались с конкретным участком кода.
Git History
Модуль дополняет встроенный функционал по сравнению версий, управлению ветвлением за счет внедрения просмотра истории Git прямо в программе Visual Code. В перечне данных отображается список авторов, отдельных ветвей и пр. Чтобы открыть просмотр истории, достаточно кликнуть по объекту правой кнопкой мышки и в выпадающем меню зайти в раздел Git: View File History.
Git Lens
Расширение Git Lens предназначено для визуализации принадлежности участков кода при помощи внесения аннотаций. Разработчик может просматривать информацию прямо из среды Visual Studio Code, закрепленную к файлам в репозитории Git. Такой вариант комментирования подходит, если проектом занимается целая команда и к работе привлекают сторонних специалистов.
Модуль Git Lens свободно заменит два предыдущих. Данные о последних изменениях и их авторе отображаются справа от редактируемой строки. Там же указано, сохранены ли эти корректировки в репозитории или еще нет. При наведении мышки на блок служебной информации система выдаст всплывающее окно с более подробными данными.
Выводы
Подведем итоги. Редактор кода Visual Studio Code представляет собой мощный веб-инструмент для разработки сайтов и других онлайн-продуктов. Даже встроенного функционала достаточно, чтобы без проблем создавать новые проекты, дорабатывать старые, подключать к работе дополнительных людей. Если же его недостаточно, система поддерживает загрузку расширений, которые внедряют новые функции, иногда замещающие стандартные или добавляющие к ним новые фишки.