Прямая трансляция визуальной студии, как использовать

Обновлено: 21.11.2024

В этом руководстве мы покажем, как настроить и использовать расширение Live Share для Visual Studio Code. Это поможет вам эффективно работать с партнером в Team Labs. Расширение Live Share позволяет двум пользователям на двух разных компьютерах совместно использовать доступ к одному проекту Visual Studio Code (например, к лабораторному заданию). Оба пользователя могут просматривать и редактировать файлы в папке и могут наблюдать друг за другом в режиме реального времени.

Если вы работаете удаленно с партнером по лаборатории, наиболее эффективным для вас будет сочетание следующих инструментов:

Visual Studio Code с настроенным Live Share

Программа для видео- или аудиоконференций, например Zoom или Discord

Клиент SSH, работающий с приложением общего доступа к терминалу, например tshare, в сети CS

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

Обзор

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

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

Настройка

Плагин Live Share

Затем вам необходимо установить подключаемый модуль Live Share в Visual Studio Code. Откройте Visual Studio Code и щелкните значок "Расширения" слева.

Введите "поделиться в реальном времени" в поле поиска. Когда он появится, нажмите маленькую кнопку «Установить», соответствующую плагину Live Share. (Есть и другие связанные плагины, которые вы можете изучить, если хотите, но они нам не нужны для этого руководства.)

Подождите немного, пока не появится кнопка Live Share слева под кнопкой "Расширения". Нажмите кнопку Live Share. Теперь нам нужно настроить логин Live Share, и самый простой способ сделать это — попытаться начать сеанс. Нажмите «Начать сеанс совместной работы».

При этом вам будет предложено указать, какой метод входа вы хотите использовать. Выберите «Войти с помощью Github».

Откроется окно браузера, в котором вам будет предложено войти в свою учетную запись Github.

После входа в систему вы будете перенаправлены на страницу с запросом на авторизацию Visual Studio Code Live Share для подтверждения вашей личности. Нажмите кнопку авторизации.

На этом этапе, в зависимости от вашей операционной системы и ваших настроек, вам может быть предложен ряд рекомендаций. Сюда может входить связывание определенных типов ссылок с Visual Studio Code. Visual Studio Code также может запрашивать, чтобы ваш брандмауэр разрешал определенные соединения. Разрешите каждое из этих предложений. В конечном итоге вы вернетесь в окно кода Visual Studio. Если есть активный сеанс совместной работы, остановите его, нажав кнопку остановки в левом верхнем углу. (Он появляется, когда вы наводите на него указатель мыши.)

Теперь вы настроили плагин Live Share!

Использование Live Share

Теперь, когда вы настроили Live Share, вы можете использовать его для совместной работы со своим партнером по лаборатории. Один из вас будет ведущим; другой будет гостем. Помните: вы будете редактировать файлы хоста.

Размещение публикации в реальном времени

Если вы решите организовать сеанс обмена, вам следует начать с открытия своего лабораторного задания в Visual Studio Code.

Открыв лабораторию, нажмите кнопку Live Share слева и выберите "Начать сеанс совместной работы".

Вы получите сообщение о том, что ваша пригласительная ссылка скопирована в буфер обмена.

Просто отправьте ссылку своему партнеру, используя любой удобный для вас механизм (Slack, Zoom, Discord и т. д.), и попросите его нажать на нее. Теперь вы делитесь своим сеансом.

Присоединение к прямой трансляции

Если вы являетесь гостем сеанса, подождите, пока организатор отправит вам ссылку. После нажатия на ссылку должно открыться окно кода Visual Studio, и вы должны увидеть хост в качестве участника сеанса.

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

Совместное редактирование

Теперь, когда вы и ваш партнер используете один и тот же сеанс, вы можете видеть, как друг друга редактируют файлы в вашем проекте. Например, если оба пользователя редактируют один и тот же файл, организатор может увидеть следующее:

С другой стороны, гость может увидеть это:

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

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

Что нужно помнить

Вот оно! Теперь вы оба можете редактировать один и тот же проект. Вот что нужно помнить:

Редактируемые вами файлы будут сохраняться только в сетевой учетной записи CS хоста. Вы по-прежнему должны git add , git commit и git push , как и раньше.

Если вы хотите поменяться ролями, новый хост должен будет получать обновления с Github Swarthmore. Вам нужно будет запустить git pull в каталоге репозитория, если вы уже клонировали его.

Кнопка привязывает вас к другу. Обязательно отключите его, если это не то, что вам нужно!

Обратите внимание, что это не обязательно дает вам возможность совместного использования терминала. Чтобы поделиться своим терминалом с вашим партнером, вы можете использовать такую программу, как tshare .

Live Share – это расширение для Visual Studio Code, которое обеспечивает совместную работу разработчиков в режиме реального времени. Это дает пользователям возможность поделиться сеансом с кем-то еще, что позволяет им редактировать код, а также совместно использовать сервер и сеанс отладки.

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

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

Предпосылки

Прежде чем приступить к работе с этим руководством, вам потребуется следующее:

Учетная запись Microsoft или GitHub.
Загрузите и установите последнюю версию Visual Studio Code.

Шаг 1 — Загрузка расширения

Примечание. Современные версии Visual Studio Code теперь включают Live Share по умолчанию. Существует также пакет расширений Live Share, который объединяет расширения Live Share и Live Share Audio.В этом руководстве основное внимание будет уделено расширению Live Share.

Первым шагом к использованию Live Share является установка его в качестве расширения. В VS Code вы можете открыть вкладку расширений, найти Live Share, нажать «Установить», а затем перезагрузить после завершения установки.

После этого вам нужно будет войти в систему. На данный момент вы можете войти в систему с учетной записью Microsoft или GitHub.

Чтобы войти в систему, используйте кнопку "Войти" в нижней строке состояния со значком человечка.

Шаг 2. Публикация сеанса и присоединение к нему

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

Начните с того, что щелкните свое имя пользователя в нижней строке состояния и выберите «Начать сеанс совместной работы» из доступных вариантов. Кроме того, вы можете открыть палитру команд ( CMD+SHIFT+P на Mac, CTRL+SHIFT+P на Windows) и ввести «Начать сеанс совместной работы»

Вы получите уведомление о том, что ваша ссылка для приглашения была скопирована в буфер обмена.

Поделитесь этой ссылкой с кем-нибудь, чтобы пригласить его на сеанс.

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

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

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

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

Шаг 3. Ограничение соавторов

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

К счастью, Live Share дает вам возможность ограничить, какие файлы могут просматривать и редактировать соавторы.

Создайте файл .vsls.json, чтобы ограничить соавторов. Базовая конфигурация будет выглядеть примерно так:

Больше всего нас интересуют два ключа: excludeFiles и hideFiles . excludeFiles — это массив имен файлов, к которым вы не хотите, чтобы пользователи имели доступ. hideFiles похож, за исключением того, что соавторы смогут видеть скрытые файлы при определенных обстоятельствах. Дополнительные сведения о безопасности см. в документации по управлению доступом к файлам и видимости.

Шаг 4 — Общий доступ к серверу

При локальной работе с приложением может быть сложно поделиться с другими. Вы можете проверить код на GitHub и попросить другого человека клонировать его, но тогда ему все равно придется устанавливать зависимости и запускать сервер самостоятельно.С помощью Live Share вы можете запустить сервер локально, и другой человек сможет получить доступ к тому же работающему приложению.

Как пригласивший запустите свой сервер как обычно. Затем щелкните имя пользователя в нижней строке состояния и выберите Общий доступ к серверу. Либо откройте палитру команд и введите Общий доступ к серверу .

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

Шаг 5 — Общий доступ к терминалу

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

Общий доступ к терминалу аналогичен общему доступу к вашему серверу. Как и в случае с другими функциями, выберите параметр «Поделиться терминалом». После этого выберите разрешения только для чтения или чтения/записи для соавторов.

После предоставления общего доступа к терминалу соавторы смогут просматривать (и редактировать, если применимо) терминал. На этом снимке экрана показан вид терминала приглашенных после того, как пригласивший вывел сообщение на экран:

Здесь вы можете показать приглашенному, как запустить сервер разработки, построить систему или что-то еще, что может иметь значение.

Заключение

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

Хотите узнать больше? Присоединяйтесь к сообществу DigitalOcean!

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

Live Share позволяет вам быстро совместно работать с другом, одноклассником или преподавателем над одним и тем же кодом без необходимости синхронизации кода или настройки одних и тех же инструментов разработки, параметров или среды.

Что касается Live Share, то лучше увидеть, чем поверить. Посмотрите это видео, чтобы увидеть Live Share в действии:

Когда вы делитесь сеансом совместной работы, человек, с которым вы работаете, видит контекст рабочей области в своем редакторе. Это означает, что ваш одноклассник может прочитать код, которым вы поделились, без необходимости клонировать репозиторий или устанавливать какие-либо зависимости, на которые опирается ваш код. Они могут помочь вам с кодом в знакомой им среде Visual Studio Code.

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

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

