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.
.png)
Open Visual Studio Code
Step 2: Open the Extension section and search for your extension in the search bar.
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.
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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...