Visual Studio Code实时预览插件live preview的安装和使用

初学前端时，要是频繁的预览写好的页面，未免会显得繁琐而且拉低学习效率。

这里推荐使用liver preview这个VScode插件，实现在VScode内部实现边写边预览的效果。

1.安装插件：

打开VScode》点击‘拓展’》搜索‘live preview’》点击‘安装’按钮。等待几秒安装完毕后，关闭VScode，再重启VScode，让插件生效。

2.测试插件：

ctrl+n新建一个文件》再ctrl+s将文件保存为html文件》按!+Tab键，在html内生成基本骨架。可以看见右上角有一个图标，鼠标悬停其上会有‘show preview’的提示文本，点击该图标。可以看见preview插件页面默认出现在右侧。

我们也可以右键顶部的文件名，选择向上/下/左/右拆分，以更改为更合适自己的页面布局。

在html文件内键入文字，发现已经有了实时预览的效果。 

3注意点：

文件名的设置不能是中文，否则preview插件无法正常读取文件内容，出现乱码。

 4.小建议：书写代码要经常ctrl+s对文件进行保存，不及时保存文件往往带来很多不必要的麻烦。

可以考虑将设置自动保存功能：

VScode内，文件》首选项》设置》 把FIies：Auto Save里面的 off 改成 after Delay 即可。