Как настроить live server в vscode

Установка и вход в Live Share в Visual Studio Code

Вы готовы организовать совместную работу с помощью Live Share в Visual Studio Code? В этой статье показано, как настроить сеанс совместной работы в Visual Studio Code с помощью расширения Live Share.

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

Вам достаточно краткой сводки? Перейдите к кратким руководствам по общему доступу или присоединению.

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

Необходимые компоненты

Прежде всего вам необходима поддерживаемая версия Visual Studio Code, соответствующая базовым требованиям для Live Share.

Вам потребуется Visual Studio Code (1.72.0 или более поздней версии) на одном из следующих операционных систем:

Windows: 7, 8.1 или 10.
macOS: Sierra (10.12) и более поздних версий.
Linux: 64-разрядная версия Ubuntu Desktop 16.04 или более поздних версий, Fedora Workstation 27 или более поздних версий или CentOS 7.
- 32-разрядная версия Linux не поддерживается.
- В настоящее время ARM не поддерживается.
- Сведения об использовании нисходящих дистрибутивов и других дистрибутивов см. в статье Сведения об установке Linux.
Установка расширения Live Share

Скачивая и используя Visual Studio Live Share, вы соглашаетесь с условиями лицензии и заявлением о конфиденциальности. Если у вас возникают проблемы, ознакомьтесь с руководством по устранению неполадок.
1. Установите Visual Studio Code.
2. Скачайте и установите расширение Visual Studio Live Share из Marketplace.
3. Перезагрузите Visual Studio Code.
Действия по установке Linux

Среда Linux бывает очень разной. Учитывая количество сред и дистрибутивов для рабочего стола, установить Live Share может быть сложно. Процесс должен быть простым, если вы используете официальные дистрибутивы Visual Studio Code и:
- Ubuntu Desktop версии 16.04 и более поздних версий.
- Рабочая станция Fedora версии 27 и более поздних версий.
- CentOS 7.
Если вы используете нестандартную конфигурацию или подчиненное распределение, у вас могут возникнуть осложнения. Дополнительные сведения см. в статье Сведения об установке Linux.

Интеграция с браузером в Linux

Visual Studio Live Share обычно не требует дополнительных действий по установке, чтобы включить интеграцию браузера в Linux.

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

Вход в Live Share

Для совместной работы необходимо выполнить вход в Visual Studio Live Share, чтобы все пользователи знали, кто вы. Этот вход является мерой безопасности и не добавляет вас в маркетинговые мероприятия или другие исследовательские мероприятия. Вы можете войти с помощью личной учетной записи Майкрософт (например, @outlook.com), рабочей или учебной учетной записи Майкрософт (Azure Active Directory) либо учетной записи GitHub. Войти очень просто.

Выберите live Share в строке состояния или нажмите клавиши CTRL+SHIFT+P или CMD+SHIFT+P , а затем выберите Live Share: Вход.

Отображается запрос на вход. При выборе предпочтения входа откроется браузер, чтобы завершить процесс входа. Закройте браузер после завершения.

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

Расширение Live Server для VS Code

Плагин Live Server для VS Code позволяет перезагружать страницу после внесения измений в js, css, html код. Для установки надо перейти в раздел плагинов, набрать в поисковой строке «Live Server» и нажать кнопку «Установить».

Теперь в правом нижнем углу есть кнопка «Go Live», которая запускает сервер. Давайте создадим директорию project , а внутри нее еще две директории — src и dist . В директории src будут исходники, а в директории dist — готовая сборка. И откроем проект в VS Code — нужно кликнуть по директории project правой кнопкой мыши и выбрать в контекстном меню «Открыть с помощью VS Code».

При запуске сервера — Live Server будет считать корнем сервера директорию dist и запускать браузер по умолчанию. Это можно изменить в настройках VS Code — либо через графический интерфейс, либо редактируя файл settings.json .

Чтобы открыть на редактирование settings.json нужно кликнуть иконку в правом верхнем углу в разделе настроек.

