vsCode中live server插件的安装及使用

live server 插件是用来干嘛的?

本地开发常常需要搭建临时的服务,作用 :
1.模拟服务器的方式打开页面
2.代码改动后,会自动刷新页面

安装 :

vsCode中live server插件的安装及使用_第1张图片
vsCode中live server插件的安装及使用_第2张图片

使用 :

1.使用要求 :
要求项目文件夹 Demo 要单独出现在vscode侧边栏。以下两种都可以
vsCode中live server插件的安装及使用_第3张图片

vsCode中live server插件的安装及使用_第4张图片
文件夹打开错误示范 :vsCode中live server插件的安装及使用_第5张图片

tip : 写项目时大家最好留一个要编辑的项目文件夹在vacode侧边栏就可以,这样清清爽爽写代码,心里也舒畅(头发也掉的少啦)

2.使用 live server 插件打开页面:

如果vscode侧边栏只有项目文件夹Demo,那么在页面中,直接右键,选择open with live server 打开即可。
vsCode中live server插件的安装及使用_第6张图片
如果侧边栏有多个文件夹,按照下面的方式来设置:
vsCode中live server插件的安装及使用_第7张图片
vsCode中live server插件的安装及使用_第8张图片
设置好项目文件夹之后,打开要编辑的html页面,右键 --> open with live server。

以上就是live server 插件的使用说明及步骤,其实是非常简单的,大家根据图示一步一步流下来就ok了

补充 : 有的小伙伴用live server 插件打开不是谷歌浏览器,会有影响,下面是设置live server 插件打开时是谷歌浏览器的方法
vsCode中live server插件的安装及使用_第9张图片
最后 : 如果有理解不对的地方希望大家指出来,在下面评论区多交流沟通噢~~

你可能感兴趣的:(live,server插件,javascript,前端)