If you are working on a web project, it is advised that you open a workspace at the root of the project. Files outside of this can be previewed, but some file paths (such as a link to the root) may not go to the right place. The server is hosted from the root of the workspace that the user opens.
You can install the extension in the marketplace here. You can view the ports that are open for Live Preview by hovering the status bar indicator (usually located in the bottom-right corner of the window). Live Preview works cleanly with your multi-root workspaces! It will simply open an additional server for each root that you open a preview on. You can use the Live Preview: Stop Server command to kill the server in this case.
Individual pages can opt out of live refreshing by adding the attribute data-server-no-reload. You can also change this in settings to refresh the preview on save or not at all. By default, changes appear as you make them in the editor.
To work with these, feel free to run the Simple Browser: Show command that is already built-in with VS Code. not for apps using React, Angular, etc.). This extension is most useful for projects where a server is not already created (e.g. ⚠️ WARNING: This extension is still under development! ⚠️Īn extension that hosts a local server for you to preview your web projects on! This is the pre-release edition of Live Preview for early feedback and testing.