Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#Руководства</a>

2 <ul><li>24 май 2024</li>

3 <li>0</li>

4 </ul>Инструкция для GitHub Desktop, командной строки и VS Code.

5 Иллюстрация: Катя Павловская для Skillbox Media

6 Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.

7 GitHub - это облачный сервис, где программисты хранят файлы и совместно работают над проектами. GitHub взаимодействует с системой контроля версий Git. Сегодня вы узнаете, как он работает. Мы создадим репозиторий, добавим в него файлы проекта, синхронизируем репозиторий с ПК, научимся обновлять файлы, добавлять новые ветки и сливать их в одну.

8 Загружать изменения в репозиторий GitHub мы будем тремя способами: через приложение GitHub Desktop, командную строку и редактор кода VS Code. Эта статья предполагает, что у вас настроена система контроля версий Git и вы изучили её основные команды. Также у вас должен быть установлен VS Code. Если нет - рекомендуем сначала последовательно прочитать эти материалы:

9 В первом разделе мы подготовимся к работе с GitHub. Дальше вы можете выбрать: попробовать поочерёдно все способы или остановиться на каком-то одном. Если хотите универсальный вариант - научитесь использовать командную строку.

10 Git - локальное хранилище кода, а GitHub - удалённое. Git и GitHub - разные сервисы, которые умеют взаимодействовать или работать автономноИнфографика: Git / GitHub / Skillbox MediaСодержание

11 <ul><li><a>Подготовка к работе</a></li>

12 </ul><ul><li><a>Создаём учётную запись</a></li>

13 <li><a>Добавляем удалённый репозиторий</a></li>

14 </ul><ul><li><a>Как добавить изменения на GitHub через приложение GitHub Desktop</a></li>

15 </ul><ul><li><a>Переносим удалённый репозиторий на ПК </a></li>

16 <li><a>Добавляем новые файлы на ПК и переносим их в удалённый репозиторий</a></li>

17 <li><a>Создаём новую ветку и добавляем в проект внесённые изменения</a></li>

18 </ul><ul><li><a>Как загрузить проект в репозиторий GitHub через консоль</a></li>

19 </ul><ul><li><a>Инициализируем локальный репозиторий</a></li>

20 <li><a>Связываем локальный и удалённый репозиторий</a></li>

21 <li><a>Заливаем изменения из локального репозитория на GitHub</a></li>

22 <li><a>Создаём через консоль новую ветку и обновляем удалённый репозиторий</a></li>

23 </ul><ul><li><a>Как залить папки и файлы с кодом на GitHub через VS Code</a></li>

24 </ul><ul><li><a>Добавляем файлы и папки в локальный репозиторий</a></li>

25 <li><a>Заливаем изменения через VS Code в удалённый репозиторий на GitHub</a></li>

26 <li><a>Устанавливаем плагины для комфортной работы с Git и GitHub</a></li>

27 </ul><ul><li><a>Что дальше</a></li>

28 </ul>Для работы с GitHub вам необходимо зарегистрировать учётную запись и создать удалённый репозиторий. Рассмотрим подробно, как это сделать.

29 Перейдите на сайт<a>github.com</a>, зарегистрируйтесь и верифицируйте адрес электронной почты. Выберите тип аккаунта: публичный или приватный. В публичном аккаунте репозитории видны всем, а в приватном - только тем участникам, которым вы сами открыли доступ. По умолчанию вы переходите на бесплатный тариф, который можно изменить в разделе Pricing. Платные тарифы отличаются повышенной безопасностью, размером хранилища и некоторыми специальными опциями для профессиональной разработки.

30 Далее рекомендуем выставить настройки безопасности и заполнить профиль - на GitHub много IT-рекрутеров, которые по информации в профиле набирают кандидатов в проекты. Поставьте фото и ссылки на соцсети, откройте доступ к электронной почте и напишите о себе: расскажите про опыт, специализацию, пройденные курсы, рабочий стек технологий и выполненные проекты. Заполненный профиль повышает вероятность трудоустройства.

31 Когда почта верифицирована, можно создать репозиторий и пользоваться всеми возможностями GitHubСкриншот:<a>GitHub</a>/ Skillbox MediaРепозиторий - это файловое хранилище проектов. На бесплатном тарифе можно загружать до 500 МБ данных и создавать неограниченное количество репозиториев.

