zl程序教程

您现在的位置是:首页 >  后端

当前栏目

VS Code 插件 Live Server

2023-09-11 14:22:55 时间

安装插件

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

live server 插件实现了

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

在这里插入图片描述

开启服务的4种方式

  1. 在窗口的最底部有 Go Live 可以点击,一旦点击,就会自动在浏览器中打开HTML文件
    在这里插入图片描述
  2. 在HTML文件中右键,然后点击open live server技术分享
    在这里插入图片描述
  3. 快捷键 (Alt+L, O) 打开服务 (Alt+L, C) 关闭服务
    在这里插入图片描述
  4. 按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"
	]
}