Search code examples
visual-studio-codeliveserver

Liveserver extension for VScode does not auto reload page on change

I can’t figure out what the problem is .__. Liveserver extension does not react on html/css changes

This line in html is present `

<meta charset="UTF-8">

Here is my settings (cant post image):

{
    "files.autoSave": "afterDelay",
    "liveServer.settings.AdvanceCustomBrowserCmdLine": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
    "liveServer.settings.useWebExt": true,
    "liveServer.settings.fullReload": true,
    "liveServer.settings.ChromeDebuggingAttachment": false,
    "liveServer.settings.wait": 3,
    "liveServer.settings.CustomBrowser": "chrome",
}

here is markup:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
   test
</body>
</html>
Solution

  • Updated question shows complete HTML example that should work with default preferences. Presumably the problem lies in the

    "liveServer.settings.useWebExt": true,

    preference: if the browser you are starting does not have installed required Live Server - Web Extension and if your preferences do not adhere to Setup Documentation, then reloads will not be triggered according docs.

    Frankly, I was not able to set it up to work with web extension so I've either missed some detail there or it is a bug probably.

    Plus, Preferences documentation tells that Web Extension approach should even work with head- and body-less documents.

    • liveServer.settings.useWebExt: : If it is true, Live Reload will be fully controled by the Live Server Web Extension. And also, it does not matter if your HTML have <body> tag or not, Live Reload will work for every file. :smile:
      • Default is false

    Original question included just first the HTML example (and I've missed aforementioned documentation part) so it seemed that problem might be that uch empty file does not work with the Live Server (ritwickdey.LiveServer) extension's "Live Reload" feature, and it even warns you about that in a notification bubble:

    single line document with meta charset tag

    Live Reload is not possible without a head or body tag.

    I understand, don't show again

    So use more complete HTML skeleton with those optional <head> and <body> tags if you want to see it live-reloaded upon save with this extension.