32 Чтобы создать репозиторий, нажмите на кнопку New repository, назовите проект и кликните Create repository. Можно добавить описание проекта, сделать его публичным или приватным и прикрепить технические файлы:

33 <ul><li>README file содержит подробное описание проекта - так другие разработчики узнают, какой репозиторий они смотрят и зачем он нужен.</li>

34 <li>gitignore позволяет сэкономить место и не заливать на GitHub лишние файлы. Например, можно исключить скрытые файлы macOS.</li>

35 <li>License добавляет к коду ссылку на первоисточник и защищает права разработчика. Лицензия позволяет понять, как правильно использовать чужой код и можно ли его свободно внедрять в коммерческие проекты.</li>

36 </ul>Мы создаём тестовый репозиторий, поэтому обойдёмся без лицензии - выберем только два дополнительных файла: README file и gitignore. Если вы пока не знаете, что писать в README file и что добавлять в gitignore, - оставьте эти файлы пустыми или посмотрите инструкцию в разделе Read the guide.

37 Скриншот:<a>GitHub</a>/ Skillbox MediaМы создали публичный репозиторий и будем хранить файлы в папке testСкриншот:<a>GitHub</a>/ Skillbox MediaВ README file отображается краткое описание проекта - сейчас этот файл не важен, поэтому мы не будем менять его описание. Изменим файл gitignore и сделаем так, чтобы он не учитывал служебные папки операционной системы:

38 <ul><li>Переходим на сайт<a>gitignore.io</a>.</li>

39 <li>Добавляем macOS или другую операционку, с которой вы работаете.</li>

40 <li>Жмём Create и получаем нужный служебный файл.</li>

41 <li>Копируем данные и переносим их в файл gitignore на GitHub.</li>

42 </ul>После редактирования gitignore делаем коммит - записываем в историю проекта факт того, что мы установили ограничение для файлов macOS.

43 Генерируем ограничение для macOSСкриншот:<a>Toptal</a>/ Skillbox MediaПолучаем служебный файл для редактирования gitignoreСкриншот:<a>Toptal</a>/ Skillbox MediaПереносим служебный файл в gitignore, пишем коммит и сохраняем измененияСкриншот:<a>GitHub</a>/ Skillbox MediaВ этом разделе мы установим приложение GitHub Desktop и с его помощью скачаем удалённый репозиторий к себе на компьютер. Затем мы добавим новый файл и обновим удалённый репозиторий. После создадим через GitHub Desktop новую ветку и синхронизируем сделанные изменения.

44 Перейдите на сайт<a>desktop.github.com</a>и скачайте GitHub Desktop - это приложение, которое позволит синхронизировать удалённый репозиторий на GitHub и файлы на вашем компьютере без командной строки терминала:

45 <ul><li>Скачиваем приложение под свою операционную систему.</li>

46 <li>Открываем приложение и проходим авторизацию - нужно указать электронную почту и данные вашего GitHub-аккаунта.</li>

47 <li>Приложение синхронизируется с удалённым репозиторием и предложит выполнить одно из следующих действий: создать новый репозиторий, добавить локальную папку с компьютера в GitHub Desktop или клонировать существующий репозиторий в папку компьютера.</li>

48 </ul>Мы создали тестовый удалённый репозиторий, поэтому выберем третий вариант - клонировать существующий репозиторий в папку компьютера.

49 После установки GitHub Desktop запросит синхронизацию с GitHub-аккаунтом. Если аккаунта нет, приложение предложит его создатьСкриншот:<a>GitHub</a>/ Skillbox MediaРабочее пространство в GitHub Desktop - мы можем клонировать репозиторий, создать новый или перенести нужные файлы с компьютераСкриншот:<a>GitHub</a>/ Skillbox MediaВыбираем репозиторий, сохраняем его на рабочем столе и жмём кнопку CloneСкриншот:<a>GitHub</a>/ Skillbox MediaПосле клонирования репозитория в рабочем пространстве появятся три вкладки: Current Repository, Current Branch и Fetch origin.

50 <ul><li>Current Repository - раздел позволяет переключаться между несколькими репозиториями, отслеживать невнесённые изменения (вкладка Changes) и смотреть историю коммитов (вкладка History).</li>

51 <li>Current Branch - раздел позволяет переключаться между несколькими ветками проекта.</li>

52 <li>Fetch origin - раздел обновляет внесённые изменения и синхронизирует файлы локального и удалённого репозитория.</li>

53 </ul>Обратите внимание на раздел Current Repository и вкладку Changes. В левом нижнем углу есть окно для добавления коммитов и комментариев - это означает, что вы можете записывать каждый шаг, не посещая сайт GitHub.

54 Рабочее пространство для работы с клонированным репозиториемСкриншот:<a>GitHub</a>/ Skillbox MediaИстория изменений нашего репозиторияСкриншот:<a>GitHub</a>/ Skillbox MediaНа скриншоте первый коммит технический, он указывает на то, что мы создали репозиторий. Второй коммит наш - им мы редактировали файл gitignore. История хранит все коммиты, и мы можем вернуться к любому из них. Это страховка от непредвиденных случаев.

55 Папка с файлами нашего репозитория хранится на рабочем столе. Чтобы продолжить работу, откроем проект в редакторе кода: можно выбрать любую программу, и GitHub Desktop предлагает воспользоваться Atom.

56 Выбор редактора кода - дело вкуса. Мы будем работать с репозиторием в Visual Studio Code - это бесплатный редактор от компании Microsoft.

57 Папка с нашим тестовым репозиторием в Visual Studio CodeСкриншот:<a>Visual Studio Code</a>/ Skillbox MediaСоздадим HTML-файл, добавим базовую структуру и посмотрим на боковое меню - HTML-файл подсвечен зелёным цветом. Это означает, что в проекте появились изменения и они ещё не добавлены в репозиторий на GitHub.

58 Редактор кода подсвечивает зелёным цветом новые файлыСкриншот:<a>Visual Studio Code</a>/ Skillbox MediaПереходим в GitHub Desktop - созданный HTML-файл появится во вкладке Changes. Для его сохранения пишем коммит и переходим во вкладку History для просмотра изменений. Если изменения сохранились, нажимаем на Push origin и отправляем изменения в удалённый репозиторий.

59 Новые файлы переносятся из редактора кода в GitHub DesktopСкриншот:<a>Visual Studio Code</a>/ Skillbox MediaСоздаём коммит и фиксируем измененияСкриншот:<a>Visual Studio Code</a>/ Skillbox MediaHTML-файл в удалённом репозитории на GitHubСкриншот:<a>GitHub</a>/ Skillbox MediaФайлы на GitHub полностью соответствуют файлам в редакторе кода. Это значит, что, если с ПК что-то случится, мы сможем восстановить проектСкриншот:<a>GitHub</a>/ Skillbox MediaДобавим к проекту пустой CSS-файл и подключим его к HTML. После этого в меню редактора появятся два цвета: HTML-файл подсветится оранжевым, а CSS-файл - зелёным. Оранжевый означает, что файл уже есть в удалённом репозитории и его нужно обновить. Зелёный - что файла нет в репозитории. Переходим в GitHub Desktop и добавляем коммит для этого изменения.

60 Подсветка файлов в меню меняется после добавления или редактирования файлов - это подсказка, чтобы мы не забывали обновлять репозиторийСкриншот:<a>Visual Studio Code</a>/ Skillbox MediaЕсли мы откроем созданную страницу в браузере, то это будет несколько строчек текста на белом фоне. Представим такую ситуацию: нам нельзя изменять код проекта, но нужно посмотреть, как будет выглядеть страница на красном фоне. Чтобы сделать это, добавим в репозиторий новую ветку:

61 <ul><li>Переходим в GitHub Desktop.</li>

62 <li>Открываем раздел Current Branch, нажимаем кнопку New Branch, пишем название новой ветки и кликаем Create New Branch.</li>

63 <li>Возвращаемся в редактор кода и тестируем идею.</li>

64 </ul>После создания новой ветки не забудьте нажать на Push origin, чтобы изменения попали в удалённый репозиторий на сайте GitHub.

