Step 1 - Launch Visual Studio Code
Launch visual studio code, click to View on the menu bar and choose Extensions.
You can also open the extensions window by pressing CTRL + SHIFT +X.
If you don't have visual studio installed on your system, check out our tutorial.
Step 2 - Install Live Server Extension
Once you open the extensions window, we need to lookup for the live server extensions.
The extension that we need is called "Live Server" which at this time of writing this tutorial has 32,581,652 downloads.
To do this, simply type "Live Server" on the search box and press enter, and you should see all results based on your search.
Next, click on the first result as showing in the image above, and click the install button to install Live server extension
Next, you will see the disable and uninstall button once the installation has been completed.
Alternatively you can Install this extension by pressing CTRL + P on Visual Studio Code, and executing the install command
Run the command below in the search box and press enter
ext install ritwickdey.LiveServer
And the installation should begin.
Step 3 - Add project folder
Add a project folder on visual studio code in order to test if the extensions runs without any problem.
Go to File >> Open Folder >> and upload your project
Step 4 - Start Server
Now that you have added the project, start the live server by right clicking over the index html file on your project, then click to Open With live server. Index.html is the file that you'd need to open with live server. However, this depends on the project.
Next, you should see this pop up, this means the live server has started.
And it should also automatically open a tab on your browser which address is 127.0.0.1:5500/index.html
If your browser doesn't open automatically, you can manually go to 127.0.0.1:5500 with your favorite browser and any changes made will also appear there.
Another method of seeing the real time changes on your project is by using the "Embedded Preview" feature on visual studio code,
And you should see the html file rendered
How to Stop Live Server
You can stop the live server by clicking the Stop icon on the blue bar as shown in the image below
Once live server is offline, you can start it again by clicking Go live button
How to Uninstall Live Server Extension
Click View button and then go to Extensions, then search the extension you want to uninstall and click on it, once you are in the extension page you should see the uninstall button.
In this tutorial you learned how to create a local server through Visual Studio Code to improve your productivity and make your job easier.