Некоторые часто используемые настройки:
- liveServer.settings.root — корень веб-сервера
- liveServer.settings.port — порт веб-сервера
- liveServer.settings.CustomBrowser — какой бразузер запускать вместо дефолтного
- liveServer.settings.ignoreFiles — игнорировать изменения в этих файлах
- liveServer.settings.host — хост: 127.0.0.1 или localhost
- liveServer.settings.https — работать по протоколу https
- liveServer.settings.wait — задержка в мс перед перезагрузкой браузера
- liveServer.settings.NoBrowser — запускать сервер без открытия браузера
- liveServer.settings.fullReload — перезагружать браузер вместо обновления ссылки на css-файл внутри
В VS Code есть пользовательские настройки (User) и настройки рабочего пространства (Workspace). Пользовательские настройки применяются всегда, для любого запущенного экземпляра VS Code. Настройки рабочего пространства применяются для директории проекта — в нашем случае это файл project/.vscode/settings.json . Настройки рабочего пространства имеют приоритет над пользовательскими настройками.
- Расширение «ESLint» для VS Code, часть 2 из 2
- Расширение «ESLint» для VS Code, часть 1 из 2
- Расширение «Prettier — Code formatter» для VS Code
- Расширение «Remote — SSH» для VS Code
- Расширение REST Client для VS Code
- Расширение «Debugger for Chrome» для VS Code
- Отладка с помощью xdebug в PhpStorm
Каталог оборудования

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Производители

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Функциональные группы

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Категории блога
Облако тегов
- 1С:Предприятие (31)
- API (29)
- Bash (43)
- CLI (122)
- CMS (139)
- CSS (50)
- Frontend (75)
- HTML (66)
- JavaScript (150)
- Laravel (72)
- Linux (169)
- MySQL (76)
- PHP (125)
- React.js (66)
- SSH (27)
- Ubuntu (69)
- Web-разработка (509)
- WordPress (73)
- Yii2 (69)
- БазаДанных (95)
- Битрикс (66)
- Блог (29)
- Верстка (43)
- ИнтернетМагаз… (84)
- КаталогТоваров (87)
- Класс (30)
- Клиент (28)
- Ключ (28)
- Команда (87)
- Компонент (60)
- Конфигурация (64)
- Корзина (32)
- ЛокальнаяСеть (32)
- Модуль (34)
- Навигация (31)
- Настройка (141)
- ПанельУправле… (29)
- Плагин (33)
- Пользователь (26)
- Практика (101)
- Сервер (75)
- Событие (27)
- Теория (106)
- Установка (66)
- Файл (51)
- Форма (58)
- Фреймворк (192)
- Функция (36)
- ШаблонСайта (68)
Как настроить live server в VS Code?

Здравствуйте! А как настроить VS Code, чтобы в правой части интерфейса автоматически отображались изменения в Crome?
Я, вроде, установил дополнение live server, но по прежнему не имею кнопки, как в инструкции (скрины).
https://snipboard.io/eF0GOp.jpg
https://snipboard.io/tCLqVU.jpg
https://snipboard.io/F9kCWn.jpg
Куда копать?
Спасибо.

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Debian 9 Visual Studio Code С++ нужно настроить VS Code
Доброго времени суток, скажите пожалуйста как настроить в VS Code Path при работе с C++.

Как настроить Code::Blocks?
Ну я подключаю open gl в Code Blocks в include скинул headers файлы lib в lib кинул подключил все.

Как настроить Code::Blocks
Всем доброго времени суток. Опишу суть проблемы. Пишу под AVR микроконтроллеры фирмы Atmel. Скачал.

Как настроить среду Code blocks 13.12?
Скачала, не знаю как настроить. Ругается на библиотеку iostream.h, и на ввод cout.

Регистрация: 22.12.2012
Сообщений: 2,342
Есть ли кто в теме?
Регистрация: 02.09.2017
Сообщений: 15

Если еще актуально то правый клик мыши в любой части открытого html файла и выбираешь «open with live server «

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Visual Studio Code. Как настроить расширение?
В описаниях к расширениям Visual Studio Code указано, что есть возможность их настроить. Но как это.

Как настроить Visual Studio Code 1.6.1 для C++?
Кто сталкивался и знает как настроить VS Code для С++ C:\Program Files (x86)\Microsoft Visual.

Как настроить вывод ошибок в Code::Blocks?
У меня среда разработки КодБлок. Ошибки в консоли выводяться на тарабарщине. Вот пример. ||===.