65 Создаём новую ветку в GitHub DesktopСкриншот:<a>GitHub</a>/ Skillbox MediaТестируем изменения, добавленные в новую ветку. Основная ветка в этот момент находится в прежнем состоянии и сохраняет свой кодСкриншот: Google Chrome / Skillbox MediaПредположим, наша идея с красным фоном оказалась удачной и код нужно залить в основную ветку. Чтобы это сделать, переходим на сайт GitHub, нажимаем кнопку Сompare & pull request и подтверждаем изменения кнопкой Merge pull request. Последний шаг - переходим в GitHub Desktop, кликаем Fetch origin и синхронизируемся с удалённым репозиторием. Теперь код из дополнительной ветки попал в основную, а изменения есть на ПК и в облаке.

66 Для слияния веток нужно выполнить несколько подтверждений на GitHubСкриншот:<a>GitHub</a>/ Skillbox MediaВ приложении GitHub Desktop мы выполняли следующие действия:

67 <ul><li>перенесли удалённый репозиторий с GitHub на компьютер;</li>

68 <li>добавили новый файл и залили его на GitHub;</li>

69 <li>создали ветку, добавили в неё новый файл и загрузили эти изменения в удалённый репозиторий на GitHub.</li>

70 </ul>Теперь повторим эти действия с помощью командной строки. Для удобства создадим новый удалённый репозиторий, однако обойдёмся без файла gitignore и не будем выбирать тип лицензии. Для учебного проекта это не обязательно. Файл README также пока пропустим и добавим его в процессе через консоль.

71 Запустите программу "Терминал" или iTerm2, если у вас macOS или Linux. Пользователям Windows можно работать в Git Bash.

72 Для начала создадим новую рабочую папку и перейдём в неё. После эту папку нужно передать под управление системы контроля версий Git:

73 <ul><li>mkdir folder_name - создаём папку и придумываем ей имя;</li>

74 <li>cd folder_name - переходим в папку с выбранным именем;</li>

75 <li>git init - инициализируем в выбранной папке локальный репозиторий;</li>

76 <li>ls -a - смотрим список открытых и скрытых файлов.</li>

77 </ul>После выполнения команд у вас должна появиться скрытая папка .git. Если она отображается, то вы успешно инициализировали локальный репозиторий.

78 Инициализируем локальный репозиторий в программе iTerm2Скриншот:<a>iTerm2</a>/ Skillbox MediaПерейдите в GitHub-профиль, выберите репозиторий и кликните на кнопку Code. Скопируйте предложенную ссылку. Сейчас при заливке проекта в удалённый репозиторий мы будем работать через HTTPS-соединение. Однако вместо него можно использовать протокол SSH. Что это за протокол, как его подключить и зачем он нужен - рассказываем в отдельной статье.

79 После создания удалённого репозитория вам откроется инструкция для быстрого старта работы. В этой инструкции описаны основные консольные команды, которые понадобятся для связи локального и удалённого репозитория. На этой же странице вам предложат установить GitHub Desktop и выбрать между HTTPS- и SSH-соединением.

80 Команды для связи локального и удалённого репозитория на GitHubСкриншот:<a>GitHub</a>/ Skillbox MediaПо инструкции мы должны перейти в консоль, создать текстовый файл README с расширением .markdown, инициализировать локальный репозиторий и выполнить коммит. Локальный репозиторий мы инициализировали на предыдущем шаге. Поэтому нам осталось выполнить следующие команды:

81 <ul><li>echo "# NewTest" >> README.md - создаём файл с нужным текстом;</li>

82 <li>git add README.md - переносим созданный файл в индекс;</li>

83 <li>git commit -m "first commit" - сохраняем файл в локальном репозитории.</li>

84 </ul>Если вы впервые слышите про Markdown - почитайте ознакомительную статью. В ней мы рассказываем,<a>что это за разметка и зачем она нужна</a>. А если вы хотите описать с помощью Markdown файл README -<a>вот шпаргалка в помощь</a>.

85 Создаём в локальном репозитории README-файлСкриншот:<a>iTerm2</a>/ Skillbox MediaС 1 октября 2020 года команда GitHub<a>отказалась</a>от термина master, который задавал имя для главной ветки. Теперь ветка по умолчанию называется main. Изменения связаны с поддержкой движения<a>Black Lives Matter</a> - руководители GitHub посчитали, что слово master может звучать оскорбительно для кого-то из пользователей. Поэтому перед связыванием репозиториев желательно проверить имя главной ветки в Git и при необходимости её переименовать.

86 С помощью команды git branch вы можете посмотреть список доступных веток и их имена в вашем локальном репозитории. Возле одной из веток будет стоять звёздочка * - это ветка, в которой вы сейчас находитесь. Список веток отображается в режиме просмотра. Для выхода из него нажмите клавишуQ.

87 Для переименования текущей ветки выполните следующую команду:

88 git branch -m новое_имя_ветки # Пример переименования ветки master в main git branch -m mainПосле переименования главной ветки можно связать локальный репозиторий с удалённым репозиторием на GitHub:

89 git remote add origin ссылка_на_репозиторийПроверяем связь между репозиториями:

90 git remote -vЕсли связь установлена, то вы увидите имя и URL-адрес удалённого репозитория. Должны появиться две записи, которые различаются текстом в скобках. В конце первой записи в скобках будет записано fetch, а в конце второй - push. Это означает, что репозитории настроены на скачивание и загрузку обновлений.

91 Синхронизируем локальный и удалённый репозиторий, проверяем установленную связьСкриншот:<a>iTerm2</a>/ Skillbox MediaУ нас есть связанные репозитории и сохранённый файл README. Перенесём его в удалённый репозиторий на GitHub:

92 git push -u origin main Переносим README-файл из локального репозитория в удалённыйСкриншот:<a>iTerm2</a>/ Skillbox MediaПроверяем README-файл в удалённом репозитории на GitHubСкриншот:<a>GitHub</a>/ Skillbox MediaЕсли вы продолжите работать в ветке main, то для загрузки новых изменений можно больше не использовать флаг -u и имя удалённого репозитория. Достаточно сокращённой команды:

93 git pushОткроем в консоли редактор Vim и добавим текст в файл README:

94 vim README.mdОбновлённая версия README-файлаСкриншот:<a>iTerm2</a>/ Skillbox MediaПроверяем статус локального репозитория и видим изменённый файл README:

95 Статус локального репозитория после редактирования README-файлаСкриншот:<a>iTerm2</a>/ Skillbox MediaДобавляем обновлённый файл README в индекс, создаём новый коммит и командойgit pushзагружаем изменения в удалённый репозиторий на GitHub:

96 Переносим обновлённый README-файл из локального репозитория в удалённыйСкриншот:<a>iTerm2</a>/ Skillbox MediaПроверяем: обновлённый файл README появился в удалённом репозитории на GitHubСкриншот:<a>GitHub</a>/ Skillbox MediaВыполним команду, чтобы создать новую ветку и сразу в неё перейти:

97 git checkout -b имя_новой_веткиВ новой ветке мы можем создавать файлы и папки, а затем залить их на удалённый репозиторий GitHub. Для этого нужно повторить действия, которые мы выполняли с файлом README: создаём коммит, связываем ветки локального и удалённого репозитория, загружаем изменения на GitHub.

98 Создаём ветку, добавляем в неё файл и фиксируем изменения:

99 git checkout -b test-branch - создаём и переходим в новую ветку; echo "# Test new branch" >> test.md - создаём в новой ветке текстовый файл; git add . - переносим созданный файл в индекс; git commit -m "First commit in a new branch" - делаем коммит в локальном репозиторииСкриншот:<a>iTerm2</a>/ Skillbox MediaСвязываем новую локальную ветку с удалённым репозиторием:

100 git push -u origin test-branch - заливаем на GitHub новый файлСкриншот:<a>iTerm2</a>/ Skillbox MediaПроверяем новую ветку в удалённом репозитории на GitHubСкриншот:<a>GitHub</a>/ Skillbox MediaПроверяем содержание коммита в новой ветке на GitHubСкриншот:<a>GitHub</a>/ Skillbox MediaVS Code позволяет в одном окне писать код и взаимодействовать с Git и GitHub. Изменения можно сохранять через графический интерфейс или встроенную консоль. Ещё можно установить множество плагинов для комфортной работы.

101 В этом разделе мы создадим новые репозитории и поработаем с Git в VS Code. Если вам понравится этот способ, рекомендуем после прочтения статьи посмотреть документацию и подробно изучить все доступные возможности.

102 Создадим на компьютере пустую папку с произвольным именем и перетащим её в редактор VS Code. После в главном меню выберем вкладку Терминал => Создать терминал. В редакторе появится консоль для ввода команд. Введём git init и инициализируем локальный репозиторий.

