VS Code -- Live Server

Write a custom directory title here

Live Server

Live Server

The Live Server plug-in is used to automatically load files related to hot-deployed front-end pages (.html/.js/.ts/.css). Simply put, it means: quickly start local services, automatically monitor, and update content without refreshing. With it, debugging the front-end page no longer requires manually clicking the refresh button on the browser.

Install Live Server

Install Live Server in the vs code plug-in market
Insert image description here

Modify settings

Open the command panel in the settings, search for Live Server configuration items, copy the configuration items that need to be modified on the left to the user settings on the right and modify them.
Insert image description here

Configuration instructions

Live Server configuration instructions (just set the configuration you need, the code below is just an example)

{
    
    
    "liveServer.settings.host": "localhost", //域名或IP
    "liveServer.settings.port": 8080, //设置本地服务的端口号
    "liveServer.settings.wait": 1000, //刷新频率
    "liveServer.settings.root": "/", //设置根目录，也就是打开的文件会在该目录下找
    "liveServer.settings.CustomBrowser": "chrome", //设置默认打开的浏览器
    "liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging-port=9222",
    "liveServer.settings.NoBrowser": false,
    "liveServer.settings.ChromeDebuggingAttachment": false, //是否开启ChromeDebug
    "liveServer.settings.proxy": {
    
      //代理设置
        "enable": true, //是否开启代理设置 
        "baseUri": "/land", //代理的访问根路径，如http://localhost:5500/api
        "proxyUri": "http://47.103.60.208:9900" //远程服务端接口
    }
    "liveServer.settings.ignoredFiles": [//设置忽略的文件
        ".vscode/**",
        "**/*.scss",
        "**/*.sass"
    ]
}

Restart after setting

After setting the corresponding configuration, restart vs code, and then open it. You can right-click open with live server
Insert image description here

or click Go Live on the lower right side of vs code to open the browser.

tips

One last tip: put the html file in the folder, then open it from vs code and run open with Live Server or Go Live. You cannot open a single html file directly in vs code, otherwise an error will be reported.
Insert image description here
The above is an introduction to the installation and configuration of Live Server. I hope it can help coders in need!