Shameless ad
Some of the links in this article are "affiliate links", a link with a special tracking code. This means if you click on an affiliate link and purchase the item, we will receive an affiliate commission.
The price of the item is the same whether it is an affiliate link or not. Regardless, we only recommend products or services we believe will add value to our readers.
By using the affiliate links, you are helping support our Website, and we genuinely appreciate your support.
What is Microsoft Visual Studio Code Live Server?
Live Server is a Microsoft Visual Studio extension that enables you to:
Launch a local development server with live reload feature for static & dynamic pages.
marketplace.visualstudio.com
Prerequisites
Microsoft Visual Studio Code is installed.
How to Install Live Server in Microsoft Visual Studio Code
Open Microsoft Visual Studio Code.
Click on the Extensions icon.
Add the Live Server Extension in VS Code
In the Search Extensions in Marketplace box, enter live server. Several choices will be shown.
Find the one called Live Server by Ritwick Dey. Click on its Install button.
Wait several seconds for the Live Server extension to install. When the installation is done, you will see this:
At the bottom left, click on the Manage icon.
Then click on Settings.
Remove all text from the Search Settings search box. Set Files: Auto Save to either off or afterDelay.
If Auto Save is off, you will have to press Cmd-S to save the file before the browser will update.
If Auto Save is set to afterDelay, then the browser will update about one second after you made a change to the file. This is the setting I prefer. Sometimes, I press Cmd-S if I want a browser update without changing my file.
Go to Settings. Enter live server browser into the Search Settings bar. Use Live Server: Custom Browser to select the browser you wish Live Server to use. The default, null, selects the default browser.
Wait for Go Live to be displayed. This can take a few seconds. If it doesn’t show up, click on a HTML or PHP file and then wait a few seconds for Go Live to show up.
Click on Go Live.
Alternatively, you can right-click on the HTML file you want to open. Then click on Open with Live Server.
Live Server will start up.
Live server is now running.
Right-click on the HTML file you want to open, then click Open with Live Server. You only have to do this once per HTML file you want displayed in the browser.
The browser will display the HTML file.
When you make changes to the HTML file, and it is saved, the browser will update the webpage.
Live Server is now installed!