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

11.06.2021

Теги: IDE • JavaScript • Web-разработка • Настройка • Плагин • Сервер

Плагин 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-файл внутри <head>

В VS Code есть пользовательские настройки (User) и настройки рабочего пространства (Workspace). Пользовательские настройки применяются всегда, для любого запущенного экземпляра VS Code. Настройки рабочего пространства применяются для директории проекта — в нашем случае это файл project/.vscode/settings.json. Настройки рабочего пространства имеют приоритет над пользовательскими настройками.

Поиск: IDE • Web-разработка • Плагин • Сервер • LiveServer

Каталог оборудования
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.