在 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迷.