在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进行编程，那么他默认会在下方渲染他的前端代码，你也可以实时观察到网页的变化。