Setup instructions for Live Server in VSCode (how to prevent issues working with json-server)

VSCode-live-server-setup.md

Problem Statement

Live Server is a great tool for working with Javscript. It automatically reloads our code any time changes are made to files in the folder where Live Server is running. This becomes an issue when using a tool like json-server with a .json file in the same directory - since changes you make using POST/PATCH/DELETE requests will update the .json file, these changes will also cause your app to reload.

Solution

You can solve this by telling Live Server to ignore changes to certain files. Open your VSCode preferences by pressing command + shift + p in VSCode and searching for "Preferences: Open Settings (JSON)". Then, add the following lines to the settings.json file:

"liveServer.settings.ignoreFiles": [
  ".vscode/**",
  "**/db.json"
],

This will tell Live Server to ignore changes to any db.json files. You can add other files to this as well if you wish.

Sweet!

Nice! ^-^

Thank you for this.

⬆

great

Thank you

nice....

thanks

Nice.

Nice

thank you

How did you guys do it?

perfect

Thank you even though I didn't understand anything

How did you guys do it?

When you go to the package.json
Copy paste the entire code as the last code within the curly braces.

But also ensure that you have a comma to separate where the copy pasted code begins & the previous code.

Thank you.

cool

My Vs Code on Ubuntu has three preferences setting. Where should I add?

helpful, thank you

I have the exact same question. Also, if it's Deault Settings (JSON), I keep getting an error that it's not editable.
Any thoughts? =)

I have the exact same question. Also, if it's Deault Settings (JSON), I keep getting an error that it's not editable. Any thoughts? =)

Add it to the User Settings(JSON), mine worked with the same. I should have updated my post.

hecka tight!

Amazing

Thank you very much

I have second key value pair is grayed out for me
{
"window.zoomLevel": 1,
"liveServer.settings.ignoreFiles": [
".vscode/",
"/db.json"
]
}

nice

nice

you came early

I have the exact same question. Also, if it's Deault Settings (JSON), I keep getting an error that it's not editable. Any thoughts? =)

Add it to the User Settings(JSON), mine worked with the same. I should have updated my post.

Great!

cannot edit in read only editor

grate