Webdevkin
Онлайн-курсы, статьи по веб-разработке и интернет-магазинам, уроки vue.js

Git для начинающих. Урок 10.
Конфликты и их разрешение

Урок, в котором мы узнаем, что такое конфликты, почему они возникают и как их разрешать

Видеоурок

Конспект урока

Краткое содержание урока, основные инструкции для командной строки, полезные ссылки и советы.

Работа с конфликтами в командной строке

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

Посмотрим на практике

У нас есть блок учеников, он уже в мастере и выглядит так

Нам нужно доработать этот блок, мы создаем новую ветку students-redesign и изменяем этот блок. Мы хотим добавить классы к тегам ul и li. Получается так

Закоммитим эти изменения и будем готовы залить в мастер. Но пока мы работали, нашему коллеге поручили добавить в этот же блок нового ученика. Эту задачу коллега уже сделал и залил в мастер. У него (и в мастере) код блока учеников теперь выглядит так

То есть просто добавил еще один тег li. Конечно, наших изменений он не видел.

Таким образом два человека правили код в одном и том же месте.

Мы переключаемся в мастер, пулимся, подтягиваем его коммит и пытаемся слить ее в мастер. И видим такое


    $ git merge students-redesign

    Auto-merging index.html
    CONFLICT (content): Merge conflict in index.html
    Automatic merge failed; fix conflicts and then commit the result.

Здесь git говорит, что обнаружен конфликт. То есть в текущей ветки (master) и в той, которую мы пытаемся вмерджить (students-redesign) есть изменения в одних и тех же участках кода. Нужно посмотреть, в чем заключается конфликт. Открываем файл index.html и видим

Угловые скобки ограничивают зону конфликта - те участки, где git видит изменения.

Блок между <<<<<<< HEAD и ======= это код, который находится в текущей ветке, в мастере.
А код между ======= и >>>>>>> students-redesign - то, что в ветке students-redesign.

Чтобы не запутаться, git дает подсказки:
- HEAD - это текущая ветка,
- students-redesign - ветка, которую мы сливаем в текущую.

Наша задача - собрать эти 2 участка в одно целое. Добавить и изменения в ветку students-redesign, и те, что уже приехали в мастер. Это называется разрешить конфликт или разрезолвить конфликт.

Приступим.

Мы помним, что наши изменения в ветке students-redesign это добавленные классы students (ul) и students__fio (li). Значит, их нужно оставить. А изменения в мастере - это новый ученик, новый тег li, его тоже нужно оставить, но дописать к li класс students__fio, чтобы теги были с одинаковыми классами

Мы оставили новые изменения и учли то, что приехало в мастер. Угловые скобки и значки === тоже нужно убрать - в итоге останется правильный html.

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


    $ git add index.html 
    $ git commit -m 'Merge branch students-redesign'
    $ git push origin master

Как работать с конфликтами в PhpStorm

PhpStorm упрощает работу с конфликтами. Когда мы мерджим ветку и возникает конфликт, PhpStorm показывает окно, в котором выведен список всех файлов, в которых обнаружены конфликты. Кнопка Merge... открывает еще одно окно, разделенное на 3 части. В левой части показываются изменения в текущей ветке, куда мы мерджим. В правой части - изменения из ветки, которую мы мерджим в нашу. А в центре нужно собрать готовый код.

Такое визуальное разделение гораздо проще, чем анализировать сплошной текст с угловыми скобками и разделителями ===

Когда мы разрешим все конфликты, PhpStorm предложит нам нажать кнопку Apply, чтобы закончить мердж. Мы ее нажмем и IDE создаст мердж-коммит без необходимости коммитить вручную, как мы это делали в командной строке.

Мердж мастера в свою ветку

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

Для информации

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

Когда я начинал изучать git, конфликты для меня были самой большой проблемой. Каждый раз, когда мерджил ветку в мастер, я со страхом ждал, будет конфликт или нет. Реакция была примерно такая

Git conflict

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

Что могу посоветовать

  • пользуйтесь визуальными инструментами для разрешения конфликтов. PhpStorm в этом гораздо удобнее простого редактора и командной строки
  • чаще подтягивайте мастер в свою ветку, то есть держите ветку актуальной. Чем больше устаревает ваша ветка, тем больше шансов, что при мердже окажется много конфликтов
  • не откладывайте разрешение конфликта. Рано или поздно это придется сделать
  • не стесняйтесь звать на помощь. Просто потому, что вы можете не знать детали функционала, который реализовал ваш коллега
  • не забывайте пушить ветку после резолва конфликта. Особенно это важно, если вы работаете с коллегой в одной ветке. Тогда при подтягивании мастера конфликт разрешит только один из вас. Остальные подтянут чистый код
  • пользуйтесь инструментом "волшебная палочка" в PhpStorm очень осторожно (смотрите видео, там это разбирается)

На этом первая часть курса закончена
Спасибо за внимание и до встречи!

Вторая часть курса в процессе. За обновлениями следите здесь или в группе в ВК
Скоро выйдет промежуточный урок - переходный от первой ко второй части.

Все уроки курса

* платные уроки

список обновляется...