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» («Ветки»).
Работа с Git в Visual Studio Code
Если вы вёрстаете сайты или пишете код в редакторе Visual Studio Code, то Git за пять минут настраивается прямо внутри редактора. Не нужно запоминать команды для консоли, не нужно тыкать в лишние приложения.
Следуйте инструкции и всё получится.
Клонируем проект
Перед тем, как начать работу с кодом вашего проекта, необходимо клонировать его из GitHub к себе на компьютер. Слева в боковой панели VS Code выбираем вкладку Explorer. Затем нажимаем кнопку Clone Repository.
Появится строка для ввода команд, в которой ничего не нужно заполнять. Выбираем единственный пункт «Clone from GitHub».
Авторизация на GitHub
Чтобы VS Code получил доступ к вашему репозиторию, нужно пройти авторизацию на GitHub — то есть показать ему, что у вас есть все права для работы с репозиторием.
Достаточно выполнить это действие только один раз, потом редактор кода будет синхронизироваться самостоятельно.
После предыдущего шага появится окно с уведомлением, что расширению необходимо получить доступ к сайту для авторизации. Подтверждаем действие с помощью кнопки Allow.
Откроется окно браузера. Нажимаем зелёную кнопку Authorize, чтобы продолжить.
Поверх браузера появится всплывающее окно, которое запросит разрешение открыть URI. Нажимаем кнопку Open. Перед этим можно поставить галочку, если вы в следующий раз хотите пропустить этот шаг и быстрее завершить авторизацию, но это необязательно.
Статус Success на вкладке в браузере подтвердит, что авторизация прошла успешно. Теперь браузер можно закрыть.
Выбираем проект
Возвращаемся к работе с редактором. В той же вкладке Explorer в строке ввода выбираем необходимый проект из списка тех, что появились после успешной синхронизации. Например, нас интересует редактирование кода для проекта Barbershop.
Папка для проекта
VS Code предложит выбрать папку, в которой вы собираетесь хранить проект. Выберите папку, кнопка Select Repository Location подтвердит выбор, после чего проект будет склонирован.
Начало работы с кодом
Чтобы начать работу, откройте проект кнопкой Open во всплывающем окне. Выбор кнопки Open in New Window создаст новое окно. Это полезно, если у вас уже открыт другой проект, и вы собираетесь работать с несколькими проектами одновременно.
Теперь структура проекта появилась слева, проект готов к работе и можно начинать.
Делаем commit
Для начала добавим в проект файл .editorconfig и пропишем внутри правила для редактора VS Code. Чтобы добавить новый или изменённый файл в коммит, выбираем вкладку Git и нажимаем на кнопку «+» рядом с этим файлом.
В текстовое поле вводим сообщение «Добавляет editorconfig», которое подскажет, что делает этот коммит.
Теперь нажимаем комбинацию клавиш Ctrl + Enter или кликаем на галочку над текстовым полем ввода, чтобы записать наш коммит.
Push
После создания одного или нескольких коммитов обязательно сохраняем этап работы, чтобы не потерять его. Все изменения нужно отправить вместе с коммитом в удалённый форк. Нажимаем кнопку с тремя точками и выбираем Push.
Отлично! Вы успешно отправили все изменения в форк. Не забудьте перейти в GitHub, чтобы создать пуллреквест и вмёрджить все изменения проекта.
Pull
Чтобы продолжить работу над проектом, надо подтянуть все изменения из удалённого репозитория. Снова нажимаем на кнопку с тремя точками, но теперь выбираем Pull.
Проект подтянул изменения, можно продолжить работу.
Полезные статьи о Git
- Шпаргалка по Git. Решение основных проблем
- Введение в системы контроля версий
- Как работать с GitHub в большой команде
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
5 частых ошибок при работе с Git
Git — это важный и довольной понятный инструмент для контроля версий в разработке программного обеспечения, но иногда он может выдавать ошибки, которые сбивают с толку. Если вы столкнулись с одной из этих ошибок, попробуйте наше решение.
- 27 августа 2023
Работа с Git через консоль
Задача: форкнуть репозиторий в GitHub, создать ветку и работать с кодом.
Сразу появляется много вопросов — что такое GitHub, какие для этого нужны команды, зачем, а главное, как всем этим пользоваться? Давайте разберёмся.
Когда мы пишем код, мы постоянно туда что-то добавляем, удаляем, и иногда всё может ломаться. Поэтому перед любыми изменениями стоит сделать копию проекта. Если собирать проекты в папки с именами проект1 , проект1_финал и проект2_доделка , вы быстро запутаетесь и точно что-нибудь потеряете. Поэтому для работы с кодом используют системы контроля версий.
Система контроля версий — программа, которая хранит разные версии одного документа, позволяет переключаться между ними, вносить и отслеживать изменения. Таких систем много и все они работают по принципу компьютерной игры, где вы можете вернуться к месту сохранения, если что-то пошло не так.
Git — самая популярная система контроля версий. С Git можно работать через командную строку (или терминал). В каждой системе своя встроенная программа для работы с командной строкой. В Windows это PowerShell или cmd, а в Linux или macOS — Terminal. Вместо встроенных программ можно использовать любую другую — например, Git Bash в Windows или iTerm2 для macOS.
Как работает терминал: мы вводим команду и получаем ответ компьютера — или всё получилось, или где-то ошибка, или нужно ввести что-то ещё — например, пароль. Поэтому большая часть этой инструкции состоит из команд для терминала. Сначала будет непривычно, но вам понравится.
Но давайте по порядку — установим Git на компьютер.
- 7 августа 2023
GitHub Desktop: обзор и первая настройка
Самая короткая инструкция о том, как сохранить файлы в GitHub и ничего не сломать. И самое главное — никакой консоли, всё через окошки и с помощью мышки. Для этого используем GitHub Desktop.
Внимание! GitHub Desktop не работает на Windows 7×32, поэтому если у вас эта версия системы, обновитесь до Windows 10 или воспользуйтесь программой GitKraken.
В этой статье идёт рассказ о системах контроля версий. Если вы совсем ничего о них не знаете, прочитайте статьи «Словарь терминов для Git и GitHub» и «Введение в системы контроля версий», чтобы понять терминологию и разобраться, зачем мы вообще это делаем.
- 7 августа 2023
Как склеить коммиты и зачем это нужно
Когда вы открываете пулреквест и ваш код смотрят и комментируют другие, бывает нужно что-то исправить. Обычно такие изменения мы комментируем сообщением вроде «Увеличил шрифт на 2px » или «Поменял оттенок фона в шапке». Такие маленькие изменения интересны, только пока они в пулреквесте. Ревьювер (человек, который смотрит ваш код), может легко узнать, что и когда вы изменили, а не читать весь diff заново, а вы можете легко откатить коммит, если он не нужен. Но когда приходит время вливать пулреквест, эти маленькие коммиты теряют свою ценность. Поэтому лучше их склеить в один.
- 14 июня 2023
Основные команды для работы с Git
Работа с Git через терминал — это обязательная часть практики фронтендера. Однако для начинающих разработчиков этот инструмент может показаться сложным. Чтобы вам было проще учиться, мы собрали основные команды для работы с Git.
☝ В некоторых командах мы будем писать URL-адрес удалённого репозитория и название проекта в квадратных скобках, вот так — [ссылка на удалённый репозиторий] . Мы делаем это только для наглядности. Вам квадратные скобки ставить не нужно.
- 22 февраля 2023
Как бесплатно залить сайт на GitHub Pages
Допустим, вы сделали какой-то проект, например, собрали себе портфолио по шаблону, и теперь хотите выложить его в интернет. Если вы использовали только HTML и CSS, то необязательно платить деньги, чтобы загрузить сайт куда-то. Вы можете бесплатно выложить сайт на сервис GitHub Pages. Всё, что нужно — аккаунт на Гитхабе.
- 29 ноября 2022
Регистрация на GitHub
Создание нового аккаунта на GitHub состоит всего из 10 шагов — и вся регистрация занимает меньше пяти минут.
�� Обратите внимания, что интерфейс Гитхаба регулярно меняется, так что внешне он может отличаться, когда вы читаете эту статью.
Начало регистрации. Так выглядит главный экран Гитхаба, когда вы не зарегистрированы. Главное, что вам нужно заметить — большое поле для ввода почты и зелёная кнопка. Вводите свой адрес и переходите на следующий шаг.
Ввод почты. На следующем шаге начинается регистрация. Подтвердите свою почту с прошлого шага и нажмите Continue (Продолжить).
Пароль. Придумайте сложный пароль, чтобы его никто не взломал. Например, Гитхаб просит, чтобы в пароле было не меньше 15 символов или 8 символов, но тогда должны быть и латинские буквы, и цифры.
Имя профиля. Теперь выберите имя вашего профиля — оно будет использоваться в интерфейсе, в коммитах и комментариях. То есть именно так вас будет видеть любой пользователь Гитхаба. Для разработчика Гитхаб вместо визитки, так что выбирайте что-нибудь приличное, лучше, если ник будет совпадать с вашими никнеймами на других сайтах.
Если имя недоступно, Гитхаб вам об этом скажет. А если доступно — жмите Continue.
Рассылки. Дальше Гитхаб спросит, хотите ли вы подписаться на рассылку об обновлениях. Впечатайте латинскую У, если хотите, или n, если письма вам не нужны. Готовы спорить, мы знаем, что вы выберете.
Капча, чтобы проверить, что вы не робот. Нам при регистрации пришлось два раза выбрать спиральную галактику — не сильно сложно. А если вы робот — не причиняйте вред человеку своим действием или бездействием.
Подтверждение почты. После капчи вам придёт письмо с кодом на почту. Введите его на следующей странице.
Вот здесь. Главное — не ошибайтесь.
Общая информация о вас и вашей команде. Если вы регистрируете аккаунт для себя, выбирайте Just me. Второй пункт — студент вы или учитель. Выбирайте «Студент», если вы не учитель.
Интересы. Дальше Гитхаб спросит вас об интересах — то есть о том, зачем вы регистрируете аккаунт. Из вариантов:
- Совместная разработка и код ревью.
- Автоматизация. CI/CD, API и другие админские вещи.
- Безопасность. Двухфакторная аутентификация, ревью, сканирование кода и списки зависимостей.
- Приложения. Выбирайте, если будете использовать GitHub Mobile, CLI, Desktop.
- Управление проектами. Проекты, метки, ишьи, вики и другие управленческие дела.
- Управление командами. Организации, приглашения, роли, домены.
- Сообщество. Выбирайте, если Гитхаб интересен вам как соцсеть.
Вы можете выбрать несколько пунктов или пропустить и не указывать ничего, для этого пролистайте страницу вниз для кнопки Skip customization.
Выбор тарифа. На выбор бесплатный тариф или платный GitHub Pro. Практика показывает, что для большинства личных проектов хватит бесплатного тарифа. В сентябре 2022 в него входили:
- Безлимитное количество репозиториев.
- 2000 минут CI/CD в месяц.
- 500 мегабайт места в хранилище пакетов.
- Поддержка сообщества.
Выбор тоже можно пропустить, тогда у вас будет бесплатный тариф.
Всё готово. Теперь у вас есть аккаунт. Можете создать репозиторий и работать с ним, или склонировать чужой. А для работы у вас есть несколько удобных вариантов:
- 28 сентября 2022
Markdown за 5 минут
Маркдаун, он же markdown — удобный и быстрый способ разметки текста. Маркдаун используют, если недоступен HTML, а текст нужно сделать читаемым и хотя бы немного размеченным (заголовки, списки, картинки, ссылки).
Главный пример использования маркдауна, с которым мы часто сталкиваемся — файлы readme.md , которые есть в каждом репозитории на Гитхабе. md в имени файла это как раз сокращение от markdown.
Другой частый пример — сообщения в мессенджерах. Можно поставить звёздочки вокруг текста в Телеграме, и текст станет полужирным.
Версии маркдауна отличаются, поэтому перепроверьте, какую вы используете.
- 5 октября 2021
Шпаргалка по Git. Решение основных проблем
Поговорим о решении проблем с Git.
- 11 декабря 2020
Полезные команды для работы с Git
Работа с Git через терминал — это обязательная часть практики каждого современного фронтенд-специалиста. Однако, для начинающих это может показаться сложным. Чтобы упростить процесс обучения, мы собрали для вас все самые необходимые команды, которые пригодятся в работе с Git на первое время.
- 1 января 2020
Удаленная отладка в Visual Studio Code по SSH
- Установите в Visual Studio Code расширение Remote Development.
- В Visual Studio Code нажмите F1 и в пункте Remote-SSH: Connect to Host… введите команду :
ssh name.ai0001011-00560@ssh-jupyter.aicloud.sbercloud.ru -p 2222 -i path/to/private_id_rsa_key.txt
- Руководство по удаленной отладке через SSH в Visual Studio Code
- Команда для подключения по SSH
- Расширение для работы на удаленном хосте
- Инструкция по выбору интерпретатора
Была ли статья полезной?
© Авторские права 2023, Cloud.ru
Расширение Live Share для Visual Studio Code
Live Share – это расширение для Visual Studio Code, которое обеспечивает совместную работу над кодом в режиме реального времени. Это расширение дает пользователям возможность совместно использовать сеанс с другими, позволяя всем редактировать код, а также совместно использовать сервер и режим отладки.
В этом руководстве мы поговорим о том, как работает Live Share.
Примечание: Лицо, отправляющее приглашение на сеанс, в этом руководстве будет называться хозяином, а лицо, принявшее приглашение, – гостем.
Требования
Прежде чем приступить к работе руководством, вам понадобится:
- Учетная запись Microsoft или GitHub.
- Последняя версия Visual Studio Code, загрузить которую можно по этой ссылке.
1: Загрузка расширения Live Share
Примечание: Современные версии Visual Studio Code включают Live Share по умолчанию. Существует также пакет расширений Live Share, который объединяет Live Share и Live Share Audio. В этом руководстве основное внимание будет уделено расширению Live Share.
Для начала мы должны установить Live Share в качестве расширения. В интерфейсе VS Code вы можете открыть вкладку расширений, найти Live Share, нажать кнопку «Установить», а затем перезагрузиться, когда установка будет завершена.
После этого вам нужно будет войти в систему. На данный момент для входа вы можете выбрать учетную запись Microsoft или GitHub. Чтобы войти, нажмите кнопку Sign In в нижней строке состояния.
2: Совместная работа в сеансе
После того, как вы и другие члены вашей команды вошли в систему, вы можете создать сеанс, чтобы поделиться им с остальными.
Важно! Делитесь своими сеансами только с теми людьми, которым доверяете. Позже вы убедитесь, что предоставленные вами привилегии могут причинить вред вашему коду при неправильном использовании.
Для начала нажмите на имя вашего пользователя в нижней строке состояния и выберите Start Collaboration Session. Кроме того, вы можете открыть палитру команд (CMD+SHIFT+P в Mac, CTRL+SHIFT+P в Windows) и ввести Start Collaboration Session вручную.
Вы получите уведомление о том, что ваша пригласительная ссылка скопирована в буфер обмена.
Поделитесь этой ссылкой с теми пользователями, которых вы хотели бы пригласить в ваш сеанс.
Чтобы принять приглашение с точки зрения гостя, кликните на свое имя пользователя в нижней строке состояния и выберите Join Collaboration Session. Кроме того, вы можете открыть палитру команд и ввести Join Collaboration Session вручную.
При появлении запроса введите ссылку на совместный сеанс, отправленную вам хозяином. В свою очередь, хозяин сеанса будет уведомлен, когда кто-то присоединится к работе.
По умолчанию при подключении к сеансу гость будет автоматически следовать по коду за хозяином. Это будет происходить до тех пор, пока гость не сделает свой первый самостоятельный ход. С этого момента обе стороны смогут свободно перемещаться по коду и редактировать его по своему усмотрению. Кроме того, оба пользователя будут видеть маркер, показывающий, где находится другой редактор.
Также вы можете выбрать фрагмент кода и выделить его – это отобразится на компьютере другого пользователя. Эта функция позволяет, например, привлечь внимание других разработчиков к конкретному разделу кода.
3: Ограничение доступа
По умолчанию в совместном сеансе у гостей есть доступ для редактирования всех файлов в рабочей области. Одно дело – доверять кому-то редактировать определенные файлы, но открывать другим пользователям все свое рабочее пространство совершенно не обязательно.
К счастью, Live Share позволяет ограничивать диапазон файлов, которые могут просматривать и редактировать ваши соавторы.
Создайте файл .vsls.json, чтобы ограничить доступ соавторов. Его базовая конфигурация будет выглядеть примерно так:
Два ключа, которые интересуют нас больше всего, – это excludeFiles и hideFiles. excludeFiles – это массив имен файлов, к которым вы не хотите открывать доступ. hideFiles работает аналогично, но перечисленные в нем файлы соавторы могут видеть при определенных обстоятельствах. Прочтите документацию по управлению доступом к файлам, если хотите узнать больше по этой теме.
4: Совместное использование сервера
При работе над приложением на локальной машине делиться сеансами с другими может быть сложно. Вы можете поместить код в GitHub, а другой человек клонирует его, но тогда ему все равно придется устанавливать зависимости и запускать сервер самостоятельно. С помощью Live Share вы можете запустить сервер локально, а другой пользователь сможет получить доступ к тому же запущенному приложению.
В роли хозяина запустите свой сервер. Затем кликните на имя пользователя в нижней строке состояния и выберите Share Server, либо откройте палитру команд и введите Share Server.
Как гость вы можете перейти на localhost и на соответствующий порт, чтобы увидеть сервер.
5: Совместное использование терминала
Не исключено, что однажды вы захотите научить кого-то пользоваться командами в терминале (например, перемещаться по файловой системе, работать с npm, запускать сервер разработки и т.п.). Это может быть сложно сделать удаленно. Для решения этой проблемы Live Share также включает функцию совместного использования терминала.
Совместное использование терминала работает примерно так же, как совместное использование сервера. Выберите опцию Share Terminal. После этого установите для соавторов разрешение read only или read/write.
Получив доступ к терминалу, соавторы смогут просматривать код (и редактировать его, если вы дали им такое право).
Если вы выступаете в роли хозяина, вы можете показать гостю, как запустить сервер разработки, систему сборки или что-нибудь еще.
Заключение
В расширение Live Share включено множество полезных функций. Visual Studio Code быстро набирает популярность среди веб-разработчиков, а это расширение потенциально меняет подход к обучению, совместной работе и отладке.