Как настроить Android SDK для VS code?
Всем привет! Решил перенести файлы Android SDK(включая папки .android, .gradle) с системного SSD.

Как настроить MS SQL Server, чтобы через Access, можно было редактировать таблицы MS SQL Server?
ВОПРОС: Как настроить MS SQL Server, чтобы через Access, можно было редактировать таблицы MS.

SFML network, как настроить public server
Имею 2 приложения клиент и сервер , хочу реализовать перенаправление на другого игрока после.

Настройка VSCode для работы с HTML

В прошлых статьях ( первая часть , вторая часть ) мы рассмотрели установку среды разработки VSCode под Windows 10 и добавили в неё поддержку языка C++. VSCode является универсальной IDE, благодаря наличию онлайн каталога с множеством расширений, позволяющих настроить среду как вам удобней. При этом её можно использовать для разработки на разных языках программирования. Данная среда может использоваться и для разработки HTML-страниц. Сегодня мы рассмотрим установку двух расширений Browser Preview и Live Server, которые позволяют создавать HTML-сайты не устанавливая отдельный web-сервер, и производить отладку и правку дизайна сайта не переключаясь между редактором и браузером!

Установка расширения Browser Preview
```
Ctrl+Shit+X
```
чтобы открыть окно Расширения. Нам потребуется установить расширения Browser Preview от автора Kenneth Auchenberg. Данное расширение позволяет вам организовывать просмотр страницы непосредственно в IDE, что очень полезно, при внесении в HTML-страницу множества мелких правок. Также нам понадобится расширение – Live Server от Ritwick Dey.

Установка расширения Live Server

Это по сути небольшой web-сервер не требующий долгой настройки и готовый к запуску по одному щелчку на кнопку! После установки Live Server обязательно закройте VSCode и запустите его снова.

Установка

Возможно, вам так же придется установить расширение Debugger for Chrome от Microsoft.

Создание проекта

Давайте создадим тестовый проект для нашей страницы. Допустим, все проекты у нас будут храниться в папке d:\html Откроем консоль cmd.exe и введем команды:
```
d: mkdir d:\html\test1 cd d:\html\test1 code .
```
Откроется новое окно VSCode, в котором уже открыта папка проекта test1: Добавим в нее новый файл index.html Для этого нажмите на указанную кнопку и введите имя файла: Щелкните на файл, чтобы открыть его в редакторе. Давайте создадим простейшую страницу:
```
  Тестовый проект 1  Это тест!
  
```
Проверка HTML-страницы

У нас есть проект и web-страница, пришло время её проверить. Сначала запустим Live Server, для этого просто нажмите кнопку Go Live: Откроется новое окно браузера и сервер будет запущен на порту
```
5500
```
Закройте вкладку браузера, мы будем использовать Browser Preview

Создание конфигурации для запуска Browser Preview

Выберите меню Run -> Add configuration… Выберите пункт Browser Preview Будет создан файл launch.json замените его содержимое на:

Сохраните и закройте вкладку. Запустите Browser Preview, для этого нажмите F5 или на указанную кнопку, она появится после первого запуска конфигурации: Откроется окно: . Нажмите на «Запустить test1…» Откроется вкладка с нашей страницей:

Работа с Browser Preview

Данное расширение очень удобно при разработке страниц с нуля, так как позволяет видеть изменения сразу после сохранения страницы. Давайте добавим текст на страницу:
```
  Тестовый проект 1  Это тест!
 1234 А это новый текст.  
```
Нажмите Ctrl+S – страница будет сохранена и тут же обновиться вкладка с нашим сайтом в Browser Preview

Отладка сайта в браузере

Вы можете использовать внешний браузер для отладки сайта, запущенного в Live Server Запустите Google Chrome и откройте в нем ссылку http://localhost:5500 Я расположил окна рядом, для большей наглядности. Давайте добавим еще одну строку в html-файл:
```
  Тестовый проект 1  Это тест!
 1234 А это новый текст.
 А этот текст еще новее.  
```
Сохраним файл – содержимое обновится и в браузере, и во вкладке Browser Preview.

Читать:
Как установить время на духовом шкафу горение