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

Settings

Example: /sub_folder1/sub_folder2 . Now sub_folder2 will be root of the server.

Default value is “ / ”.(The Workspace Root).

Default value is «Null» [String, not null ]. (It will open your system’s default browser.)
Available Options :
- chrome
- chrome:PrivateMode
- firefox
- firefox:PrivateMode
- microsoft-edge
Not enough? need more? open an/a issue/pull request on github. For now, use liveServer.settings.AdvanceCustomBrowserCmdLine settings (see below).

liveServer.settings.AdvanceCustomBrowserCmdLine : To set your any favorite browser (Eg: Chrome Canary, Firefox Nightly) using advance Command Line. (You can specify full path of your favorite custom browser).
- This setting will override CustomBrowser and ChromeDebuggingAttachment settings.
- Default Value is null
- Examples:
  - chrome –incognito –headless –remote-debugging-port=9222
  - C:\Program Files\Firefox Developer Edition\firefox.exe –private-window
  Note: Either use AdvanceCustomBrowserCmdLine or CustomBrowser . If you use both, AdvanceCustomBrowserCmdLine has higher priority.
  
  NOTE: You must have to install Debugger for Chrome.
  
  If the value is true , Start Live Server and select ‘Attach to Chrome’ from Debug Window to start debugging. Debugger for Chrome Extension will inject debugging feature into running instance of browser window.
  
  Default value is false .
  
  liveServer.settings.NoBrowser : If it is true live server will start without browser opened.
  - Default Value is false
  Now, by default Live Server will not track changes of your .scss & .sass files.
  
  liveServer.settings.donotShowInfoMsg : To turn off information pop-up messages like “Server starts with port xxxx” or like that. To turn off it, you can set the value as true or you can click to “Don’t show again” when a information message pop-up.
  - Default value is : false
  - Default is 127.0.0.1 .
  [This Settings is dropped and this feature can be replacemented with Live Server Web Extension]
  - Default value if false
  - Properties : «`js /* In easy word, it means you’re shifting your real url (actual PHP url) to another url (which LiveSever will start). */
  - Default is false
  liveServer.settings.fullReload: : By Default Live Server inject CSS changes without full reloading of browser. You can change this behviour by making this setting as true .
  - Default: false
  liveServer.settings.wait: : Delay before live reloading. Value in milliseconds.
  - Default: 100
  liveServer.settings.mount: : Mount a directory to a route.
  
  liveServer.settings.useLocalIp: : Use local IP as host.
  - Default: false
  liveServer.settings.file: : Path to the entry point file. Useful for SPA
  - Default: «»
  liveServer.settings.multiRootWorkspaceName: : This the entry point of server when you’re in multiroot workspace.
  
  You can change it using Command Palette ctrl+shift+p & type Live Server: Change Live Server workspace
  
  Tips: You don’t need to set this setting, Live Server is smart enough, it’ll eigher ask what you want or automatically set the correct workspace if open the server by right clicking any HTML file.
  
  Live Server
  
  Open a project and click to Go Live from the status bar to turn the server on/off.
  
  Right click on a HTML file from Explorer Window and click on Open with Live Server . .
  
  Open a HTML file and right-click on the editor and click on Open with Live Server .
  
  Hit (alt+L, alt+O) to Open the Server and (alt+L, alt+C) to Stop the server (You can change the shortcut form keybinding). [On MAC, cmd+L, cmd+O and cmd+L, cmd+C ]
  
  Open the Command Pallete by pressing F1 or ctrl+shift+P and type Live Server: Open With Live Server to start a server or type Live Server: Stop Live Server to stop a server.
  
  Features
  - A Quick Development Live Server with live browser reload.
  - Start or Stop server by a single click from status bar.
  - Open a HTML file to browser from Explorer menu.[Quick Gif Demo].
  - Support for excluding files for change detection.
  - Hot Key control.
  - Customizable Port Number, Server Root, default browser.
  - Support for any browser (Eg: Firefox Nightly) using advance Command Line.
  - Support for Chrome Debugging Attachment (More Info). [Quick Gif Demo].
  - Remote Connect through WLAN (E.g.: Connect with mobile) [Need Help? See FAQ Section]
  - Use preferable host name (localhost or 127.0.0.1).
  - Customizable Supporting Tag for Live Reload feature. (Default is Body or head )
  - SVG Support
  - https Support.
  - Support for proxy.
  - CORS Enabled
  - Multi-root workspace supported.
  - Support for any file even dynamic pages through Live Server Web Extension.
  Installation
  
  Open VSCode and type ctrl+P , type ext install ritwickdey.liveserver .
  
  Settings
  
  All settings are now listed here Settings Docs.
  
  All FAQs are now listed here FAQ Docs
  
  What’s new ?
  
  Version 5.6.1 (17.04.19)
  - Fixed Extension host terminated unexpectedly [#431]
  Version 5.6.0 (17.04.19)
  - [NEW] Intregation of Browser Preview with Live Server [#352 — Thanks to Kenneth Auchenberg]
  - [NEW] Fallback to random port If given port is busy. [#330 — Thanks to Ali Almohaya ]
  - [FIXES] Moved to vscode-chokidar lib for #285.
  - Doc Fixes [#388 — Thanks to Ted Silbernagel]
  Version 5.5.1 (12.02.19)
  - [Fixes] Fixed Extension host terminated unexpectedly for MacOS. [#285]
  Version 5.5.0 (12.02.19)
  - [Fixes] Fixed ignoreFiles settings [#255]
  - Attempt to fix high cpu load [#278]
  Changelog
  
  To check full changelog click here.
  
  Special Thanks To Maintainers
  
  A special thanks to Max Schmitt, Joydip Roy & Ayo Adesugba for contributing their valueable time on this project.
  
  Установка и настройка LiveServer в VS Code
  
  Visual Studio Code — один из самых популярных редакторов кода. Он бесплатный, у него чистый интерфейс и бесчисленные расширения, которые делают программирование проще и веселее.
  
  Фронтенд разработчики часто задаются вопросом: как сделать ,чтобы браузер обновлялся автоматически во время программирования, без нажатия кнопки перезагрузки.
  
  Это возможно, если настроить полезное расширение в VS Code под названием live-server. В этом посте я подробно расскажу о том, как оно работает и как установить и настроить live-сервер в редакторе VS Code.
  
  Принцип работы плагина:
  
  Как только вы внесете изменения в свой код или напишете что-то новое, после сохранения браузер автоматически обновится.
  
  Установите LiveServer в магазине расширений.
  
  Live Server — расширение в VS code
  
  После установки VS может перезагрузиться, это нормально.
  
  Теперь, переходите в рабочий проект. В области редактора кода щелкните правой кнопкой мыши. Откроется контекстное меню.
  
  live server запуск
  
  Нажмите «Open with Live Server» или воспользуйтесь комбинациями клавиш ALT+L или ALT+O.
  
  После этого откроется браузер, в котором страница будет перезагружаться как только вы сохраните файл.
  
  Настройка VSCode для работы с HTML
  
  В прошлых статьях ( первая часть , вторая часть ) мы рассмотрели установку среды разработки VSCode под Windows 10 и добавили в неё поддержку языка C++.
  
  VSCode является универсальной IDE, благодаря наличию онлайн каталога с множеством расширений, позволяющих настроить среду как вам удобней. При этом её можно использовать для разработки на разных языках программирования.
  
  Данная среда может использоваться и для разработки HTML-страниц.
  
  Сегодня мы рассмотрим установку двух расширений Browser Preview и Live Server, которые позволяют создавать HTML-сайты не устанавливая отдельный web-сервер, и производить отладку и правку дизайна сайта не переключаясь между редактором и браузером!
  
  Установка расширения Browser Preview
  
  чтобы открыть окно Расширения.
  
  Нам потребуется установить расширения Browser Preview от автора Kenneth Auchenberg.
  
  Данное расширение позволяет вам организовывать просмотр страницы непосредственно в IDE, что очень полезно, при внесении в HTML-страницу множества мелких правок.
  
  Также нам понадобится расширение – Live Server от Ritwick Dey.
  
  Установка расширения Live Server
  
  Это по сути небольшой web-сервер не требующий долгой настройки и готовый к запуску по одному щелчку на кнопку!
  
  После установки Live Server обязательно закройте VSCode и запустите его снова.
  
  Установка
  
  Возможно, вам так же придется установить расширение Debugger for Chrome от Microsoft.
  
  Создание проекта
  
  Давайте создадим тестовый проект для нашей страницы.
  
  Допустим, все проекты у нас будут храниться в папке d:\html
  
  Откроем консоль cmd.exe и введем команды:
  
  Откроется новое окно VSCode, в котором уже открыта папка проекта test1:
  
  Добавим в нее новый файл index.html
  
  Для этого нажмите на указанную кнопку и введите имя файла:
  
  Щелкните на файл, чтобы открыть его в редакторе.
  
  Давайте создадим простейшую страницу:
  
  Проверка HTML-страницы
  
  У нас есть проект и web-страница, пришло время её проверить.
  
  Сначала запустим Live Server, для этого просто нажмите кнопку Go Live:
  
  Откроется новое окно браузера и сервер будет запущен на порту
  
  Закройте вкладку браузера, мы будем использовать Browser Preview
  
  Создание конфигурации для запуска Browser Preview
  
  Выберите меню Run -> Add configuration…
  
  Выберите пункт Browser Preview
  
  Будет создан файл launch.json замените его содержимое на:
  
  Сохраните и закройте вкладку.
  
  Запустите Browser Preview, для этого нажмите F5 или на указанную кнопку, она появится после первого запуска конфигурации:
  
  .
  
  Нажмите на «Запустить test1…»
  
  Откроется вкладка с нашей страницей:
  
  Работа с Browser Preview
  
  Данное расширение очень удобно при разработке страниц с нуля, так как позволяет видеть изменения сразу после сохранения страницы.
  
  Давайте добавим текст на страницу:
  
  Нажмите Ctrl+S – страница будет сохранена и тут же обновиться вкладка с нашим сайтом в Browser Preview
  
  Отладка сайта в браузере
  
  Вы можете использовать внешний браузер для отладки сайта, запущенного в Live Server
  
  Запустите Google Chrome и откройте в нем ссылку http://localhost:5500
  
  Я расположил окна рядом, для большей наглядности.
  
  Давайте добавим еще одну строку в html-файл:
  
  Сохраним файл – содержимое обновится и в браузере, и во вкладке Browser Preview.
  
  Заключение
  
  Сегодня мы рассмотрели настройку среды разработки VSCode для разработки HTML-страниц.
  
  Мы установили расширения Browser Preview и Live Server.
  
  Создали тестовую страницу.
  
  Настроили профиль для запуска нашей страницы в Browser Preview.
  
  Открыли нашу страницу во вкладке Browser Preview и протестировали автоматическое обновление содержимого вкладки при обновлении содержимого HTML-страницы.
  
  Открыли нашу страницу в Google Chrome используя ссылку от Live Server — http://localhost:5500
  
  Протестировали обновление страницы в Google Chrome при обновлении содержимого файла.
  
  В следующей статье мы рассмотрим настройку VSCode для разработки на языке программирования PHP.
  Похожие публикации: