基本概念:
Live Server:一个具有实时加载功能的小型服务器,可以使用它来破解html/css/javascript,但是不能用于部署最终站点。也就是说我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。
安装
一、在VS Code扩展中搜索Live Server,并安装

二、打开命令面板,输入settings,点击首选项

三、搜索Live Server配置项,将左侧需要修改的配置项复制到右侧用户设置并修改

Live Server的配置
{ "liveServer.settings.port": 8080, //设置本地服务的端口号 "liveServer.settings.root": "/", //设置根目录,也就是打开的文件会在该目录下找 "liveServer.settings.CustomBrowser": "chrome", //设置默认打开的浏览器 "liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging-port=9222", "liveServer.settings.NoBrowser": false, "liveServer.settings.ignoredFiles": [//设置忽略的文件".vscode/**","**/*.scss","**/*.sass" ] }
使用
设置完毕后,重启vscode,并选择需要浏览的文件,右键开启服务

其他开启方法:
1、在窗口的最底部有Go Live可以点击,一旦点击,就会自动在浏览器中打开HTML文件
2、快捷键
(alt+L, O) 打开服务
(alt+L, C) 关闭服务
3、按F1,然后在输入栏中输入
Live Server: Open Live Server to start a server 打开服务,
或者 Live Server: Close Live Server to stop a server 关闭服务
可以在浏览器中浏览网页
并且在VS Code保存,浏览器即可自动刷新

注意事项
1、注意端口占用