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

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.


Microsoft Visual Studio Code is installed.

How to Install Live Server in Microsoft Visual Studio Code

Open Microsoft Visual Studio Code.

Common Microsoft Visual Studio Code Open Microsoft Visual Studio Code

Click on the Extensions icon.

VS Code Click 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.

VS Code Live Server Click Install

Wait several seconds for the Live Server extension to install. When the installation is done, you will see this:

VS Code Live Server Extension is Installed

At the bottom left, click on the Manage icon.

VS Code Click Manage Icon

Then click on Settings.

VS Code 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.

VS Code Set AutoSave to afterDelay

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.

VS Code Live Server Custom Browser Settings Chrome Null
select browser
Quit VS Code
Open VS Code

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.

VS Code just starting
VS Code Go Live displayed

Click on Go Live.

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 Open with Live Server

Live Server will start up.

VS Code Live Server is Starting

Live server is now running.

VS Code Live Server is 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.

open with live server

The browser will display the HTML file.

Live Server is Running

When you make changes to the HTML file, and it is saved, the browser will update the webpage.

Live Server Browser Updated

Live Server is now installed!

Scroll to Top