Подробнее о том, что можно делать с помощью Live Share, см. в руководстве или кратком руководстве ниже.

Начало работы с Live Share

Чтобы начать использовать Live Share в VS Code, вам необходимо загрузить пакет расширений Live Share из Магазина расширений.

Этот пакет расширений включает в себя все необходимое для совместного редактирования и отладки в режиме реального времени, включая интегрированный аудио- и текстовый чат.Это дает вам и вашей команде/классу возможность установки одним щелчком мыши, чтобы начать парное программирование, удаленную проверку кода, проведение интерактивных лекций и многое другое, не выходя из Visual Studio Code.

После входа в свою учетную запись GitHub вы увидите значок Live Share на панели действий.

Начало сеанса Live Share

Если вы выберете «Начать сеанс совместной работы» в меню «Сведения о сеансе», ссылка-приглашение на ваш сеанс будет автоматически скопирована в буфер обмена. Вы можете поделиться этой ссылкой со всеми, с кем хотите сотрудничать, если у них также есть VS Code и загруженный пакет расширения Live Share.

Когда ваш одноклассник присоединится к сеансу, вы получите уведомление, и его имя появится в разделе "Участники".

Присоединение к сеансу Live Share

Если вы выберете «Присоединиться к сеансу совместной работы» в меню «Сведения о сеансе», вы сможете ввести полученный URL-адрес.

Вы должны иметь возможность видеть и взаимодействовать с кодом вашего одноклассника на своем экране!

Готовы к совместной работе с Live Share в Visual Studio? Если это так, вы находитесь в правильном месте! В этой статье мы покажем вам, как установить расширение Visual Studio Live Share для Visual Studio.

Все действия по совместной работе, описанные в этой серии статей, включают одного организатора сеанса совместной работы и одного или нескольких гостей. Организатор — это пользователь, начавший сеанс совместной работы, а любой присоединившийся — гость.

Ищете сокращенное резюме? Вместо этого ознакомьтесь с общим доступом или присоединитесь к кратким руководствам.

Знаете ли вы, что можете присоединиться к собственному сеансу совместной работы? Это позволяет вам попробовать Live Share самостоятельно или запустить экземпляр Visual Studio или VS Code и подключиться к нему удаленно! Вы даже можете использовать одно и то же удостоверение в обоих экземплярах. Проверьте это!

Установка

Прежде чем начать, вам необходимо установить Visual Studio 2019 или Visual Studio 2017 15.6 или более поздней версии в Windows 7, 8.1, 10 или 11. Однако рекомендуется Visual Studio 15.7+, так как эта версия поддерживает локальные поддержка отмены/возврата.

Начать работу очень просто:

Для Visual Studio 2019

Для Visual Studio 2017

Загружая и используя Visual Studio Live Share, вы соглашаетесь с условиями лицензии и заявлением о конфиденциальности. См. раздел об устранении неполадок, если у вас возникнут проблемы.

Для совместной работы вам необходимо войти в Visual Studio Live Share, чтобы все знали, кто вы. Этот вход является чисто мерой безопасности и не разрешает вам участвовать в какой-либо маркетинговой или другой исследовательской деятельности. Вы можете войти, используя:

Visual Studio по умолчанию использует вашу учетную запись персонализации. Если вы уже вошли в Visual Studio, этот шаг можно пропустить. В противном случае войдите в систему, как обычно.

Если вы хотите использовать другую учетную запись для входа, отличную от вашей учетной записи персонализации Visual Studio, выберите Инструменты > Параметры > Live Share > Общие. Выберите учетную запись пользователя, а затем выберите многоточие справа, чтобы переключить учетные данные.

Выбор внешней учетной записи позволяет выбрать учетную запись, не поддерживаемую функцией персонализации Visual Studio, например GitHub. Браузер автоматически появляется при первом использовании функции Live Share, чтобы вы могли завершить вход.

Знаете ли вы, что можно перейти в Инструменты > Параметры > Live Share > Общие, чтобы просмотреть все настройки Live Share по умолчанию? Настройте процесс совместной работы в соответствии с вашими потребностями! Вы также можете попробовать новые функции Live Share, выбрав «Дополнительно» > «Функции» > «Инсайдеры» в общих настройках Live Share!

Если у вас возникнут проблемы, ознакомьтесь с дополнительными советами, посвященными устранению неполадок.

Ограничения для гостей

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

Читайте также: