VSCode中安装Live Server插件实现Html网页代码的实时预览

VSCode中安装Live Server插件实现Html网页代码的实时预览

利用寒假时间学习了一些基本的网页知识，在编写Html代码时可以利用IDEA、WebStorm、Dream Weaver等工具，当然也可以选择使用拥有丰富插件、可以编写多种语言的轻量开发工具—VSCode，今天来介绍一下如何在VSCode中编写Html语言，并通过安装插件实现网页代码的实时预览。

1、打开VSCode,找到“扩展”并打开

在这里插入图片描述

如果没有打开左侧的工具栏，也可以在"查看—>扩展"中打开

在这里插入图片描述

2、在插件搜索栏中输入" Live Server" 来查找插件

在这里插入图片描述

然后点击"安装"，等待安装完毕

在这里插入图片描述

3、安装插件完成后，重启VSCode软件(不要忘记这一步)

4、重启之后，打开资源管理器，接着新建一个工作区（其实也可以直接将一个空文件夹拖到VSCode中），然后我们在工作区中新建一个Html文件，就可以来编写Html文件了。这里注意：如果单独将一个HTML文件拖动到VSCode中是无法使用Live Server的，即无法实现实时预览，这是需要把该HTML文件放到我们所创建的工作区(文件夹)中，才可以发挥该插件的功能，上述工作完成后，在状态栏上看到一个Go Live标识，单击该标识会自动打开浏览器并显示网页文件的效果

在这里插入图片描述

下方的“Go Live”标识

在这里插入图片描述

6、编写好Html文件后，点击下方的“Go Live”标识，即可自动打开默认浏览器并运行编写代码，在编写的过程中可以实现网页代码的实时预览。

在这里插入图片描述

另一种打开方式是右击选中的Html文件，点击“Open With Live Server”，同样可以实现上述效果。

在这里插入图片描述

之后我们在编辑代码的过程里，只要按下“Ctrl+S”(即将文件进行保存)，就可以实时看到代码的运行效果。

注意：在点击Go Live后可能会提示我们“Server is Started at port : 5500”(如下图所示)，个人也不太清楚这时什么原因，希望明白的大神可以进行说明与解释，但这个提醒似乎并不影响这个插件的功能

在这里插入图片描述

最后，我们可以愉快地利用Live Server插件，在VSCode中一边写代码，一边实时预览网页代码的运行效果了。