Visual Studio Code: Live server not working issue [Solved]

avatar
Borislav Hadzhiev

Last updated: Apr 6, 2024
7 min

banner

# Table of Contents

  1. Visual Studio Code: Live server not working issue [Solved]
  2. Place your index.html file in your root directory
  3. Try restarting the Live Server
  4. Restart your VS Code Window
  5. Make sure your folder name doesn't contain spaces or special characters
  6. Correct any syntactical errors in your HTML markup
  7. Make sure the Live Server extension is installed
  8. Set the default browser for the Live Server extension
  9. Set the default browser for the extension in your settings.json file
  10. Set the default browser for the extension applied only to the current project
  11. Set the default browser for your operating system

# Visual Studio Code: Live server not working issue [Solved]

There are multiple reasons why the Live Server extension might not work in Visual Studio Code:

  • Not placing your index.html file in your project folder.
  • Having spaces or special characters in the path to your index.html file (e.g. in the project folder).
  • Having syntactical errors in your index.html file (e.g. forgetting to close the body tag).
  • Having a glitched VS Code instance (you have to restart the IDE).
  • Forgetting to install the Live Server extension.
  • Not having the default browser for the extension or your operating system set up correctly.

# Place your index.html file in your root directory

The first thing you should try is to place your index.html file in the root directory of your project (where your package.json file is).

place index html file in root directory

Your index.html file might be as simple as the following.

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box">bobbyhadz.com</div>

    <script src="index.js"></script>
  </body>
</html>

The related index.js file should be located in the same directory as your index.html file.

index.js
console.log('hello world');

This assumes that your project's folder structure looks as follows.

shell
my-project/
  └── index.html
  └── index.js

You can right-click in your index.html file and select "Open with Live Server" to start the live server extension.

right click open with live server

This should automatically start the live server and open a tab in your browser, e.g. under http://127.0.0.1:5500/index.html.

If you need to open VS Code in the root directory of your project:

  1. Open your terminal and navigate to the directory.
  2. Issue the code . command.
shell
code .

The . signals to VS Code to open the code editor in the current folder.

You can also issue Live Server commands by using the Command Palette:

  1. Open your index.html file.

  2. Press:

  • Ctrl + Shift + P on Windows and Linux
  • Command + Shift + P on macOS
Note: you can also press F1 to open the Command Palette.

  1. Type live server.

  2. Issue the specific command to start or stop the live server.

issue live server commands from command palette

# Try restarting the Live Server

If the issue persists, try to restart the live server.

  1. Right-click in your index.html file and select Stop Live Server.

stop live server

  1. Right-click in your index.html file and select Open with Live Server.

right click open with live server

# Restart your VS Code Window

If the error persists, try restarting your VS Code Window.

  1. Press:
  • Ctrl + Shift + P on Windows and Linux.
  • Command + Shift + P on macOS.
Note: you can also press F1 to open the Command Palette.
  1. Type Reload Window and select Developer: Reload Window.

restart your vscode window

  1. Try to start the Live Server after restarting VS Code.

# Make sure your folder name doesn't contain spaces or special characters

Another thing you should ensure is that the name of your project's folder doesn't contain spaces or special characters (e.g. hashes # or dollar signs $).

The complete path to the folder should not contain spaces.

For example, if your project's folder is named my folder (contains a space), you have a couple of options:

  1. Use kebab-case, e.g. my-folder.
  2. Use snake_case, e.g. my_folder.
  3. Use camelCase, e.g. myFolder.

If you happen to rename your project folder or any folder in the path, make sure to restart VS Code as shown in the previous subheading.

# Correct any syntactical errors in your HTML markup

Make sure the HTML markup in your index.html file is syntactically correct.

Here is an example of a valid index.html file.

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box">bobbyhadz.com</div>

    <script src="index.js"></script>
  </body>
</html>

Notice that the html, head, body, div and script tags are closed.

The index.js file that is loaded may be as simple as follows.

index.js
console.log('hello world');

The example assumes that the index.html and index.js files are located in the same directory.

shell
my-project/
  └── index.html
  └── index.js

VS Code has Emmet enabled by default, so you can quickly add a boilerplate HTML template by:

  1. Typing ! (an exclamation mark) in your index.html file.
  2. Pressing Tab or selecting the option from the menu.

create html boilerplate template

# Make sure the Live Server extension is installed

  1. Click on Extensions in the left sidebar.
  • You can also open the Extensions menu by pressing:
    • Ctrl + Shift + X on Windows or Linux.
    • Command + Shift + X on macOS.
  1. Type Live Server.

make sure live server is installed and enabled

  1. Make sure the extension is installed and enabled.

Also, make sure to install the correct Live Server extension by Ritwick Dey.

If the error persists, try to disable and reenable the Live Server extension.

I've also written an article on how to install an older version of an extension in VS Code in case you got the issue after updating your live server version.

# Set the default browser for the Live Server extension

If the error persists, set the default browser for the live server extension.

  1. Press Ctrl + Shift + P (or Command + Shift + P on macOS).
Note: you can also press F1 to open the Command Palette.
  1. Type user settings and select Preferences: Open User Settings.

open user settings

You can also open the settings screen by pressing Ctrl + , on Windows and Linux or Cmd + , on macOS.

  1. Search for live server custom browser.

select live server custom browser

  1. Click on the dropdown menu and select your preferred browser.

By default, the extension opens your default browser (based on your operating system settings).

For example, you could select chrome.

# Set the default browser for the extension in your settings.json file

You can also set the default browser for the extension in your settings.json file.

  1. Press Ctrl + Shift + P (or Command + Shift + P on macOS).
Note: you can also press F1 to open the Command Palette.

  1. Type user settings json.

  2. Click on Preferences: Open User Settings (JSON)

preferences open user settings

  1. Add the following line to your settings.json file.
settings.json
{
  "liveServer.settings.CustomBrowser": "chrome",
}

set live server default browser in settings json

You can also set the setting to different values, e.g. firefox.

# Set the default browser for the extension applied only to the current project

An alternative approach is to set the default browser for the extension applied only to the current project.

  1. In the root directory of your project, create a .vscode folder.

  2. Create a settings.json file in the .vscode folder.

  3. Add the following code to your settings.json file.

.vscode/settings.json
{
  "liveServer.settings.CustomBrowser": "chrome"
}

set default browser in local settings json

The settings that are in your .vscode/settings.json file are only applied to the current project and override any global settings.

# Set the default browser for your operating system

If the issue persists, try setting the default browser for your operating system.

How to set your default browser depends on your operating system.

For example, on Windows 11:

  1. Type Settings in the search field and select the option.
  2. Click on Apps and select Default apps.
  3. Type html in the search field and select which browser should open HTML files by default.

You can also select your preferred browser under the Web browser setting in the Default apps section.

# Conclusion

To solve the issue where the Live Server extension doesn't work in VS Code, make sure:

  • To add your index.html file to the root directory of your project.
  • The name of your project folder doesn't contain spaces or special characters.
  • You don't have syntactical errors in your index.html file.
  • You have installed and enabled the Live Server extension.
  • You have tried to restart your VS Code window.
  • You have configured the default browser for the extension.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.
About
Contacts
Policy
Terms & Conditions
TwitterGitHubLinkedin

Copyright © 2024 Borislav Hadzhiev

0
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........