Ritwick Dey's Live Server extension in Visual Studio Code not opening website in new tab automatically

Question

1. Summarize the problem

• Include details about your goal

I want the Live Server extension in Visual Studio Code to automatically run and open my HTML, CSS and JS files in a website

• Describe expected and actual results

Expected: After clicking on "Go Live", a browser tab automatically pops up and runs my website.

Actual: After clicking on "Go Live", a port is created but the tab doesn't open.

• Include any error messages

No error messages occurred.

2. Describe what you’ve tried

• Installing his Chrome extension,
• Watching these YouTube videos

1

2

• Setting liveServer.settings.useBrowserPreview to false.
• Reinstalling his Visual Studio Code extension.

Answer 1

Solution

1. Uninstall the Visual Studio Code (VSC) extension first.
2. Reinstall it.
3. Once you open a JavaScript file, press F5.
4. Copy the four-digit number in "url".
5. Press Ctrl + Shift + P and go to Preferences: Open Settings (JSON)
6. Copy and paste this within the curly brackets:

"liveServer.settings.multiRootWorkspaceName": "",
"liveServer.settings.port": xxxx

7. Replace xxxx with the four-digit number copied in step 4.
8. Press the "Go Live" button at the bottom right corner of VSC.
9. Press F5 and it should work.

Thanks to Swapnil G Thaware for the tutorial at https://stackoverflow.com/a/55459597/13510906