Как открыть репозиторий github в visual studio code
25.03.2022
3
14 400
В этом небольшой статье мы разберем как легко подключить GitHub к VS Code. Создадим свой удаленный репозиторий и загрузим туда файлы с компьютера.
По ссылке качаем и устанавливаем GIT для Windows 10:
Логинимся на GIT HUB:
Запускаем GIT Bash и вводим имя пользователя и email (должен совпадать с Git Hub):
На Git Hub создаем новый репозиторий и копируем адрес до него:
В VS Code мы клонируем репозиторий и вставляем ссылку для него:
Зажимаем CTRL + SHIFT + ` и можем выполнять команды для GIT:
# git init # git add . # git commit -m «Старт проекта» # git pushВ начале инициализируем директорию. Далее добавляем файлы текущей директории. С помощью commit фиксируем изменения. А далее отправляем файлы на удаленный репозиторий командой push.
Файлы проекта появились на удаленном репозитории. Теперь вы можете с ними работать:
Если у вас что-то не получилось можете посмотреть мое видео на такую же тему. Там более наглядно. Также сохраните для себя шпаргалку по командам Git.
Использование интеграции Git в Visual Studio Code
Редактор Visual Studio Code (VS Code) стал одним из самых популярных для веб-разработки. Его популярность обусловлена множеством встроенных возможностей, в том числе интеграции с системой контроля исходного кода, а именно с Git. Использование возможностей Git из VS Code позволяет сделать рабочие процессы более эффективными и надежными.
В этом учебном модуле мы изучим интеграцию контроля исходного кода в VS с помощью Git.
Предварительные требования
Для этого обучающего модуля вам потребуется следующее:
- Git, установленный на вашем компьютере. Более подробную информацию о том, как добиться этого, можно найти в учебном модуле Введение в Git.
- Последняя версия Visual Studio Code, установленная на вашем компьютере.
Шаг 1 — Знакомство с вкладкой Source Control
Прежде всего, чтобы воспользоваться преимуществами интеграции контроля исходного кода, следует инициализировать проект как репозиторий Git.
Откройте Visual Studio Code и запустите встроенный терминал. Вы можете открыть его, используя сочетание клавиш CTRL + ` в Linux, macOS или Windows.
Используя терминал, создайте каталог для нового проекта и перейдите в этот каталог:
Затем создайте репозиторий Git:
Также вы можете сделать это в Visual Studio Code, открыв вкладку Source Control (иконка выглядит как развилка дороги) в левой панели:
Затем нажмите кнопку Open Folder:
При нажатии кнопки откроется проводник файлов, где будет открыт текущий каталог. Выберите предпочитаемый каталог проекта и нажмите Open.
Затем нажмите Initialize Repository:
Если теперь вы посмотрите на свою файловую систему, вы увидите, что она содержит каталог .git . Чтобы сделать это, используйте терминал для перехода в каталог проекта и вывода его содержимого:
Вы увидите созданный каталог .git :
Это означает, что репозиторий инициализирован, и теперь вам следует добавить в него файл index.html .
После этого на панели Source Control вы увидите, что рядом с именем вашего нового файла отображается буква U. Обозначение U означает, что файл не отслеживается, то есть, что это новый или измененный файл, который еще не был добавлен в репозиторий:
Вы можете нажать значок плюс (+) рядом с файлом index.html , чтобы включить отслеживание файла в репозитории.
После этого рядом с файлом появится буква A. A обозначает новый файл, который был добавлен в репозиторий.
Чтобы записать изменения, введите команду отправки в поле ввода в верхней части панели Source Control. Затем нажмите иконку отметки check для отправки файла в репозиторий.
После этого вы увидите, что несохраненных изменений нет.
Теперь добавьте немного содержания в файл index.html .
Вы можете использовать ярлык Emmet для генерирования базовой структуры кода HTML5 в VS Code, нажав ! , а затем клавишу Tab . Теперь добавьте что-нибудь в раздел , например, заголовок , и сохраните файл.
На панели исходного кода вы увидите, что ваш файл изменился. Рядом с именем файла появится буква M, означающая, что файл изменен:
Для практики давайте запишем это изменение в репозиторий.
Теперь вы познакомились с работой через панель контроля исходного кода, и мы переходим к интерпретации показателей gutter.
Шаг 2 — Интерпретация показателей Gutter
На этом шаге мы рассмотрим концепцию Gutter («Желоб») в VS Code. Gutter — это небольшая область справа от номера строки.
Если ранее вы использовали сворачивание кода, то в области Gutter находятся иконки «Свернуть» и «Развернуть».
Для начала внесем небольшое изменение в файл index.html , например, изменим содержание внутри тега . После этого вы увидите, что измененная строка помечена в области Gutter синей вертикальной чертой. Синяя вертикальная черта означает, что соответствующая строка кода была изменена.
Теперь попробуйте удалить строку кода. Вы можете удалить одну из строк в разделе вашего файла index.html . Обратите внимание, что в области Gutter появился красный треугольник. Красный треугольник означает строку или группу строк, которые были удалены.
Теперь добавьте новую строку в конец раздела и обратите внимание на зеленую полосу. Вертикальная зеленая полоса обозначает добавленную строку кода.
В этом примере описаны индикаторы области Gutter для случаев изменения, удаления и добавления строки:
Шаг 3 — Просмотр отличий файлов
VS Code также позволяет посмотреть отличия между разными версиями файла. Обычно для этого нужно загружать отдельный инструмент diff, так что встроенная функция повысит эффективность работы.
Чтобы посмотреть отличия, откройте панель контроля исходного кода и дважды нажмите на измененный файл. В этом случае следует дважды нажать на файл index.html . Откроется типовое окно сравнения, где текущая версия файла отображается слева, а ранее сохраненная в репозитории версия — справа.
В этом примере мы видим, что в текущей версии добавлена строка:
Шаг 4 — Работа с ветвлением
Вы можете использовать нижнюю панель для создания и переключения ветвей кода. В нижней левой части редактора отображается иконка контроля исходного кода (которая выглядит как дорожная развилка), после которой обычно идет имя главной ветви или ветви, над которой вы сейчас работаете.
Чтобы создать ветвление, нажмите на имя ветви. Откроется меню, где вы сможете создать новую ветвь:
Создайте новую ветвь с именем test .
Теперь внесите изменение в файл index.html , чтобы перейти в новую ветвь test , например, добавьте текст this is the new test branch .
Сохраните эти изменения ветви test в репозитории. Затем нажмите на имя ветви в левом нижнем углу еще раз, чтобы переключиться обратно на главную ветвь master .
После переключения обратно на ветвь master вы увидите, что текст this is the new test branch , сохраненный для ветви test , отсутствует в главной ветви.
Шаг 5 — Работа с удаленными репозиториями
В этом учебном модуле мы не будем вдаваться в детали, но панель Source Control также предоставляет доступ для работы с удаленными репозиториями. Если вы уже работали с удаленными репозиториями, то вы увидите знакомые вам команды, такие как pull, sync, publish, stash и т. д.
Шаг 6 — Установка полезных расширений
В VS Code имеется не только множество встроенных функций для Git, но и несколько очень популярных расширений, добавляющих дополнительные функции.
Git Blame
Это расширение дает возможность просматривать информацию Git Blame в панели состояния для текущей выделенной строки.
Английское слово Blame имеет значение «винить», но не стоит беспокоиться — расширение Git Blame призвано сделать процесс разработки более практичным, а не обвинять кого-то в чем-то плохом. Идея «винить» кого-то за изменения кода относится не к буквальному возложению вины, а к идентификации человека, к которому следует обращаться с вопросами в отношении определенных частей кода.
Как вы видите на снимке экрана, это расширение выводит на нижней панели инструментов небольшое сообщение, указывающее, кто изменял текущую строку кода, и когда было сделано это изменение.
Git History
Хотя вы можете просматривать текущие изменения, сравнивать версии и управлять ветвлением с помощью встроенных функций VS Code, они не дают возможности просматривать историю Git. Расширение Git History решает эту проблему.
Как можно увидеть на снимке ниже, это расширение позволяет тщательно изучать историю файла, автора, ветви и т. д. Чтобы активировать показанное ниже окно Git History, нажмите на файл правой кнопкой мыши и выберите пункт Git: View File History:
Также вы сможете сравнивать ветви и записанные в репозиторий версии, создавать ветви из записанных версий и т. д.
Git Lens
GitLens дополняет возможности Git, встроенные в Visual Studio Code. Это расширение помогает визуализировать принадлежность кода через аннотации Git Blame и линзу кода, просматривать и изучать репозитории Git из среды VS Code, получать полезные аналитические данные с помощью мощных команд сравнения, а также выполнять многие другие задачи.
Расширение Git Lens — одно из самых мощных и популярных среди сообщества разработчиков расширений. В большинстве случаев его функции могут заменить каждое из вышеперечисленных двух расширений.
В правой части текущей строки, над которой вы работаете, отображается небольшое сообщение о том, кто внес изменение, когда это было сделано, а также сообщение о записи изменения в репозиторий. При наведении курсора на это сообщение выводится всплывающий блок с дополнительной информацией, включая само изменение кода, временную метку и т. д.
Также данное расширение предоставляет много функций, связанных с историей Git. Вы можете легко получить доступ к разнообразной информации, включая историю файлов, сравнение с предыдущими версиями, открытие определенных редакций и т. д. Чтобы открыть эти опции, вы можете нажать на текст на нижней панели состояния, где указан автор, изменивший строку кода, а также время ее изменения.
При этом откроется следующее окно:
Это расширение имеет очень много функций, и потребуется время, чтобы разобраться со всеми открываемыми им возможностями.
Заключение
В этом учебном модуле вы научились использовать интеграцию с системой контроля исходного кода в VS Code. VS Code предоставляет множество функций, для использования которых раньше нужно было загружать отдельный инструмент.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Сведения об использовании Visual Studio Code с GitHub Classroom
Вы можете настроить Visual Studio Code как предпочтительный редактор для назначений в GitHub Classroom.
Сведения о Visual Studio Code
Visual Studio Code — это простой, но мощный редактор исходного кода, который запускается на рабочем столе и доступен для Windows, macOS и Linux. С помощью расширения GitHub Classroom для VS Code учащиеся могут легко просматривать, изменять, отправлять, тестировать свои назначения Classroom и совместно работать над ними. Дополнительные сведения о идентификаторах и GitHub Classroomсм. в разделе «Интеграция GitHub Classroom с интегрированной средой разработки».
Редактор, выбранный учащимся
Интеграция GitHub Classroom с VS Code предоставляет учащимся пакет расширений, который содержит:
- Расширение GitHub Classroom с пользовательскими абстракциями, которые упрощают для учащихся начало работы.
- Расширение Visual Studio Live Share, интегрируемое в представление учащихся, что позволяет легко взаимодействовать с помощниками по обучению и одноклассниками для поддержки и совместной работы.
- Расширение GitHub Pull Request, которое позволяет учащимся просматривать обратную связь от преподавателей в редакторе.
Практическое руководство по запуску назначения в VS Code
При создании назначения можно добавить VS Code в качестве предпочтительного редактора для назначения. Дополнительные сведения см. в разделе «Интеграция GitHub Classroom с интегрированной средой разработки».
Это будет включать индикатор событий «Открыть в VS Code» во всех репозиториях учащихся. Этот индикатор событий отвечает за установку VS Code, пакета расширения Classroom и открытие активного назначения одним щелчком мыши.
Примечание. Учащийся должен установить Git на своем компьютере, чтобы отправить код из VS Code в свой репозиторий. Это не устанавливается автоматически при нажатии Открыть в VS Code. Учащийся может скачать Git из Git download.
Использование пакета расширений GitHub Classroom
Расширение GitHub Classroom содержит два основных компонента: представление «Аудитории» и представление «Активное назначение».
Когда учащийся запускает расширение впервые, он автоматически переходит на вкладку обозревателя в VS Code, где можно увидеть представление «Активное назначение» вместе с деревом представлений файлов в репозитории.
Учащийся может передать свои фиксации в последнюю версию удаленного приложения, нажав на кнопку Изменения синхронизации, отображаемую при наведении указателя мыши на строку «Активное назначение». Это абстрагирует управление версиями с помощью Git, позволяя инструкторам преподавать основы Git в собственном темпе. Синхронизация изменений также активирует «Тесты» для запуска, если учитель настроил автоматическую классификацию для их назначения.
Узел «Группа» в разделе «Активное назначение» будет отображать участников группы, если назначение является групповым проектом. В нем также будут отображаться администраторы репозитория, которые могут помочь, если у учащегося возникли сложности. Для совместной работы над проектом учащийся может начать сеанс Live Share с любым пользователем в узле группы; при этом он сразу предоставит общий доступ ко всему контексту репозитория. Дополнительные сведения о Live Share и совместной работе с ним см. в статье «Что такое Visual Studio Live Share?».
После выполнения назначения учащийся также может перейти к другим назначениям и аудиториям. Их можно найти на вкладке GitHub.
krygin / github.md
В результате создан git-репозиторий на github для разрабатываемого проекта (лабораторной работы или домашнего задания):
- в репозитории одна ветка master (ветка по умолчанию, создается автоматически для любого репозитория)
- в ветке содержатся файлы .gitattributes и .gitignore — настройки git, для большинства проектов подходят настройки по умолчанию (подробнее можно почитать https://git-scm.com/docs/gitattributes и https://git-scm.com/docs/gitignore)
- в ветке содержатся файлы *.sln *.vcxproj и *.vcxproj.filters — файлы Visual Studio
konvod93 commented Jun 18, 2023
It is web3 project
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Footer
© 2023 GitHub, Inc.
You can’t perform that action at this time.