Web开发强大利器VS Code上使用Live Server让你的开发事半功倍

百度已收录   阅读次数: 178
2021-04-1523:54:46 发表评论
摘要

日常做Web开发,伯衡君首选VS Code,次选Notepad++,都推荐了不少插件,具体可以参看下方的前情提要,而这次推荐的Live Server则是伴随着Web开发不可获取的插件,能够实时显示项目中修改的内容,即所写即所得,分享给大家……

Web开发强大利器VS Code上使用Live Server让你的开发事半功倍

开篇寄语

日常做Web开发,伯衡君首选VS Code,次选Notepad++,都推荐了不少插件,具体可以参看下方的前情提要,而这次推荐的Live Server则是伴随着Web开发不可获取的插件,能够实时显示项目中修改的内容,即所写即所得,分享给大家。

前情提要

内容详情

伯衡君这里演示如何使用live server,首先是安装。

打开VS Code,从左侧目录寻找插件选项,点击,搜索live server,点击安装就可以了。

Web开发强大利器VS Code上使用Live Server让你的开发事半功倍

随后,任意打开一个项目,注意,这里说的是项目,不是单个的网页,不然live server是不起作用的,一个项目最起码你得有个文件夹,文件夹下面至少有一个文件。

这里伯衡君就以之前分享的这篇文章《上次制作的Easy Web TV的Beta版正式发布喽,快来尝鲜体验》的项目为例了,打开后,项目是这个样子,可以看到右下角有一个Go Live:

Web开发强大利器VS Code上使用Live Server让你的开发事半功倍

之后,默认浏览器就会弹出页面,制作的网站就会有一个本地地址供您预览啦,每次保存修改后,该页面都会刷新进行对应的页面生成。

Web开发强大利器VS Code上使用Live Server让你的开发事半功倍

这样对于比较复杂的项目来说,可以极大提高工作效率。

分享至:
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: