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).

2. Now click on Extensions, which is located on the left side of the window.

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.

5. A new window will pop up. Here you go, now you can change the port number.

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

I also need to set the custom port number to my application in locally tried above and this is how it is configured now.