103 Создаём пустой локальный репозиторий в редакторе кода VS CodeСкриншот:<a>Visual Studio Code</a>/ Skillbox MediaДобавим несколько папок и пустых файлов. Поскольку проект находится под контролем системы Git, то все новые файлы и папки с новыми файлами сразу подсвечиваются. Однако если папка пустая, то она подсвечиваться не будет:

104 Добавляем в VS Code несколько файлов и папокСкриншот:<a>Visual Studio Code</a>/ Skillbox MediaОбратите внимание на буквы, возникающие справа от имени подсвечиваемых файлов. По этим буквам можно отслеживать состояние файлов в системе Git:

105 <ul><li>Untracked - неотслеживаемый файл, который только попал в проект. В VS Code справа от таких файлов высвечивается буква U.</li>

106 <li>Staged - проиндексированный файл, который перенесён в индекс. В редакторе такие файлы отмечены буквой A - сокращённо от Added, "добавленный".</li>

107 <li>Unmodified - немодифицированный файл, который после коммита переместился из индекса в локальный репозиторий. Немодифицированные файлы в VS Code никак не подсвечиваются.</li>

108 <li>Modified - модифицированный файл. Это файл локального репозитория, в который вы внесли изменения. После коммита Git сохранит новую версию этого файла и изменит его статус на Unmodified. Справа от модифицированных файлов появляется буква M.</li>

109 </ul>Жизненный цикл файлов под управлением системы контроля версий GitИзображение:<a>Git</a>Добавим в VS Code несколько коммитов. Это можно сделать через консоль и графический интерфейс. Начнём с консоли и сохраним наш первый коммит:

110 git add . git commit -m "Commit message"Переносим файлы и папки в индекс, а затем делаем коммит и сохраняем их в локальном репозитории. Обратите внимание на подсветку: после коммита файлы стали зафиксированными, получили статус Unmodified и больше не подсвечиваютсяСкриншот:<a>Visual Studio Code</a>/ Skillbox MediaДополним index.html базовой разметкой и подключим стили. Файл подсветится оранжевым цветом и получит статус Modified. На левой панели появится число возле иконки с веткой - это оповещение инструмента VS Code для работы с Git.

111 Сохраняем изменения в файле index.html и следим за его обновлением в VS CodeСкриншот:<a>Visual Studio Code</a>/ Skillbox MediaКликаем на иконку с веткой в левой панели. В ней будет наш изменённый файл index.html. Если его выбрать, то редактор подсветит добавленные и удалённые строки кода. А если нажать на значок +, то VS Code перенесёт файл в индекс.

112 Переносим файл index.html в индекс через панель управления изменениями в VS CodeСкриншот:<a>Visual Studio Code</a>/ Skillbox MediaКогда файл в индексе - напишите в верхней строке сообщение и нажмите кнопку Фиксация. Вы сделали второй коммит в локальном репозитории.

113 Фиксируем изменения в файле index.html в локальном репозитории через графический интерфейс VS CodeСкриншот:<a>Visual Studio Code</a>/ Skillbox MediaВведите команду git log и посмотрите список коммитов. Их должно быть два: первый коммит мы выполнили через консоль, а второй - через визуальный интерфейс VS Code. Оба способа рабочие, поэтому выбирайте тот, что нравится.

114 История коммитов в консоли VS CodeСкриншот:<a>Visual Studio Code</a>/ Skillbox MediaПеред загрузкой проекта в удалённый репозиторий поработаем с ветками. Как и в случае с коммитами, их можно создавать двумя способами: через консольную команду и графический интерфейс. Создадим новую ветку через консоль:

115 git branch имя_новой_ветки # Посмотреть список всех веток в проекте git branchСоздаём в консоли VS Code новую ветку и просматриваем список доступных ветвейСкриншот:<a>Visual Studio Code</a>/ Skillbox MediaДля работы с ветками через графический интерфейс кликните на иконку в левой нижней части редактора. Перед вами откроется меню, с помощью которого вы можете создавать ветки и переключаться между доступными ветками без консоли.

116 Графический интерфейс для работы с Git-ветками в VS CodeСкриншот:<a>Visual Studio Code</a>/ Skillbox MediaСоздадим на сайте GitHub новый репозиторий. После этого перейдём в консоль редактора VS Code и выполним несколько команд: свяжем наш локальный и удалённый репозиторий, проверим связь и загрузим изменения. Подробно этот процесс мы описывали в прошлом разделе, когда заливали проект через консоль.

