Как настроить live server в vscode
Перейти к содержимому

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

  • автор:

Расширение 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 (126)
  • CMS (139)
  • CSS (50)
  • Frontend (75)
  • HTML (66)
  • JavaScript (150)
  • Laravel (72)
  • Linux (174)
  • MySQL (76)
  • PHP (125)
  • React.js (66)
  • SSH (27)
  • Ubuntu (70)
  • Web-разработка (509)
  • WordPress (73)
  • Yii2 (69)
  • БазаДанных (95)
  • Битрикс (66)
  • Блог (29)
  • Верстка (43)
  • ИнтернетМагаз… (84)
  • КаталогТоваров (87)
  • Класс (30)
  • Клиент (29)
  • Ключ (28)
  • Команда (88)
  • Компонент (60)
  • Конфигурация (72)
  • Корзина (32)
  • ЛокальнаяСеть (33)
  • Модуль (34)
  • Навигация (31)
  • Настройка (148)
  • ПанельУправле… (29)
  • Плагин (33)
  • Пользователь (26)
  • Практика (101)
  • Сервер (82)
  • Событие (28)
  • Теория (106)
  • Установка (72)
  • Файл (51)
  • Форма (58)
  • Фреймворк (192)
  • Функция (36)
  • ШаблонСайта (68)

Не запускается Live Server на VS Code. Как это исправить?

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

  • Вопрос задан более трёх лет назад
  • 35038 просмотров

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
Зделал как вы сказали но ничего не поменялось

Veelena

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

DariaShvakh

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

Делай Раз
626ff9ea669b3910487034.jpeg
Делай Два626ff9fb7c695413373605.jpeg
Делай Три
626ffa166441e010562528.jpeg
И у меня — «лампочка гори».)

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

64524a245e810760419518.png

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

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

Войдите, чтобы написать ответ

visual-studio-code

  • Visual Studio Code

Как исправить ошибку «имя не распознано как имя командлета, функции, файла сценария или выполняемой программы»?

  • 1 подписчик
  • вчера
  • 35 просмотров

Как настроить автоматическое обновление страницы при изменении содержимого

Узнайте, как настроить автоматическое обновление страницы при изменении содержимого с помощью Live Server, BrowserSync и Webpack Dev Server.

Алексей Кодов
Автор статьи

Баннер Баннер

23 июня 2023 в 15:28

Автоматическое обновление страницы при изменении содержимого — полезная функция для веб-разработчиков, так как она позволяет экономить время и упрощает процесс разработки. В данной статье мы рассмотрим несколько способов, как это можно сделать.

Использование Live Server

Live Server — это расширение для Visual Studio Code, которое автоматически обновляет страницу при изменении файлов проекта. Для использования Live Server следуйте инструкции ниже:

  1. Установите Visual Studio Code (если еще не установлен).
  2. Зайдите в раздел «Extensions» (иконка с блоками на боковой панели) и найдите «Live Server» в поиске ��️.
  3. Установите расширение, нажав на кнопку «Install».
  4. Откройте свой проект в Visual Studio Code и нажмите правой кнопкой мыши на HTML-файле, затем выберите «Open with Live Server» ��.

Теперь при изменении и сохранении файлов проекта, страница будет автоматически обновляться.

Использование BrowserSync

BrowserSync — это инструмент, который также позволяет автоматически обновлять страницу при изменении файлов проекта. Он может быть установлен через npm (Node.js package manager). Следуйте инструкции ниже для настройки BrowserSync:

  1. Установите Node.js (если еще не установлен).
  2. Откройте терминал и выполните команду npm install -g browser-sync для глобальной установки BrowserSync ��.
  3. Перейдите в папку с вашим проектом с помощью команды cd your_project_directory .
  4. Запустите BrowserSync с помощью команды browser-sync start —server —files «**/*.html, **/*.css, **/*.js» .

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

Использование Webpack Dev Server

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

  1. Установите Webpack Dev Server с помощью команды npm install webpack-dev-server —save-dev ✨.
  2. Откройте файл webpack.config.js и добавьте следующий код в объект module.exports :
devServer: < contentBase: path.join(__dirname, 'public'), watchContentBase: true, open: true, >,
  1. В файле package.json измените скрипт «start» на webpack-dev-server —mode development .

Теперь при выполнении команды npm start ваш проект будет доступен на локальном сервере, и страница будет автоматически обновляться при изменении файлов.

В заключение, существует несколько способов настроить автоматическое обновление страницы при изменении содержимого. Выбирайте тот, который лучше всего подходит для вашего проекта и предпочтений разработки. Удачного кодинга! ��

Установка и вход в 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.

    Button to download Live Share.

    Действия по установке 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: Вход.

    Screenshot that shows the Visual Studio Code Live Share button.

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

    Screenshot that shows the Live Share sign in options.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *