How to Install Live Server in Microsoft Visual Studio Code (2022)

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!