How To: Install Live Server in VS Code

Step-by-Step Guide to Installing the Live Server Plugin in Visual Studio Code

The Live Server plugin in Visual Studio Code allows you to view your HTML changes instantly in a browser without manually refreshing the page.

---

---

1. Open Visual Studio Code

• Launch VS Code from your computer. You can do this by either searching for it in your applications or opening it directly from a terminal or command line.

2. Open the Extensions Panel

• In the left sidebar of Visual Studio Code, click the Extensions icon. It looks like a square icon or four squares (you can also press Ctrl + Shift + X on Windows or Command + Shift + X on macOS).

3. Search for “Live Server”

• In the Extensions search bar (top of the Extensions panel), type Live Server.
• You will see the Live Server extension by Ritwick Dey listed in the search results.

4. Install the Live Server Extension

• Click on the Live Server extension in the search results to open its details page.
• On the extension’s page, click the Install button. This will download and install the Live Server plugin into your VS Code environment.

5. Open Your Project Folder in VS Code

• If your project folder is not already open in VS Code:
  1. Click File in the top menu.
  2. Select Open Folder and navigate to your project folder.
  3. Click Select Folder to open the folder in VS Code.

6. Open File

• In the Explorer tab (the first icon in the sidebar), locate the index.html file in your project folder.
• Double-click the index.html file to open it in the editor.

7. Launch Live Server

• Right-click anywhere in the index.html file in the editor.
• From the context menu, select Open with Live Server.
  • Alternatively, you can press Alt + L then Alt + O to start Live Server.

8. View Changes in the Browser

• Your default web browser will open automatically, showing your index.html file.
• As you make changes to your HTML, CSS, or JavaScript files and save them, Live Server will automatically refresh the browser to display the updates.

9. Stop Live Server

• To stop Live Server, go to the bottom-right corner of Visual Studio Code and click the Port: 5500 status bar item, or:
  • Click the Go Live button that appears at the bottom-right corner (if available) to toggle the server off.

Troubleshooting

• If the Live Server extension doesn’t automatically open in the browser, make sure you have saved your file (Ctrl + S or Command + S).
• Ensure the browser you’re using is set as the default one on your system.

---

More Information

Plugin Page: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer