Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • DSA
  • Practice Problems
  • Python
  • C
  • C++
  • Java
  • Courses
  • Machine Learning
  • DevOps
  • Web Development
  • System Design
  • Aptitude
  • Projects
Open In App
Next Article:
Dart - Installation and Setup in Visual Studio Code
Next article icon

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

Last Updated : 20 Mar, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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>
launching-live-server
 

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.


Next Article
Dart - Installation and Setup in Visual Studio Code

M
manishkandpal2003
Improve
Article Tags :
  • TechTips
  • How To
  • Installation Guide

Similar Reads

  • How to Enable Live Server on Visual Studio Code
    When working on web development projects, you often need to manually refresh the browser to see the changes you make in your code. The Live Server extension for Visual Studio Code automates this process by creating a local development server. With Live Server, any time you save your HTML, CSS, or Ja
    7 min read
  • How to Install and Setup Visual Studio for ASP.NET?
    Visual Studio is an Integrated Development Environment(IDE) developed by Microsoft to develop GUI(Graphical User Interface), Web applications, console, web apps, mobile apps, cloud, and web services, etc. To install and use Visual Studio for the commercial purpose one must buy a license from Microso
    4 min read
  • How to Install and Setup Visual Studio for C#?
    Installing and setting up Visual Studio is the first step for developers to build, compile, and run C# applications. Whether you are a beginner or an experienced programmer, Visual Studio provides a powerful integrated development environment (IDE) for writing and debugging C# code. With Visual Stud
    3 min read
  • Dart - Installation and Setup in Visual Studio Code
    If you want to start developing with Dart, one of the easiest ways is to install Dart in Visual Studio Code. VS Code offers a lightweight, user-friendly environment that integrates well with Dart programming. In this guide, we’ll walk you through installing Dart in VS Code and configuring the necess
    7 min read
  • How to Download and Install Visual Studio Code on Ubuntu?
    Visual Studio Code is a code editor that is basically used for web development or cloud platforms, but nowadays Visual Studio Code can do a lot. It is stated as the second most used code editor by developers in 2022 so if you are an aspiring IT student or a developer you should know how to use Visua
    1 min read
  • How to Install Flutter on Visual Studio Code?
    In this article, we will walk through the process of installing Flutter in Visual Studio Code. Flutter is an open-source portable UI framework for mobile, desktop, and web. It is developed and managed by Google, Flutter is used for creating a high-quality, beautiful, and fast native interface for an
    4 min read
  • How to install Visual Studio Code on Arch-based Linux Distributions(Manjaro) ?
    Visual Studio Code is free, powerful and one of the most popular IDE in the market. It is a cross-platform application and can be customized heavily by installing various extensions. All the modern programming languages like C, C++, Java, Python, JavaScript, React, Node JS, etc., are all supported b
    2 min read
  • How to Install a C# Class Library in Visual Studio?
    A C# library project is a separate project used to hold utility classes. So this might be the class that handles our database or might handle some communications with the network. In our case, we are going to create a math library that is a stand-in for some of those other cases. It is a single sour
    3 min read
  • How to install VS Code Extensions from Command line?
    Utilizing the VS Code CLI extension installation procedure is your greatest option if you're searching for a quick and easy method to install VS Code extensions from the command line. You may rapidly add and manage extensions using this way without ever having to exit the console. We'll show you how
    3 min read
  • How to Install Visual Studio Code on Windows?
    Visual Studio Code (VS Code) is a free, lightweight, and open-source code editor developed by Microsoft. It supports multiple operating systems, including Windows, macOS, and Linux. VS Code is designed to be versatile and user-friendly, offering features such as: Syntax Highlighting and Autocompleti
    3 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences