VS Code中使用live Server中所涉及的配置问题

live server可以实时查看代码更改后的变化。测试十分快速。详细用处可以自行百度。

本文教你live server安装过程中所涉及的方方面面,超级容易上手。安装步骤如下:

目录

一、安装live server

二、配置live server

三、配置后使用live server


一、安装live server

在扩展中搜索 live server,然后点击安装。等待安装完毕进行下一步配置。

VS Code中使用live Server中所涉及的配置问题

 

二、配置live server

1、安装之后,开始配置live server,在VS Code 界面中点击快捷键【Ctrl+Shift+P】,输入setting,然后进入配置,就像箭头这样的配置,都可以进去,目的是进去配置界面,随便点击一个进入配置界面。

VS Code中使用live Server中所涉及的配置问题

 

2、点击【在settings.json中编辑】,然后再里面编入live server 的设置。

VS Code中使用live Server中所涉及的配置问题

VS Code中使用live Server中所涉及的配置问题

3、重启VS Code让Live server的设置生效。

三、配置后使用live server

切记:live server需要运行文件夹中的文件。

否则会报错【Open a folder or workspace… (File -> Open Folder)】

详细报错解决措施:Open a folder or workspace... (File -> Open Folder)

 

第一次使用可如下使用:

1、打开文件夹

VS Code中使用live Server中所涉及的配置问题

2、选择文件夹之后,如[VUE_LEARN]就是我选择的文件夹,然后点击旁边的[新建文件]

VS Code中使用live Server中所涉及的配置问题

3、新建好之后,自己添加后缀名.html

VS Code中使用live Server中所涉及的配置问题

4、写入html代码,右键点出live server开始测试

VS Code中使用live Server中所涉及的配置问题

5、测试成功。

VS Code中使用live Server中所涉及的配置问题