Learn Why Your Live Server Isn’t Working with Your Visual Studio Code
There has been a great deal of interest in Live Server among developers and programmers. It gives you a live view of your existing server through a web extension. Basically, it allows you to reload dynamic web content features. You will see corresponding changes as you work on your code. The Live Reload function on Live Server allows users to see what their web content will look like before it is actually hosted. For this feature to work, you need to install this extension on your VS Code.
Due to its live reload capability, Live Server is the go-to web extension for web developers. After installing this extension, all you need to do is right-click on your html, CSS or whatever code you are working on and click on open Live Server or click on Go Live below your VS Code bottom tab. Live Server will then display your content. However, if you still have trouble with this process— or it does not display your work or open properly,
here are some possible reasons why your Live Server might not be working with your VS Code and some quick troubleshooting you can use:
1. VS Code Live Server does not run on only files -
For instance, if you have an HTML file, Live Server would not open the file for you. Such a file must be saved inside a folder before it would be displayed by the Live Server.
2. Your folder name should not have any space -
Here you need to follow the file naming best practices for your Live Server to work. Again, if your folder name has a space in the name, it would not work. however, a hyphen or underscore aligns with the best naming convention. So, check this and be sure that you follow the standard folder/file naming convention.
3. VS Code Live Server would not work with well without a valid HTML structure -
If you want to work with a HTML file, such file must have proper structure like <!DOCTYPE HTML> <HTML Lang=”en”>, <head>, <body> and so on. if any of these is missing, your VS Code Live Server would not work properly.
4. Restart your VS Code -
Another thing that you can do is to restart your VS Code, that might help your VS Code Live Server reset and work properly.
5. Set the default browser for your operating system -
If you did an update, your Operating System (OS) would return to the default settings. In this case, your default browser might have been changed. So, you need to go through your system’s settings, select the app and then default apps, and then set a default for a file type or link type. The simple thing you need to do here is to reselect your current browser as the default browser for your VS Code Live Server to work properly.
6. Set the default browser for your Live Server -
If the previous step did not solve your problem, then you need to set the browser you are currently using as the default browser for your Live Server. So, open your Visual Studio Code and click on settings, then click on extensions and then from the drop-down menu, click on Live Server Config and select your custom browser. From there you will be able to select a default browser for your Visual Studio Code.
