Live share visual studio как использовать

Обновлено: 07.07.2024

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, чтобы ограничить доступ соавторов. Его базовая конфигурация будет выглядеть примерно так:

4: Совместное использование сервера

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

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

Как гость вы можете перейти на localhost и на соответствующий порт, чтобы увидеть сервер.

5: Совместное использование терминала

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

Совместное использование терминала работает примерно так же, как совместное использование сервера. Выберите опцию Share Terminal. После этого установите для соавторов разрешение read only или read/write.

Получив доступ к терминалу, соавторы смогут просматривать код (и редактировать его, если вы дали им такое право).

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

Заключение

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

Вас приветствует Visual Studio Live Share! Live Share позволяет редактировать и отлаживать код совместно с другими пользователями в реальном времени независимо от используемых вами языков программирования и создаваемых типов. С помощью этого расширения вы можете мгновенно и безопасно поделиться текущим проектом, а затем, при необходимости, — сеансами отладки, экземплярами терминалов, веб-приложениями localhost, голосовыми звонками и многим другим!

Готовы начать? Совместная работа в команде должна быть настолько естественной и быстрой, что от нее должно быть трудно отказаться! По этой причине мы максимально упростили первые шаги в Visual Studio Live Share — вы можете начать делиться своими идеями и результатами работы без всякого труда.

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

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

1. Установка расширения

Установить расширение несложно. Просто выполните указанные ниже действия.

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

2. Войти

В Visual Studio Code:

В Visual Studio сделайте следующее:

В VS Code запустится браузер и появится уведомление с запросом на вход. Выполните вход в браузере, после чего закройте его.

Всплывающее уведомление с запросом на вход в веб-браузере

Для пользователей Linux. в старых версиях Live Share (0.3.295 и более ранних) может появиться запрос на ввод кода пользователя. Обновите расширение до последней версии или щелкните ссылку "Возникли проблемы?" после входа, чтобы просмотреть код. Дополнительные сведения см. здесь.

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

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

3. Открытие папки, проекта или решения

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

4. (Необязательно) Обновление скрытых или исключенных файлов

По умолчанию Live Share скрывает для гостей все файлы и папки, указанные в файлах GITIGNORE, в общих папках. Скрытые файла блокирует его отображение в дереве файлов гостя. Исключение файла является более строгим правилом. Оно запрещает гостю открывать файл в Live Share при выполнении таких действий, как переход к определению или пошаговое выполнение кода в файле при отладке или отслеживании. Если нужно скрыть или исключить разные файлы, в проект можно добавить файл VSLS.JSON с соответствующими параметрами. Подробные сведения см. в разделе, посвященном управлению доступом к файлам и видимостью.

5. Запуск сеанса совместной работы

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

В Visual Studio Code:

В Visual Studio сделайте следующее:

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

6. (Необязательно) Включение режима только для чтения

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

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

В Visual Studio Code:

Вариант для доступа только на чтение в Visual Studio Code

В Visual Studio сделайте следующее:

Вариант для доступа только на чтение в Visual Studio

В VS Code сеанс только для чтения можно также запустить с вкладки мини-приложения Live Share.

Всплывающее уведомление с просьбой войти в сеанс только для чтения

7. Отправка ссылки приглашения

Отправьте ссылку пользователям, которых вы хотите пригласить в сеанс, по электронной почте, через Slack, Skype и т. д. Открыв ссылку в браузере, пользователи смогут присоединиться к сеансу совместной работы, в рамках которого вы предоставили общий доступ к содержимому папки, проекта или решения. Учитывая уровень доступа, предоставляемый гостям в рамках сеансов Live Share, приглашать следует только пользователей, которым вы доверяете, и продумывать возможные последствия.

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

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

8. (Необязательно) Утверждение доступа гостя

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

В Visual Studio Code:

Уведомление о присоединении в Visual Studio Code

В Visual Studio сделайте следующее:

Уведомление о присоединении в Visual Studio

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

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

9. Совместная работа

Вот и все! После того как гость присоединится к вам, вы можете попробовать сделать следующее:

  1. Независимо друг от друга перейдите к разным файлам в проекте и внесите несколько изменений.
  2. Проследите за тем, как гость выполняет прокрутку, переходит к разным файлам и вносит изменения.
  3. Откройте сеанс совместной с гостем отладки.
  4. Предоставьте доступ к серверу, например, чтобы проверить работающее на нем веб-приложение.
  5. Предоставьте доступ к терминалу и выполните несколько команд.

Сведения о выполнении этих и других действий можно найти в документации по расширениям Visual Studio Code и Visual Studio.

Возникли проблемы? Ознакомьтесь с разделом по устранению неполадок или отправьте отзыв.

Многие команды используют такие инструменты, как Slack и Discord, чтобы оставаться на связи как группа. Контроль версий позволяет людям совместно работать над проектом и синхронизировать его с одним и тем же онлайн-хранилищем.