117 # Связываем локальный и удалённый репозиторий git remote add origin https://github.com/Aleksandr-Babaskin/VS-Code-Hub.git # Проверяем установленную связь git remote -vСообщение в консоли VS Code о синхронизации локального и удалённого репозиторияСкриншот:<a>Visual Studio Code</a>/ Skillbox Media# Заливаем изменения из локального репозитория в удалённый git push -u origin mainСообщение в консоли о переносе изменений в удалённый репозиторий на GitHubСкриншот:<a>Visual Studio Code</a>/ Skillbox MediaПроверяем синхронизацию: файлы и папки перенесены из VS Code на GitHubСкриншот:<a>GitHub</a>/ Skillbox MediaПосле связи локального и удалённого репозитория мы можем закрыть консоль и отправлять новые изменения через графический интерфейс редактора VS Code.

118 Для примера добавим в проект заголовок и три абзаца текста. Перенесём через графический интерфейс файл в индекс и выполним коммит. Теперь нам доступна ещё одна кнопка - Синхронизировать изменения. Жмём, и файл летит на GitHub.

119 Кнопка для отправки изменений из VS Code на GitHubСкриншот:<a>Visual Studio Code</a>/ Skillbox MediaСписок коммитов, залитых из VS Code в удалённый репозиторий на GitHubСкриншот:<a>GitHub</a>/ Skillbox MediaПоследний коммит, загруженный через визуальный интерфейс VS CodeСкриншот:<a>GitHub</a>/ Skillbox MediaДля работы с Git и GitHub в VS Code есть множество плагинов, но ни один из них устанавливать не обязательно. Стандартных возможностей VS Code достаточно. Плагины вы можете использовать на своё усмотрение лишь для того, чтобы сделать работу с репозиториями более информативной и наглядной.

120 Ниже мы кратко рассмотрим возможности трёх популярных плагинов, которые вы можете бесплатно попробовать. Если ничего не понравится - откройте вкладку Расширения, введите Git и выберите плагины на своё усмотрение.

121 Маркетплейс расширений позволяет фильтровать плагины по их рейтингу, количеству скачиваний и другим параметрам. При клике на плагин в правой части страницы появится документация с обзором основных функций и кнопка для установкиСкриншот:<a>Visual Studio Code</a>/ Skillbox MediaGitLens.Плагин предлагает разные способы для визуального отображения информации о ветках, коммитах и их авторах. Например, интерактивные аннотации позволяют навести курсор на любую строку кода и сразу увидеть, к какому коммиту она относится. Из прочих функций есть интеграция с GitHub, инструменты для сравнения сохранённых файлов и интерактивные графики.

122 Пример отображения веток и коммитов в VS Code плагином GitLensСкриншот:<a>Visual Studio Code</a>/ Skillbox MediaGit History.С помощью этого плагина удобно просматривать историю коммитов и сравнивать версии одного файла. Нужный коммит можно найти по поиску и через фильтр. Данные можно сортировать по авторам, веткам, дате и времени.

123 Пример отображения истории коммитов в VS Code плагином Git HistoryСкриншот:<a>Visual Studio Code</a>/ Skillbox MediaGit Graph.Этот плагин отображает историю коммитов в виде графа и позволяет удобно перемещаться между ветками. При клике на коммит вы получаете информацию о нём и видите, какие файлы он содержит. Есть поиск, фильтры и кнопки для сохранения изменений в локальном или удалённом репозитории на GitHub.

124 Иллюстрация работы плагина Git Graph в VS Code: граф и информация о коммитахСкриншот:<a>Visual Studio Code</a>/ Skillbox Media<ul><li>Почитайте<a>Pro Git book</a> - это бесплатное руководство по Git.</li>

125 <li>В футере<a>github.com</a>откройте раздел Training → Explore → GitHub Learning Lab - бесплатные курсы для углублённого изучения GitHub. Подходят для новичков и опытных программистов, которые учатся работать в команде.</li>

126 <li>Посетите<a>GitHub Community</a> - форум с множеством тем про GitHub, где можно задавать вопросы и участвовать в обсуждениях.</li>

127 </ul><a>Бесплатный курс по Python ➞Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу</a>