初学前端时,要是频繁的预览写好的页面,未免会显得繁琐而且拉低学习效率。
这里推荐使用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 即可。