推荐一个超好用的 VSCode 插件 Live Server

4,153 阅读1分钟

image.png 拥有一个提高效率的插件,你就有更多的时间摸鱼了!!!

今天推荐的 VSCode 插件叫 Live Server,它的功能非常类似 serve,只需要鼠标点两下就可以在当前目录建立一个服务器,同时自动打开浏览器访问你点击的文件。另外它也支持自动 reload,当你修改文件之后,浏览器会自动刷新,免去了你去刷新的操作(能节约1秒就节约1秒,妥妥的效率工具)。

image.png image.png

特点

  • 两步鼠标点击(or 快捷键 alt+L alt+O) 自动打开浏览器访问当前页面
  • 支持修改文件自动 reload
  • 可定制端口
  • 支持排除文件
  • 支持快捷键
  • 可指定浏览器
  • 支持修改默认主机
  • 支持 SVG
  • 支持 HTTPS
  • 支持代理
  • CORS 开启

安装

首先搜索 Live Server 进行安装,安装完成不需要重新加载 VSC。

image.png

使用

开启

鼠标操作

在 VSCode 菜单栏,右键 HTML 文件,点击 Open with Live Server

image.png

快捷键

Alt+L O,记住是按住 Alt 时点击 LO,不是单独的 ALt+L or Alt+O

开启完成之后右下角会给出提示。

image.png

关闭

Alt+ L C

其他配置

文件 => 首选项 => 设置 => 搜索 Live Server

image.png

修改端口,默认端口是 5500。记住修改端口需要关闭 Server 然后再开启,端口配置才会生效。

image.png

修改默认浏览器。

image.png

指定主机。

image.png

设置 HTTPS。

image.png

指定代理。

image.png

也可以不打开浏览器,直接在 VSC 中浏览。

image.png

END

觉得文章有用,就点赞浏览关注吧~