Если вы читаете этот текст, то уже, наверное, читали и про работу с Git через консоль, и через GitHub Desktop, но вам не понравилось или показалось неудобно. Это не проблема, ведь есть ещё один способ работать с Гитом.

Вот что о Гите говорит Коля Шабалин:

Да норм тема!

Если вы вёрстаете сайты или пишете код в редакторе Visual Studio Code, то Git за пять минут настраивается прямо внутри редактора. Не нужно запоминать команды для консоли, не нужно тыкать в лишние приложения.

Следуйте инструкции и всё получится.

Клонируем проект

Перед тем, как начать работу с кодом вашего проекта, необходимо клонировать его из GitHub к себе на компьютер. Слева в боковой панели VS Code выбираем вкладку Explorer. Затем нажимаем кнопку Clone Repository.

VS Code, в котором ничего не открыто
VS Code, в котором ничего не открыто

Появится строка для ввода команд, в которой ничего не нужно заполнять. Выбираем единственный пункт «Clone from GitHub».

Выбор следующего действия
Выбор следующего действия

Авторизация на GitHub

Чтобы VS Code получил доступ к вашему репозиторию, нужно пройти авторизацию на GitHub — то есть показать ему, что у вас есть все права для работы с репозиторием.

Достаточно выполнить это действие только один раз, потом редактор кода будет синхронизироваться самостоятельно.

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

Расширение «GitHub» предлагает войти в систему с помощью GitHub
Расширение «GitHub» предлагает войти в систему с помощью GitHub

Откроется окно браузера. Нажимаем зелёную кнопку Authorize, чтобы продолжить.

Окно браузера

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

Выбор дальнейшего действия
Выбор дальнейшего действия>

Статус Success на вкладке в браузере подтвердит, что авторизация прошла успешно. Теперь браузер можно закрыть.

Выбираем проект

Возвращаемся к работе с редактором. В той же вкладке Explorer в строке ввода выбираем необходимый проект из списка тех, что появились после успешной синхронизации. Например, нас интересует редактирование кода для проекта Barbershop.

Выбор проекта для работы
Выбор проекта для работы

Папка для проекта

VS Code предложит выбрать папку, в которой вы собираетесь хранить проект. Выберите папку, кнопка Select Repository Location подтвердит выбор, после чего проект будет склонирован.

Окно «Выбор папки»
Окно «Выбор папки»

Начало работы с кодом

Чтобы начать работу, откройте проект кнопкой Open во всплывающем окне. Выбор кнопки Open in New Window создаст новое окно. Это полезно, если у вас уже открыт другой проект, и вы собираетесь работать с несколькими проектами одновременно.

Открытие проекта

Теперь структура проекта появилась слева, проект готов к работе и можно начинать.

Редактор кода с открытым проектом
Редактор кода с открытым проектом

Делаем commit

Для начала добавим в проект файл .editorconfig и пропишем внутри правила для редактора VS Code. Чтобы добавить новый или изменённый файл в коммит, выбираем вкладку Git и нажимаем на кнопку «+» рядом с этим файлом.

Вкладка для работы с Git
Вкладка для работы с Git

В текстовое поле вводим сообщение «Добавляет editorconfig», которое подскажет, что делает этот коммит.

Ввод сообщения для отправки коммита
Ввод сообщения для отправки коммита

Теперь нажимаем комбинацию клавиш Ctrl + Enter или кликаем на галочку над текстовым полем ввода, чтобы записать наш коммит.

Push

После создания одного или нескольких коммитов обязательно сохраняем этап работы, чтобы не потерять его. Все изменения нужно отправить вместе с коммитом в удалённый форк. Нажимаем кнопку с тремя точками и выбираем Push.

Отправка коммита в форк
Отправка коммита в форк

Отлично! Вы успешно отправили все изменения в форк. Не забудьте перейти в GitHub, чтобы создать пуллреквест и вмёрджить все изменения проекта.

Pull

Чтобы продолжить работу над проектом, надо подтянуть все изменения из удалённого репозитория. Снова нажимаем на кнопку с тремя точками, но теперь выбираем Pull.

Синхронизация проекта с удалённым репозиторием
Синхронизация проекта с удалённым репозиторием

Проект подтянул изменения, можно продолжить работу.

Полезные статьи о Git:

Без Git веб-разработчику никуда

Но без кода Git не пригодится. Поэтому прокачайте навыки в JavaScript на курсе «Архитектура клиентских приложений».

Хочу