Использование GitHub в Visual Studio Code
Узнайте, как использовать возможности интеграции GitHub в Visual Studio Code, включая аутентификацию, публикацию репозиториев и просмотр временной шкалы репозитория.
Цели обучения
В этом модуле вы узнаете, как выполнять следующие задачи:
- Выполнение входа в GitHub с помощью Visual Studio Code.
- Поиск репозиториев в GitHub с помощью Visual Studio Code.
- Клонирование репозитория из Visual Studio Code.
- Публикация локального проекта в GitHub с помощью Visual Studio Code.
- Просмотр временной шкалы действий в репозитории GitHub.
Предварительные требования
- Учетная запись GitHub
- Базовые знания о концепциях Git, таких как репозитории и клонирование
- Visual Studio Code
Как подключить Git к Visual Studio Code
Git – это система управления версиями, которая используется для отслеживания изменений в проектах различных типов и размеров. Git позволяет вести историю редактирования кодов в проекте, сохраняя их в репозитории. Участники проекта могут работать с файлами и объединять свои результаты вместе в рамках одного репозитория.
Visual Studio Code (VS Code) – это бесплатный и открытый редактор кода, который был разработан Microsoft. Он подходит для различных языков программирования (JavaScript, TypeScript, Python , PHP , Java, C++, Go, Ruby, Kotlin) и доступен для использования на Windows, MacOS и Linux.
Редактор кода Visual Studio Code включает в себя широкий набор функций, который делают его удобным и популярным для разработки ПО. Он предоставляет доступ к инструменту управления версиями Git и легко интегрируется с ним.
Кроме того, VS Code имеет расширяемую архитектуру, которая позволяет разработчикам создавать дополнения и плагины, для роста числа функций и увеличения возможностей редактора. Используя расширения, разработчики могут настроить свою среду разработки, исходя из потребностей и использовать VS Code для широкого спектра задач, например, разработка приложений для ПК и мобильных телефонов, создание игр и другое.
Использование возможностей Git из VS Code
Visual Studio Code позволяет использовать возможности Git напрямую из редактора кода. Рассмотрим наиболее популярные функции Git в VS Code:
- Инициализация Git-репозитория. Это делается из меню команд или панели команд (клавиша F1), или через командную строку integrated terminal. После вы можете начать работу с Git и управлять версиями и ветками.
- В VS Code можно просматривать и отслеживать изменения в коде и коммитить их напрямую из редактора. Используйте для этого графический интерфейс или командную строку (терминал VS Code), чтобы добавлять, изменять и фиксировать изменения.
- Интеграция Git-консоли. В VS Code можно работать с Git, используя терминал VS Code. При работе применяются стандартные команды Git: git status, git add, git commit, git push и т.д. Эта функция будет полезна тем, у кого есть опыт работы с Git из командной строки.
- VS Code поддерживает множество Git-расширений, которые позволяют использовать дополнительные функции Git, такие как GitLens, который показывает информацию об изменениях, авторах и коммитах внутри файла, или Git Graph, который показывает графические данные об истории коммитов и ветках.
Основные требования к работе системы
Visual Studio Code – легковесный кодовый редактор, который не требует больших системных затрат для работы, он легко адаптируется к различным конфигурациям и системам. Придерживайтесь этих минимальных требований к оборудованию, на котором будет запущен VS Code, чтобы обеспечить плавную работу с редактором и максимально использовать возможности программного обеспечения:
- Операционная система: Windows, MacOS и Linux (в том числе Ubuntu, Debian, Fedora и другие). Система должна быть обновлена до последней версии, чтобы обеспечить работу современных приложений.
- Процессор: 1.6 ГГц или более, Intel Core 2 Duo или более.
- Оперативная память (ОЗУ): минимально 2 ГБ, для больших проектов рекомендуется не менее 4 ГБ.
- Жесткий диск: не менее 200 МБ свободного места на жестком диске для установки версии 32-х бит, или не менее 500 МБ для установки на 64-х битные системы.
.png)
Чтобы работать с репозиториями выбирайте надежное и мощное оборудование. Для таких проектов подойдет услуга Аренда выделенного сервера.
Работа с панелью Source Control
Рассмотрим начальные действия, которые пригодятся вам при знакомстве с панелью Source Control.
- Панель Source Control в Visual Studio Code находится в нижней части редактора и активируется с помощью иконки Git (выглядит как ветка). Нажмите на эту иконку, чтобы открыть панель Source Control.
- Если у вас уже есть Git-репозиторий, он автоматически отобразится в панели Source Control. Если нет, вы можете инициализировать новый Git-репозиторий в нужном каталоге с помощью команды «git init» в командной строке терминала VS Code или через встроенную функцию VS Code «Initialize Repository».
- Когда вы открываете новый проект, VS Code автоматически открывает панель Source Control и делает первый коммит «Initial Commit» с указанием всех файлов проекта. Эти файлы будут отображены в списке изменений.
- Просмотрите список изменений в панели Source Control. Определите, какие файлы вам нужно добавить в ваш следующий коммит, какие файлы изменены, а какие еще не отслеживаются Git.
- Кликните по файлу, чтобы просмотреть изменения в режиме сравнения с предыдущей версией. Используйте команды «Stage Changes» (добавить изменения в индекс) или «Discard Changes» (отменить изменения), чтобы изменить состояние файла.
(6).png)
- Чтобы добавить файлы коммит, введите сообщение коммита в поле ввода внизу панели Source Control. Нажмите на кнопку «Commit» (Фиксировать изменения) для создания нового коммита с выбранными файлами.
- Используйте кнопки «Push» (Загрузить изменения на сервер) и «Pull» (Загрузить изменения с сервера), чтобы обновить свой локальный репозиторий или отправить коммиты на удаленный репозиторий.
- Чтобы переключиться на другую ветку Git или создать новую ветку и начать работу в ней, используйте список веток.
Мы привели варианты часто используемых действий при работе с панелью Source Control. Теперь рассмотрим другие возможности VS Code.
Индикаторы области Gutter
Индикаторы области Gutter отображаются в левой части редактора кода между линейкой номера строк и областью кода. Они используются для указания различных видов информации, таких как переходы к местам ошибок, предупреждениям и сообщениям об ошибках, а также другие дополнительные функции, связанные с отслеживанием изменений в коде.
Когда происходит изменение кода, индикаторы меняют свой цвет, сообщая о возможных проблемах или предлагая оптимизацию. Это значительно облегчает работу программистов, так как они могут быстро находить места, требующие внимания, и понимать, где существуют проблемы в коде.
Индикаторы области Gutter – удобный способ быстро найти и проанализировать информацию о коде, поэтому они являются важным инструментом для разработчиков. Плагины для VS Code могут добавлять индикаторы области Gutter для специальных типов файлов, дополнительных компонентов и других функций, что позволяет упростить работу и обеспечить более высокую производительность и эффективность.
(7).png)
Просмотр отличий файлов
VS Code предоставляет множество инструментов для просмотра отличий между файлами. Это полезно для отслеживания изменений в коде, работе с ветками Git, исправления ошибок или просто для сравнения файлов.
Чтобы сделать сравнение файлов (а также ветки Git, различные коммиты) выберите два файла в панели и нажмите правой кнопкой мыши на них, затем выберите «Compare selected» (Сравнить выбранное) чтобы открыть сравнение в редакторе.
Встроенный редактор для просмотра отличий между версиями в режиме отображения подсвечивает изменённый файл тонкой линией в специальном цвете, что позволяет сделать быстрое сравнение разных версий файла или коммитов.
Работа с ветвлением
Хорошая практика – вести большие изменения, которые требуют много времени, в отдельных ветках. Это позволяет тестировать новые функции, прежде чем они будут включены в основное приложение.
При работе с ветвлением кода вам могут пригодиться следующие действия:
- Создание ветвления. Выберите нужную ветку в панели Source Control, затем щелкните правой кнопкой мыши по ней и выберите «Create new branch» (Создать новую ветку). Введите имя ветки и нажмите Enter.
- Объединение веток. Выберите ветку, которую вы хотите объединить с текущей, щелкните правой кнопкой мыши и выберите «Merge branch» (Объединить ветвь). Выберите ветку, которую вы хотите объединить, нажмите Enter.
- Разрешение конфликтов. При объединении веток могут возникнуть конфликты. Если это происходит, редактор кода показывает сообщение о конфликте и предлагает варианты разрешения. Выберите нужную опцию разрешения конфликта и нажмите «Accept current change» (Принять текущее изменение). После разрешения конфликтов сохраните изменения, которые вы внесли в код, и закройте все открытые файлы.
- Удаление ветки. После того, как вы объединили ветки и сохранили изменения, вы можете удалить ветвление. Для этого выберите ветку, которую вы хотите удалить, затем щелкните правой кнопкой мыши и выберите «Delete branch» (Удалить ветку).
Virtual Studio Code: установка расширений
Установка расширений в Visual Studio Code позволит увеличить функционал редактора и получить более гибкий инструмент для работы с кодом. Рассмотрим некоторые из плагинов, который пользуются популярностью у разработчиков.
Модуль Git Lens
Git Lens – это расширение, которое предоставляет более широкий функционал, чем базовые инструменты Git. С его помощью возможны следующие действия:
- Просмотр автора и времени изменения.
- Оставление комментариев и ассоциаций к коммитам, что помогает лучше понимать, за что отвечает каждый коммит.
- Просмотр истории коммитов в интерактивном режиме, что позволяет легко перемещаться между ними.
- Просмотр изменений в графическом режиме.
- Поддержка относительных путей, благодаря чему можно легко редактировать файлы, находящиеся в папках или в любом месте в репозитории.
Модуль Git Blame
Git Blame помогает отслеживать, кем и когда были внесены изменения в файлы в репозитории Git. Расширение отображает автора, коммит и время изменения каждой строчки кода. Также с его помощью можно оставлять комментарии к сделанным изменениям.
Данный функционал полезен для проектов, над которыми работает команда разработчиков, что позволяет отследить каждое изменение и быстрее устранить возникающие ошибки, сделанные в процессе кодирования.
Модуль Git History
Git History – расширение, которое позволяет просмотреть историю коммитов в пользовательском интерфейсе VS Code. С его помощью можно быстро и эффективно пройтись по всей истории редактирования и перейти к нужным коммитам или файлам в проекте.
Расширение Git History предоставляет возможность эффективно управлять историей коммитов, ускоряет работу по разработке и требует меньшего времени для отслеживания изменений.
Заключение
Подключение Git к Visual Studio Code позволяет эффективно управлять версиями источников и отслеживать изменения. Visual Studio Code предоставляет интуитивный и удобный интерфейс для работы с Git, позволяя комфортно выполнять все необходимые операции, начиная от создания репозитория и выполнения коммитов, до отслеживания изменений и слияния веток.
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» («Подключить»), которое выглядит примерно вот так:

Рисунок 157. Подключение к Git-репозиторию из окна Team Explorer (Командный обозреватель)
Visual Studio запоминает все проекты, управляемые с помощью Git, которые Вы открыли, и они доступны в списке в нижней части окна. Если в списке нет проекта, который вам нужен, нажмите кнопку «Add» («Добавить») и укажите путь к рабочему каталогу. Двойной клик по одному из локальных Git-репозиториев откроет главную страницу репозитория, которая выглядит примерно так «Домашняя» страница Git-репозитория в Visual Studio.
Это центр управления Git; когда вы пишете код, вы, вероятно, проводите большую часть своего времени на странице «Changes» («Изменения»), но когда приходит время получать изменения, сделанные вашими коллегами по работе, вам необходимо использовать страницы «Unsynced Commits» («Несинхронизированные коммиты») и «Branches» («Ветки»).
A1.3 Приложение A: Git в других окружениях — Git в Visual Studio Code
Visual Studio Code имеет встроенную поддержку Git. Вам потребуется установить Git версии не ниже чем 2.0.0.
- Просмотр изменений редактируемого файла
- Панель состояния Git (слева внизу), на которой отображается текущая ветка, индикатор ошибок, входящие и исходящие коммиты.
- В редакторе можно делать основные Git операции:
- Инициализация репозитория.
- Клонирование репозитория.
- Создание веток и тегов.
- Индексация изменений и создание коммитов.
- Push/pull/sync с удалённой веткой.
- Разрешение конфликтов слияния.
- Просмотр изменений.