How to Install and Setup Live Server Extensions on Visual Studio code?

Last Updated : 20 Mar, 2024

Visual Studio Code is one of the most sought-after IDE (Integrated Development Interface) of the current time. It helps the developers to efficiently write, build and test software over a single platform by combining and providing a multilateral set of functions. Visual Studio Code supports various programming languages like C, C++, C#, Java, Python, Javascript, and so on. It increases the productivity of users and submerges multiple sets of operations on a single platform about the broad categories of development including applications, websites, and databases to make programming pretty fun and clear.

Speaking of Extension in Visual Studio Code, there are a lot of supporting extensions and packages per your requirement that help you compile and run your code alongside providing a wide variety of support per your development needs.

Installing Live Server Extension by Ritwick Dey

For developers each time they write code they have to save the file and reload the page manually to see the results, here you can install the live server in Visual Studio Code to use your system as an on-time live server.

Step 1: Open Visual Studio Code and navigate to the sidebar.

navigating-sidebar — Open Visual Studio Code

Step 2: Open the Extension section and search for your extension in the search bar.

searching-extension — Search for Extension

Step 3: For installing the live server, search live server and you will see an extension named Live Server by Ritwick Dey, install it.

installing-live-server — Install Live Server By Ritwick Dey

Steps to Use Live Server Extension

Writing your code, saving it, and then each time reloading it manually and waiting for it to reflect is cumbersome. Bother no more, Live Server will be automating this task for you. Although after installing Live Server, you will see a blue toolbar at the bottom of your Visual Studio Code while writing the code, there will be an option to Go Live, just save your program file and click on Go Live it will redirect to live server.

For instance, consider the demo here:

HTML

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
    var scoreMaths  = 70;
    document.write(scoreMaths);
</script>
</head>
<body>
</body>
</html>

This code will output the value 70 that was stored in the variable scoreMaths, however, if the scoreMaths needs to be updated to 75, you have to change var scoreMaths = 75; and save the program file and once you launch the Live Server by clicking on Go Live, all the changes will be automatically reflected on the Live Server without having to reload manually.