在VS code中打开网页预览
在VS code中打开网页预览
在平时进行前端设计的时候,你是否会因为无法实时观察到网页的变化而苦恼,每一次都要重新打开html文件的过程过于繁琐,现在就有一种新的方式能够让你在coding的时候实时观察到网页效果的变化。
Live Server
我们首先需要安装live server插件
安装完成后,我们右键你创建的html文件会有一个open with live server选项
点击那个选项就会使用默认浏览器打开你的html文件
打开文件效果:
但是这样你就需要保持这个浏览器窗口一直在你编辑器的上方,是不是很麻烦?那么接下来的步骤就可以使得其变成编辑器中的一部分。
Browser Preview
VS code插件中悉心地提供了预览插件,叫做Browser Preview。我们下载这个插件
然后我们点击左下角的齿轮(设计)按钮,选择settings
在左边的Extensions一栏中找到Live Server Config
将其中的Use Browser Preview选项勾选,这样它就会默认使用Browser Preview而不是默认浏览器。
之后我们按照前面一样的操作右键html文件,选择open with live server
我们就会发现,现在他就会默认开双列,然后在右列使用了Browser Preview来展示我们的网页。
这样我们就可以一边coding,一边看到网页的变化了。
Hint
实际上,假如你使用codepen进行编程,那么他默认会在下方渲染他的前端代码,你也可以实时观察到网页的变化。