Where to set value of liveServer.settings.port in live server extension of visual studio code

Question

I am working on Angular7 with visual studio code editor URL: http://localhost:4200 (Working fine)

But, I installed extension Live Server and when I click on Liveserver icon its giving me the error

"Error on port 5500. Please try to change the port through settings or report on GitHub."

So, I opened the File->preference->Settings->LiveServerConfig and tried to change port in settings.json file

{
    "typescript.tsdk": "./node_modules/typescript/lib",
    "tslint.enable": false,
    "liveServer.settings.multiRootWorkspaceName": "QiwkCollaboratorTool",
    "liveServer.settings.root": 0  // New added line
}

Am I going into right direction or am I missing something ? I am not sure how to change the port number 5500 to 0 as I want random port number.

Thanks in advance!

Answer 1

I got the answer I was editing the wrong settings.json there were two .json files.

Also, I put the below code:

{
    "liveServer.settings.multiRootWorkspaceName": "",
    "liveServer.settings.port": 0
}

But thanks Danny

Answer 2

I hope this helps: in the settings.json add the following line.

"liveServer.settings.port": 0,

A value 0 (zero) is used for a random port. Any other numbers is for a fixed port number.

Answer 3

Solution

1. First,navigate to Settings (Ctrl+Comma) . Screenshot
2. Now click on Extensions , which is located on the left side of the window. Screenshot
3. After that scroll down and find a tab by the name of Live Server Config
4. Click on that, scroll down, now click on Edit in settings.json under Settings: Port . Screenshot
5. A new window will pop up. here you go, now you can change the port number. Screenshot
6. At the end save the file Ctrl+s .

liveServer.settings.port: Customize Port Number of your Live Server. If you want random port number, set it as 0.

Answer 4

Follow these steps to change port of Live Server in VS Code:

1. Step 1 . Open up VS Code.

2. Step 2. Use Ctrl+Shift+I Shortcut key to open up Extensions (on the left side).

3. Step 3. Find out the live server extension, then click on the gear icon at the bottom of it, and open up Extension Settings.

4. Step 4. Here, find out, Live Server > Settings: Port, under this, click on Edit in settings.json.

5. Step 5. Here, set the port on which you wanna open up live server (set value to 0 for random ports).

6. Step 6. Now, click ctrl+s to save the file.

After this, you can test it by opening any file using live server.

Source: Fix: Server is Started at Port 5500 Live Server