VS Code 插件 Live Server

布满荆棘的人生 2023-07-07 03:38 49阅读 0赞

# 安装插件 #

直接在扩展商店搜索 live server，下面几个服务器均可。安装好后重启 vs code。

live server 插件实现了

*  为本地前端开发，提供了一个临时搭建的后台服务
 *  修改文件保存后，浏览器自动刷新显示

![在这里插入图片描述][20200220112253428.png]

# 开启服务的4种方式 #

1.  在窗口的最底部有 Go Live 可以点击，一旦点击，就会自动在浏览器中打开HTML文件  
    ![在这里插入图片描述][20200220144937170.png]
2.  在HTML文件中右键，然后点击open live server技术分享  
    ![在这里插入图片描述][20200220144752972.png]
3.  快捷键 (Alt+L, O) 打开服务 (Alt+L, C) 关闭服务  
    ![在这里插入图片描述][20200220112634851.png]
4.  按F1，然后在输入栏中输入 Live Server: Open Live Server to start a server 打开服务，或者 Live Server: Close Live Server to stop a server 关闭服务  
    ![在这里插入图片描述][202002201113577.png]

# 修改配置 #

查看 ——》命令面板（快捷键 Ctrl + Shift + P）![在这里插入图片描述][20200220155213744.png]  
输入 settings 打开工作区设置

![在这里插入图片描述][2020022015535993.png]工作区设置 ——》扩展 ——》Live Server Config，随便点击一个 “在 settings.json 中编辑”，输入下面内容即可改变配置。  
![在这里插入图片描述][20200220160016732.png]

{
    	"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"
    	]
    }

[20200220112253428.png]: https://img-blog.csdnimg.cn/20200220112253428.png
[20200220144937170.png]: https://img-blog.csdnimg.cn/20200220144937170.png
[20200220144752972.png]: https://img-blog.csdnimg.cn/20200220144752972.png
[20200220112634851.png]: https://img-blog.csdnimg.cn/20200220112634851.png
[202002201113577.png]: https://img-blog.csdnimg.cn/202002201113577.png
[20200220155213744.png]: https://img-blog.csdnimg.cn/20200220155213744.png
[2020022015535993.png]: https://img-blog.csdnimg.cn/2020022015535993.png
[20200220160016732.png]: https://img-blog.csdnimg.cn/20200220160016732.png