Эти инструменты являются фантастическими, но что если бы был способ объединить эти понятия в IDE? У Microsoft есть ответ в Live Share для кода Visual Studio (VS) и Visual Studio. Сегодняшнее руководство будет посвящено VS Code.

Что такое VS Live Share?

Пакет VS Live Share Extension содержит аудио, позволяющее пользователям делиться вызовами, а также интеграции для Slack и Discord. Наряду с очевидными преимуществами для удаленных работников, Live Share также является образовательным инструментом. Совместно используемые терминалы и серверы делают Live Share идеальным учебным пособием в классе.

Настройка кода Visual Studio для совместной работы

VS Code бесплатен и доступен для Windows, MacOS и Linux. Если вы еще не являетесь пользователем VS Code, скачайте и установите его, прежде чем продолжить.

Новые логотипы появляются на боковой панели

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

Настройка сеанса общего доступа в коде VS

визуальный код студии

Настройка сеанса обмена довольно проста. Откройте вкладку VS Live Share на левой панели инструментов. Детали сессии окно дает три варианта для обмена кодом:

  • Присоединиться к сеансу сотрудничества: Используйте это, чтобы присоединиться к чьему-либо сеансу, если они дали вам URL.
  • Начать сеанс совместной работыИспользуйте это для создания собственного сеанса совместной работы, где другие пользователи могут редактировать код.
  • Начать сеанс совместной работы только для чтенияИспользуйте это для создания сеанса совместной работы, в котором пользователи могут просматривать, но не редактировать код.

Это не важно, хотя рекомендуется для скорости и стабильности соединения.

Запрос брандмауэра для быстрого соединения

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

Контекстное окно совместного доступа к сеансу Live Share

Скопируйте ссылку в буфер обмена и передайте ее другу или коллеге, у которой также установлен VS Live Share, и вы готовы к работе!

Совместная работа с базовым кодом в VS Code

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

Гость только для чтения по имени Джимми присоединяется к чату

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

Live Share в окне прогресса


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

Удаленная подсветка текста участника


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

Отслеживание и фокусирование сотрудников

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

Точно так же, нажав на маленький мегафон на панели «Сведения о сеансе» Фокусы участники к вашему текущему мнению.

Мегафон фокусирует всех участников на ваш взгляд


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

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

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


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

Щелкнув по красному символу отключения, вы покидаете комнату чата, хотя она останется доступной, пока сеанс остается активным.

Слабая интеграция с кодом VS

Настроить Slack в VS Code просто. Нажмите на логотип Slack на левой панели и выберите Настройка Slack, Это приведет вас к окну браузера, чтобы авторизовать VS Code для доступа к рабочей области.

Авторизация приложения с Slack

Вы должны быть администратором, чтобы авторизовать приложение VS Code Slack. Как только он будет связан, рабочее пространство Slack будет отображаться как другая вкладка в VS Code.

Безопасность и конфиденциальность в VS Live Share

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

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

Разделение доступа к вашему терминалу может быть рискованным делом.


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

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

11 лучших сайтов для бесплатных онлайн курсов по компьютерному программированию



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

все еще важно.

Узнайте больше о: инструментах для совместной работы, коде Visual Studio.

Сегодня (по пекинскому времени) была выпущена Visual Studio 2019. На этот раз она предлагает более интересную функцию Live Share, которую можно использовать для улучшения совместной разработки. Основная функция:

4624570-9fd3a66695538b00.jpg

Для получения дополнительной информации см. Официальное введение:

2. Примечания к коду Visual Studio

Live Share можно использовать в Visual Studio 2019 и Visual Studio Code.

Для использования в Visual Studio Code вам необходимо установить расширения:

4624570-8725d93abdf27153.jpg

После завершения установки выполните управление сеансом здесь:

4624570-49fb5620fa43a2cb.jpg

3. Как пользоваться

1. Создайте сеанс и присоединитесь к нему

(1)Visual Studio 2019

В Visual Studio 2019 вы можете напрямую щелкнуть Live Share в верхнем правом углу, чтобы создать сеанс. После завершения создания ссылка сеанса (другие люди, присоединившиеся по ссылке) будет автоматически скопирована в буфер обмена.

4624570-f55da3b26accfb14.jpg

Вы также можете создать сеанс через Файл -> Начать сеанс Live Share.

Visual Studio 2019 присоединиться к сеансу через Файл -> Присоединиться к сеансу Live Share

(2)Visual Studio Code

Откройте интерфейс Live Share. «Начать сеанс совместной работы», чтобы создать сеанс, и «Присоединиться к сеансу совместной работы», чтобы присоединиться к сеансу.

4624570-d29623f00f559941.jpg

2. Совместная демонстрация Visual Studio 2019 и Visual Studio Code.

В этой демонстрации используется Visual Studio 2019 для создания сеанса, и Visual Studio Code присоединяется к сеансу.

1. Создайте проект с Visual Studio 2019.

4624570-e16e6f2aed262ba4.jpg

2. Нажмите «Live Share» в правом верхнем углу, чтобы создать сеанс.

4624570-7dd03b2a3c1ce5f6.jpg

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

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