Расширение Live Share для Visual Studio Code

Development | Amber | Комментировать запись

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

{
    "$schema": "http://json.schemastore.org/vsls",
    "gitignore": "none",
    "excludeFiles": [],
    "hideFiles": []
}

Два ключа, которые интересуют нас больше всего, – это 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 быстро набирает популярность среди веб-разработчиков, а это расширение потенциально меняет подход к обучению, совместной работе и отладке.

Читайте также: Форматирование кода в Visual Studio Code с помощью ESLint