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秒,妥妥的效率工具。

发表评论