Live Share в Visual Studio Code для Интернета
Visual Studio Code для Интернета позволяет посетить https://vscode.devи открыть локальную папку или репозиторий GitHub или Azure DevOps непосредственно из браузера. Это позволяет редактировать код из любого места и на любом устройстве, не требуя установки ничего, чтобы приступить к работе. Кроме того, так как совместная работа является такой ключевой частью рабочего процесса многих разработчиков, расширение Live Share полностью поддерживает Visual Studio Code для Интернета, чтобы вы могли работать вместе со своими одноранговыми узлами, более упрощенным и упрощенным способом.
Начало работы
Чтобы запустить сеанс Live Share из браузера, просто выполните следующие действия:
- Установка расширения Live Share
- Нажмите кнопку на строке Live Share состояния. При появлении запроса войдите с помощью удостоверения GitHub или Майкрософт
- Поделитесь URL-адресом сеанса с разработчиками, с которыми вы хотите сотрудничать!
Когда кто-то щелкает ссылку, его браузер запустится, и им будет предложено присоединиться к сеансу из Интернета или Visual Studio/VS Code. Они могут пройти проверку подлинности с помощью GitHub или удостоверений Майкрософт или продолжить работу в качестве анонимного гостя.
Присоединение к рабочему столу
Хотя Visual Studio Code для Интернета предоставляет упрощенный и бесплатный интерфейс установки, многие разработчики уже установили классический клиент и могут использовать совместную работу. В результате расширение Live Share упрощает присоединение сеанса совместной работы с рабочего стола в дополнение к клиенту на основе vscode.dev.
Открытие из Интернета
Если кто-то отправил ссылку Live Share и открыл ее в браузере, вы можете легко перейти на рабочий стол с помощью одной из следующих команд:
- Щелкните меню «гамбургер» в левом верхнем углу редактора и выберите Open in VS Code или Open in Visual Studio
- Нажмите зеленую Live Share кнопку строки состояния в левом нижнем углу редактора и выберите Open in VS Code или Open in Visual Studio
- Открытие палитры команд и выбор Live Share: Open in VS Code или Live Share: Open in Visual Studio
Каждая из этих точек входа запустит выбранный классический клиент и автоматически присоединяется к активному сеансу.
Открытие с рабочего стола
Если вы уже установили и открыли Visual Studio Или Visual Studio Code, а кто-то отправляет ВАМ URL-адрес сеанса, вы можете присоединиться непосредственно с рабочего стола с помощью одного из следующих подходов:
- VS Code:
- Live Share Открытие вкладки, нажатие Join кнопки и вставка URL-адреса сеанса
- Открытие палитры команд и выбор Live Share: Join Collaboration Session
Использование рабочего стола по умолчанию
При первом щелчке сеанса Live Share вам будет предложено использовать клиент: настольный или веб-сайт. На основе выбранного выбора Live Share запустит указанный клиент для всех посещений susequent. Таким образом, вы всегда можете открыть классический клиент из Интернета, выполнив действия, упоминание выше. Если вы хотите изменить клиент по умолчанию, который всегда используется, можно задать Live Share: Launcher Client для параметра значение или visualStudio web visualStudioCode . Затем каждый раз, когда вы щелкаете ссылку Live Share, предпочтительный клиент будет автоматически запущен.
Известные проблемы
Live Share поддерживает большинство одинаковых функций между настольным компьютером и Интернетом, однако в настоящее время существует несколько возможностей, которые недоступны в Интернете. Мы активно работаем над закрытием этих пробелов, но в то же время, если вам нужно использовать любую из следующих функций, вы можете разместить или присоединиться из классического клиента, а не в Интернете:
- Общие серверы
- Состояние управления общими версиями
- Рабочие пространства с несколькими корневыми каталогами
- .vsls.json Фильтрация файлов на основе
Редактор для HTML: пишем код, чтобы было удобно
Для того, чтобы написать код, сгодится вообще любой текстовый редактор. Подойдёт даже «Блокнот» на вашем компьютере (но в нём очень неудобно всё делать). Мы скачаем и установим хороший редактор, заточенный под веб-разработку. Покажем всё на примере Visual Studio Code.
Зайдите на сайт и скачайте редактор. Если у вас Windows, то нажмите на любую из синих кнопок. Если Mac OS или Linux — нажмите Other platforms.
Установка пройдёт как обычно — нужно запустить файл VSCodeUserSetup, много раз нажать «Далее» и поставить пару галочек.
Шаг 2. Запускаем редактор и осматриваемся
Свежеустановленный VS Code встречает нас экраном с большим количеством ссылок. С ними можно познакомиться позже, а сейчас нужно настроить всё для работы.
Хорошо бы, чтобы во время работы все нужные файлы лежали в одной папке (пока проект маленький, так можно делать). Для этого добавим рабочую папку, чтобы VS Code показывал нам только её содержимое.
По шагам на скриншоте:
- Add workspace folder — открывает меню выбора папки.
- Создадим новую папку personal_page в любом удобном месте и зайдём в неё.
- Нажмём Add.
После этого слева появится панель Explorer с пустым рабочим пространством Untitled (Workspace). Мы создали папку, давайте её наполним.
Шаг 3. Добавляем файлы
После создания папка пустая. Щёлкнем правой кнопкой по заголовку personal_page и добавим три файла, которые понадобятся в работе — index.html, style.css и script.js. Для начала этого хватит.
Шаг 4. Делаем работу удобнее
Сейчас все три файла открыты во вкладках, и между ними не всегда удобно переключаться. Чтобы было удобнее, код со стилями можно перенести в другую часть окна, например, вниз. Для этого нажмите правой кнопкой по вкладке со style.css и выберите split down, чтобы увидеть результат.
Шаг 5. Добавляем код
Пока отредактируем только index.html (файл с разметкой) и style.css (файл со стилями), а script.js оставим на будущее. Если у вас уже есть какой-нибудь код, напишите его, или используйте готовый — мы, например, возьмём код из интерактивных курсов.
Сайт начинающего верстальщика Взгляд упал на кота. Скопируем код со стилями из файла — откройте его в браузере, скопируйте все строки и вставьте в файл style.css в редакторе.
Шаг 6. Запускаем код и смотрим на результат
Самый простой способ — открыть папку с файлами через проводник и запустить файл index.html . Вы увидите результат вёрстки в браузере, но это не слишком удобно — при любых изменениях придётся переходить в браузер и обновлять страницу.
Давайте настроим всё так, чтобы наша страничка открывалась сама и обновлялась, если вы что-то изменили в разметке или стилях.
Для этого нам понадобится расширение Live Server. Найти его можно прямо в VS Code (пятая иконка в меню слева) — введите название и нажмите Install. Другой способ — скачать Live Server из магазина расширений, но это менее удобно.
После установки расширения Windows может попросить разрешение на доступ к сети. Это нужно, чтобы запускать локальный сервер, Разрешайте, это безопасно.
Чтобы запустить код, нажмите кнопку Go Live на нижней панели.
Результат выглядит так. Слева — редактор, справа — браузер. Теперь измените код в редакторе и сохраните его, а он автоматически изменится и в окне браузера.
Что мы сделали
- Установили и настроили редактор кода.
- Создали рабочую папку и добавили туда файлы нашего проекта.
- Научились редактировать и сохранять файлы с кодом.
- Установили расширение, чтобы сразу видеть результат вёрстки.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Как работать на Visual Studio Code в браузере?
у них както работает
Mishka_Sev @Mishka_Sev Автор вопроса
DevMan, фишка VSCode по англ. звучит даже так, что это некий «Browser-based Editor»
Mishka_Sev, так и есть. только запускается он в собственном браузере, а не любом.
Mishka_Sev @Mishka_Sev Автор вопроса
DevMan: так и есть. только запускается он в собственном браузере, а не любом.
мне и нужно в «собственном», а не в какомто любом.
Mishka_Sev, собственный — значит «встроенный» в продукт.
Mishka_Sev @Mishka_Sev Автор вопроса
DevMan: собственный — значит «встроенный» в продукт.
на поднятом у себя сервере имеется ввиду, чтобы оно развернулось, и по локальному адресу localhost:9999 + удалёному, открывалось и работало через вкладку, категорически не должно быть доступа к файловой системе машины, с которой открывается браузер с табом где в свою очередь открыт VSCode
Mishka_Sev @Mishka_Sev Автор вопроса
Александр, ёр оун значит «свой собственный»
Mishka_Sev @Mishka_Sev Автор вопроса
Просмотр HTML-файла в браузере с помощью Visual Studio Code
Часто разработчикам, особенно начинающим, приходится столкнуться с задачей просмотра HTML-файла в браузере. Например, они создали веб-страницу, написали для нее код и теперь хотят увидеть, как она выглядит в реальном времени. В некоторых текстовых редакторах, таких как Notepad++, есть функция «Запустить в браузере». Но что делать, если используется Visual Studio Code от Microsoft?
В Visual Studio Code такой функции из коробки нет, но есть возможность установить расширение, которое позволяет открывать HTML-файлы в браузере.
Одно из таких расширений называется open in browser . Чтобы установить его, нужно сделать следующее:
- Открыть Visual Studio Code.
- Перейти на вкладку «Extensions» (или нажать Ctrl+Shift+X ).
- В поисковой строке ввести open in browser и нажать Enter .
- Найти расширение open in browser в списке и нажать Install .
После установки расширения, можно будет открыть HTML-файл в браузере следующим образом:
- Открыть нужный HTML-файл в Visual Studio Code.
- Нажать правой кнопкой мыши в области редактора кода и выбрать Open in Default Browser или Open in Other Browsers если нужно выбрать браузер, отличный от браузера по умолчанию.
Таким образом, просмотр HTML-файла в браузере с помощью Visual Studio Code становится простой и быстрой задачей.