Live Server | VSCode Extension
Create a .vscode folder in the root of project. Inside of .vscode folder create a json file named settings.json . Inside of the settings.json , type following key-value pairs. By the way you’ll get intelli-sense.
Note: Use either CustomBrowser or AdvanceCustomBrowserCmdLine setting.
How to use Live Server Web Extension?
- Please check here
How to setup Live Server for Dynamic Pages (like PHP)?
- Please check here
How to access the server from Mobile?
First, make a sure that your PC & Mobile are connected through same network.
- Windows : Open CMD and enter ipconfig .
- Linux/macOS : Open terminal and enter ifconfig .
And note down the IPv4 Address (probably it will look like 192.168.xx.xx). This is your PC’s IP address. Enter the address to your browser’s URL Bar with the port number**.
** For an example, if your server running at http:// 127.0.0.1:3500 on PC then port number is 3500.
Are Multi-root workspaces supported?
Currently there is no support for multi-root workspaces. It’s automatically the first folder in the workspace choosen. The current state of this issue you can track here.
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.
Расширение 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».