在 VS Code 中使用 Live Server 配置本地服务器
VS Code是一个开源的且非常轻量好用的IDE,拥有很多的插件使得VS Code很强大。
在这篇文章中,我们将了解如何使用 Ritwick Dey 的 Live Server 在 Visual Studio Code 中作为 Web 服务器运行。我们可以通过安装 Live Server 扩展轻松快速地设置本地实时服务器实现网页代码的实时预览。
特点
- 两步鼠标点击(胡总和快捷键 alt+L alt+O) 自动打开浏览器访问当前页面
- 支持修改文件自动 reload
- 可定制端口
- 支持排除文件
- 支持快捷键
- 可指定浏览器
- 支持修改默认主机
- 支持 SVG
- 支持 HTTPS
- 支持代理
- CORS 开启
工具
VS Code
方法/步骤
还未安装VS Code的朋友,请先安装。https://code.visualstudio.com/docs?dv=linux64 这里就不详细介绍下载安装过程了。
打开VS Code的插件安装功能,在左侧,如下:
打开并选择扩展,接着在输入框中搜索 Live Server,找到同名插件,第一个就是,点击【安装】
安装完成
成功安装后,你会发现在 VS Code 右下角的状态栏中出现了【Go Live】这个就是启动刚刚安装的插件开关。
单击它以启动你的本地实时服务器。点击启动服务器,会自动运行系统默认的浏览器,在编写好html文件后,点击下方的“Go Live”标识,即可自动打开默认浏览器并运行刚才编写的代码,在编写的过程中可以实现网页代码的实时预览。或者右击选中的html文件,点击“Open With Live Server”见图中的①,同样可以实现此效果。
如下图:
之后我们在编辑代码的过程里,只要按下“Ctrl+S”(即将文件进行保存),就可以实时看到代码的实时运行效果。
还可以如上图中的②,点击Live Preview:Show Preview,直接在VS Code里面预览html的,并且是自动实时更新的,不用不停地Ctrl+S保存查看。效果图如下:
如果默认端口5500 跟其他应用在使用端口有冲突或者我们需要自己设置下端口呢,接下来就简单介绍下如何设置服务器的端口和代理。当然如果端口冲突,插件会自动启动其他端口的,这个大家不必担心,放心使用即可。
点击【文件】=【首选项】=【设置】
搜索关键字【Live Server】一直往下找,我们可以找到Live Server相关设置
LiveServer.settings.port 是设置端口的
修改端口,默认端口是 5500。记住修改端口需要关闭 Server 然后再开启,端口配置才会生效。
LiveServer.settings.proxy是设置代理的
其他设置大家可以自己查看。
修改默认浏览器,如下图:
Live Server的功能非常类似 serve,只需要鼠标点两下就可以在当前目录建立一个服务器,同时自动打开浏览器访问你点击的文件。另外它也支持自动 reload,当你修改文件,按Ctrl+S后,浏览器会自动刷新,免去了你去刷新的操作。能节约1秒就节约1秒,妥妥的效率工具。
The post 在 VS Code 中使用 Live Server 配置本地服务器 first appeared on Linux迷.
共有 0 条评论