安装插件
直接在扩展商店搜索 live server,下面几个服务器均可。安装好后重启 vs code。
live server 插件实现了
- 为本地前端开发,提供了一个临时搭建的后台服务
- 修改文件保存后,浏览器自动刷新显示
开启服务的4种方式
- 在窗口的最底部有 Go Live 可以点击,一旦点击,就会自动在浏览器中打开HTML文件
- 在HTML文件中右键,然后点击open live server技术分享
- 快捷键 (Alt+L, O) 打开服务 (Alt+L, C) 关闭服务
- 按F1,然后在输入栏中输入 Live Server: Open Live Server to start a server 打开服务,或者 Live Server: Close Live Server to stop a server 关闭服务
修改配置
查看 ——》命令面板(快捷键 Ctrl + Shift + P)
输入 settings 打开工作区设置
工作区设置 ——》扩展 ——》Live Server Config,随便点击一个 “在 settings.json 中编辑”,输入下面内容即可改变配置。
{
"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"
]
}