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.

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