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

Настройка VS Code для верстки

Сегодня мы рассмотрим установку и настройку Visual Studio Code для верстки. В результате мы получим удобную, лаконичную рабочую среду с необходимыми плагинами, которые я использую в своей работе. VS Code в настоящее время является самым популярным редактором кода благодаря широкому функционалу, кроссплатформенности, огромному сообществу разработчиков как самого редактора, так и расширений для него и открытой лицензии. Этот редактор я могу смело рекомендовать к использованию.

Поделиться Отправить Класснуть Запинить

Материалы урока и полезное
- Visual Studio Code: Страница редактора
- Simple Starter: Ознакомиться и скачать
- Урок по GitHub Gist: Ознакомиться с уроком
- Архив с настройками: Скачать
- Верстка с Emmet: Смотреть урок
Рекомендуемые расширения
- CSS Peek
- eCSStractor for VSCode
- Gist
- Sass
- HTML to CSS autocompletion
- IntelliSense for CSS class names in HTML
- Live Server или VSCode Browser Sync
- One Dark Pro
Пресет настроек settings.json
```
< "emmet.extensionsPath": [ "~/AppData/Roaming/Code/User/emmet" ], // "php.validate.executablePath": "D:/OSPanel/modules/php/PHP_8.1/php.exe", // "terminal.integrated.defaultProfile.windows": "Git Bash", // "terminal.integrated.defaultProfile.windows": "Ubuntu (WSL)", "workbench.startupEditor": "none", "editor.smoothScrolling": true, "editor.fontSize": 16, "editor.minimap.enabled": false, "breadcrumbs.enabled": false, "editor.renderControlCharacters": true, "editor.tabSize": 2, "workbench.activityBar.visible": false, "files.defaultLanguage": "html", "git.ignoreMissingGitWarning": true, "editor.detectIndentation": false, "editor.folding": false, "editor.glyphMargin": false, "editor.parameterHints.enabled": false, "editor.hover.enabled": false, "terminal.integrated.fontSize": 16, "editor.renderWhitespace": "boundary", "editor.lineHeight": 23, "security.workspace.trust.enabled": false, "editor.linkedEditing": true, "editor.bracketPairColorization.enabled": true, "editor.wordSeparators": "`~!@#$%^&*()=+[\\|;:'\",.<>/?", "emmet.triggerExpansionOnTab": true, "editor.insertSpaces": false, "git.openRepositoryInParentFolders": "never", "editor.cursorSmoothCaretAnimation": "on", "explorer.confirmDelete": false, "workbench.colorTheme": "One Dark Pro Darker", "ecsstractor_port.add_comment": false, "ecsstractor_port.empty_line_before_nested_selector": false, // "liveServer.settings.donotShowInfoMsg": true, // При использовании Live Server // "liveServer.settings.donotVerifyTags": true, // При использовании Live Server // "browserSync.config": < "notify": false, "files": "./" >// При использовании VSCode Browser Sync >
```
Расширение 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 (124)
- CMS (139)
- CSS (50)
- Frontend (75)
- HTML (66)
- JavaScript (150)
- Laravel (72)
- Linux (171)
- 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)
- Команда (88)
- Компонент (60)
- Конфигурация (66)
- Корзина (32)
- ЛокальнаяСеть (32)
- Модуль (34)
- Навигация (31)
- Настройка (143)
- ПанельУправле… (29)
- Плагин (33)
- Пользователь (26)
- Практика (101)
- Сервер (77)
- Событие (28)
- Теория (106)
- Установка (67)
- Файл (51)
- Форма (58)
- Фреймворк (192)
- Функция (36)
- ШаблонСайта (68)
Не запускается Live Server на VS Code. Как это исправить?

Скачал плагин Live Server, перезапустил редактор, появляется снизу «Go Live», показано что запустился и вместо «Go Live» показан номер порта, но в браузере не открывается страница. В чём может быть дело?
- Вопрос задан более трёх лет назад
- 33694 просмотра
2 комментария

Простой 2 комментария

Тоже самое, всё ещё не нашел ответ как исправить!
V_Kovshov @V_Kovshov Автор вопроса
Tiraniks, вручную вбивал ип адрес и в конце добавлял этот порт, только так работало
Решения вопроса 0
Ответы на вопрос 3

Проблема в том, что у Live Server сбросилась настройка запуска через браузер по умолчанию. Как исправить:
Идем в настройки Live Server(Extensions — Live Server — Manage — Entension Settings) и потом листаем вниз, пока не найдем Live Server › Settings: Custom Browser. Теперь тут просто нужно установить браузер, который и будет запускать Live Server

Ответ написан более трёх лет назад
Нравится 2 2 комментария
PaladinDobra @PaladinDobra
Зделал как вы сказали но ничего не поменялось

PaladinDobra, мне помогло исправить в настройках, как указано выше, но нужно зайти в Workspace. Так как настройки рабочей области приоритетны, то и изменить нужно их.

Darya Shvakh @DariaShvakh
«Она — безнадёжна» (с)

Делай Раз

Делай Два
Делай Три

И у меня — «лампочка гори».)

Ответ написан более года назад
Комментировать
Нравится Комментировать

No Browser надо убрать галочку и Live server автоматически будет открывать страницу в браузере

Ответ написан 03 мая 2023
Комментировать
Нравится Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ
- Visual Studio Code
- +1 ещё
Как в VS Code в Emmet добавлять / у одиночных теггов?
- 1 подписчик
- 14 часов назад
- 29 просмотров
Похожие публикации: