Vs code live server открыть с телефона
Многие команды используют такие инструменты, как 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.
- Начать сеанс совместной работыИспользуйте это для создания собственного сеанса совместной работы, где другие пользователи могут редактировать код.
- Начать сеанс совместной работы только для чтенияИспользуйте это для создания сеанса совместной работы, в котором пользователи могут просматривать, но не редактировать код.
Это не важно, хотя рекомендуется для скорости и стабильности соединения.
Информационное окно в правом нижнем углу будет содержать вашу ссылку для совместной работы, а также варианты, чтобы сделать комнату только для чтения и ссылку на дополнительную информацию о процессе обмена.
Скопируйте ссылку в буфер обмена и передайте ее другу или коллеге, у которой также установлен VS Live Share, и вы готовы к работе!
Совместная работа с базовым кодом в VS Code
Совместная работа с кодом не меняет ваш опыт программирования. Вместо этого он добавляет слой сверху. Создание сеанса Live Share открывает окно чата. Это доступно для всех пользователей, вошедших в систему или только для чтения.
В любое время во время совместной работы вы можете снова открыть окно чата, получить URL-адрес для общего доступа или завершить сеанс с помощью панели Live Share.
Теперь откройте любой файл, с которым вы хотите сотрудничать, и начните писать как обычно. Участники, работающие над тем же сценарием, что и каждый из вас, имеют цветной курсор, показывающий, где они работают. Помимо того, что они работают в режиме реального времени, также выделяется выделение, позволяющее легко указывать на ошибки и предлагаемые изменения.
Совместная работа может осуществляться между любыми файлами в каталоге проекта, и вы можете увидеть, над каким сценарием все работают, на панели Live Share. Вы также можете поделиться терминалом VS Code в только для чтения а также читай пиши режимы и локальный сервер для работы на JavaScript или других веб-проектах.
Отслеживание и фокусирование сотрудников
Иногда вам захочется объяснить что-то, что требует выхода за рамки одного сценария. Пользователи могут подписаться друг на друга, щелкнув свое имя на панели Live Share. Теперь, куда бы они ни пошли в проекте, вас будут тянуть с собой, чтобы посмотреть, что они делают.
Точно так же, нажав на маленький мегафон на панели «Сведения о сеансе» Фокусы участники к вашему текущему мнению.
Это удобно, когда вам нужно быстро привлечь внимание каждого к определенной части проекта. Сосредоточенные участники имеют возможность продолжать следовать за вами с этого момента.
Использование аудио в VS Live Share
Все соавторы и гости имеют доступ к вызову, что делает его идеальным для совместной работы, обучения или представления группе о том, как продвигается проект. Доступ к настройкам вызова можно получить, щелкнув правой кнопкой мыши активный вызов или щелкнув по зубчатому колесу.
Щелкнув по красному символу отключения, вы покидаете комнату чата, хотя она останется доступной, пока сеанс остается активным.
Слабая интеграция с кодом VS
Настроить Slack в VS Code просто. Нажмите на логотип Slack на левой панели и выберите Настройка Slack, Это приведет вас к окну браузера, чтобы авторизовать VS Code для доступа к рабочей области.
Вы должны быть администратором, чтобы авторизовать приложение VS Code Slack. Как только он будет связан, рабочее пространство Slack будет отображаться как другая вкладка в VS Code.
Безопасность и конфиденциальность в VS Live Share
Поскольку в чате могут разговаривать даже гости с правами только на чтение, существует вероятность ненадлежащего поведения со стороны людей, которым не нужна общая ссылка.
Live Share также позволяет совместно использовать терминал в режиме чтения / записи. Это создает значительный риск для безопасности в чужих руках.
Короче говоря, будьте внимательны, с кем вы делитесь ссылкой Live Share, и тщательно продумайте, прежде чем разрешать редактирование и терминальные привилегии людям.
Эти расширения являются примерами основных интеграций с VS Code. Опытные пользователи уже знают о многих других, которые помогают с завершением кода, написанием кода и тестированием. Live Share также позволяет людям учиться как в классе, так и дистанционно, но самостоятельно изучать их с помощью отличного онлайн-курса.
11 лучших сайтов для бесплатных онлайн курсов по компьютерному программированию
11 лучших сайтов для бесплатных онлайн курсов по компьютерному программированию
В наши дни вы можете стать мастером кодирования, не приобретая традиционную степень информатики. Вы спрашиваете, где находятся все эти прекрасные учебные ресурсы? Отличный вопрос Продолжайте читать, и мы покажем вам.
Прочитайте больше
все еще важно.
Узнайте больше о: инструментах для совместной работы, коде Visual Studio.
- размер шрифта уменьшить размер шрифтаувеличить размер шрифта
- Печать
- Эл. почта
- Станьте первым комментатором!
В прошлых статьях ( первая часть , вторая часть ) мы рассмотрели установку среды разработки VSCode под Windows 10 и добавили в неё поддержку языка C++.
VSCode является универсальной IDE, благодаря наличию онлайн каталога с множеством расширений, позволяющих настроить среду как вам удобней. При этом её можно использовать для разработки на разных языках программирования.
Данная среда может использоваться и для разработки HTML-страниц.
Сегодня мы рассмотрим установку двух расширений Browser Preview и Live Server, которые позволяют создавать HTML-сайты не устанавливая отдельный web-сервер, и производить отладку и правку дизайна сайта не переключаясь между редактором и браузером!
Установка расширения Browser Preview
чтобы открыть окно Расширения.
Нам потребуется установить расширения Browser Preview от автора Kenneth Auchenberg.
Данное расширение позволяет вам организовывать просмотр страницы непосредственно в IDE, что очень полезно, при внесении в HTML-страницу множества мелких правок.
Также нам понадобится расширение – Live Server от Ritwick Dey.
Установка расширения Live Server
Это по сути небольшой web-сервер не требующий долгой настройки и готовый к запуску по одному щелчку на кнопку!
После установки Live Server обязательно закройте VSCode и запустите его снова.
Установка
Возможно, вам так же придется установить расширение Debugger for Chrome от Microsoft.
Создание проекта
Давайте создадим тестовый проект для нашей страницы.
Допустим, все проекты у нас будут храниться в папке d:\html
Откроем консоль cmd.exe и введем команды:
Откроется новое окно VSCode, в котором уже открыта папка проекта test1:
Добавим в нее новый файл index.html
Для этого нажмите на указанную кнопку и введите имя файла:
Щелкните на файл, чтобы открыть его в редакторе.
Давайте создадим простейшую страницу:
Проверка HTML-страницы
У нас есть проект и web-страница, пришло время её проверить.
Сначала запустим Live Server, для этого просто нажмите кнопку Go Live:
Откроется новое окно браузера и сервер будет запущен на порту
Закройте вкладку браузера, мы будем использовать Browser Preview
Создание конфигурации для запуска Browser Preview
Выберите меню Run -> Add configuration…
Выберите пункт Browser Preview
Будет создан файл launch.json замените его содержимое на:
Сохраните и закройте вкладку.
Запустите Browser Preview, для этого нажмите F5 или на указанную кнопку, она появится после первого запуска конфигурации:
.
Нажмите на «Запустить test1…»
Откроется вкладка с нашей страницей:
Работа с Browser Preview
Данное расширение очень удобно при разработке страниц с нуля, так как позволяет видеть изменения сразу после сохранения страницы.
Давайте добавим текст на страницу:
Нажмите Ctrl+S – страница будет сохранена и тут же обновиться вкладка с нашим сайтом в Browser Preview
Отладка сайта в браузере
Вы можете использовать внешний браузер для отладки сайта, запущенного в Live Server
Я расположил окна рядом, для большей наглядности.
Давайте добавим еще одну строку в html-файл:
Сохраним файл – содержимое обновится и в браузере, и во вкладке Browser Preview.
Заключение
Сегодня мы рассмотрели настройку среды разработки VSCode для разработки HTML-страниц.
Мы установили расширения Browser Preview и Live Server.
Создали тестовую страницу.
Настроили профиль для запуска нашей страницы в Browser Preview.
Открыли нашу страницу во вкладке Browser Preview и протестировали автоматическое обновление содержимого вкладки при обновлении содержимого HTML-страницы.
Протестировали обновление страницы в Google Chrome при обновлении содержимого файла.
В следующей статье мы рассмотрим настройку VSCode для разработки на языке программирования PHP.
VSCode имеет множество отличных расширений, и Live Server - одно из лучших.
Всего за пару кликов Live Server позволяет увидеть вашу страницу в реальном времени в реальном браузере. Более того, он имеет функцию перезагрузки в реальном времени, поэтому, если вы обновите свой код, изменения также будут отражены в браузере.
Все, что вам нужно сделать, это щелкнуть правой кнопкой мыши HTML-файл, который вы хотите просмотреть, затем щелкнуть правой кнопкой мыши и выбрать «Открыть с помощью Live Server»:
Но что, если Live Server не открывает ваш браузер и не отображает вашу страницу так, как вы ожидаете? Если это происходит с вами, вот несколько вещей, которые вы можете попробовать.
Перезапустить VSCode
Иногда лучшее, что вы можете сделать, - это запустить VSCode с нуля.
Во-первых, сохраните всю свою работу. Затем закройте VSCode, который также остановит все установленные вами расширения.
Затем снова откройте VSCode и попробуйте еще раз - перейдите к HTML-файлу, который вы хотите просмотреть, щелкните правой кнопкой мыши и выберите «Открыть с помощью Live Server».
Установите браузер для Live Server
Возможно, расширение работает, но в вашей системе нет браузера по умолчанию.
Даже если вы установили браузер по умолчанию для своей системы, не помешало бы сообщить Live Server, какой браузер вы хотите использовать явно.
Сначала откройте Command Pallete с помощью F1, затем введите Preferences: Open Settings (JSON) и выберите эту опцию.
Это откроет ваш settings.json файл VSCode .
Прокрутите файл до конца и вставьте его "liveServer.settings.CustomBrowser": "chrome" .
Прокрутите файл до конца, добавьте запятую после последнего параметра и вставьте "liveServer.settings.CustomBrowser": "chrome" :
Обратите внимание, что вы также можете использовать "firefox" , "safari" или любой другой браузер в качестве значения "liveServer.settings.CustomBrowser" параметра.
Наконец, сохраните settings.json файл и попробуйте снова запустить Live Server.
Установите браузер по умолчанию для вашей операционной системы
Даже после того, как Live Server сообщил, какой браузер вы хотите использовать, возможно, что он по-прежнему неправильно открывает вашу страницу в этом браузере.
Следующее, что нужно попробовать, - это установить браузер по умолчанию для самой операционной системы.
Точный метод для этого может варьироваться в зависимости от вашей операционной системы, поэтому лучше поискать, как это сделать, если вы не уверены.
Вот как выглядит страница настроек в Windows:
Зайдите на живую страницу сами
Если по какой-то причине Live Server по-прежнему не открывает страницу в вашем браузере автоматически, не беспокойтесь. Вы всегда можете открыть любой браузер по вашему выбору и просмотреть страницу напрямую.
Просто откройте предпочтительный браузер и перейдите в //127.0.0.1:5500/ .
Например, если ваш файл называется index.html , просто перейдите по ссылке //127.0.0.1:5500/index.html .
Пока работает Live Server, вы должны видеть свою страницу.
В заключение
Это несколько распространенных исправлений, которые вы можете попробовать, если Live Server не работает так, как вы ожидаете.
В этом руководстве я расскажу о настройке VS Code Server с DigitalOcean и попутно поведаю о приёмах, которые использовал для создания простого и чистого рабочего процесса.
Code Server выполняет Visual Studio Code на удалённом сервере, доступном через браузер.
Зачем мне это нужно?
- Согласованная среда: вы можете писать код на хромбуке, планшете или ноутбуке с согласованной средой разработки, пользуясь “домашними” настройками.
- Мультиплатформенность: все преимущества VS Code будут доступны из любого браузера, включая планшеты.
- Производительность сервера: вы можете пользоваться возможностями крупных облачных серверов для ускорения тестов, компиляции, загрузок и прочего. С помощью DigitalOcean сервера могут быть масштабированы до любого размера.
- Экономия заряда батареи: вы сэкономите энергию заряда, т.к. все вычисления будут производиться на сервере.
Настройка
Представленный ниже вариант настройки очень эффективный с точки зрения гибкости, производительности и экономии:
- С мобильного устройства на основе заготовленного образа создайте Droplet (виртуальный сервер).
- Произведите обновление с GitHub.
- Установите VS Code в браузере вместе с Code Server.
- Выполните необходимую работу.
- Отправьте на GitHub.
- Уничтожьте Droplet.
Создание Droplet
Для написания руководства я предпочёл использовать DigitalOcean, т.к. в нём процесс настройки прост и интуитивно понятен. Тем не менее другие платформы также подойдут.
Для начала нужно создать аккаунт на DigitalOcean.
Создание Droplet
Теперь можно приступить к созданию виртуального сервера, на котором будет выполняться VS Code Server, соответственно, и ваш проект тоже.
- Образ: Ubuntu 18.04 (по умолчанию).
- Тариф: $15/месяц при 2 GB/2 CPU (оптимально).
- Регион: по умолчанию.
- Настройки: для ознакомления не понадобятся.
- Авторизация: создайте новый ключ SSH и выгрузите его в контрольную панель.
Теперь можете жать кнопку “create”.
Подключение через SSH
Лично я использую Terminus, но и любой другой SSH-клиент также подойдёт.
Установка Code Server
Для его установки идите на страницу последних версий и скопируйте ссылку на последний выпуск для Linux.
Выполните в консоли следующие команды:
Скопируйте сгенерированный пароль из вывода консоли и залогиньтесь в Code Server. Теперь полная функциональность VS Code будет доступна вам прямо из браузера.
Кастомизация
Авторизация
По умолчанию установлена авторизация через произвольно сгенерированный пароль. Вы же можете изменить переменную среды password , чтобы использовать свой собственный:
Расширения
Так как официальный маркетплейс VS Code не может использоваться, у Coder есть свой собственный, который предоставляет открытые расширения.
Шрифты
Все шрифты будут работать нормально при условии, что они установлены на локальный компьютер, т.к. отображает текст именно ваш браузер. Например, FiraCode:
Создание образа
Запуск при загрузке
Для настройки я добавил задачи планировщика, чтобы при загрузке получать последнюю версию кода с GitHub и изначально использовать её в код-сервере.
Снимок состояния
DigitalOcean предоставляет простой способ создания образов серверов, на основе которых Droplet могут быть созданы позднее. Переименуйте сервер и сделайте снимок состояния. Как только закончите, можете уничтожить текущий Droplet.
Восстановление
В процессе создания Droplet нажмите на “Snapshots” (снимки состояний) и выберите ранее созданный образ.
Обратите внимание, что установки региона и тарифного плана ограничены установками виртуального сервера, с которого был сделан снимок состояния.
После создания Droplet у вас, как и ранее, появится возможность доступа к код-серверу с того же места, где вы закончили.
Идём дальше
Теперь вы можете запускать и получать доступ к любимым настройкам разработки с помощью одного нажатия кнопки, независимо от используемой сети и компьютера, причём при минимальной стоимости.
Лично для меня очень удобно получать доступ к контрольной панели DigitalOcean с моего мобильного телефона. Также есть неофициальные приложения, использующие свой собственный API, но с ограниченной функциональностью (Android и iOS).
Протестировав клиент на Android, я сделал вывод, что он полноценно подходит только для создания виртуальных серверов.
Читайте также: