VSCode浏览器实时预览插件的使用

一：设置概要

当写起网页代码时会因为每次看效果必须每次打开浏览器查看，非常影响效率，我推荐一个可以实时预览的插件，可以在vscode内实时查看网页效果。

 

二：操作步骤

第一步：打开扩展工具，快捷键(ctrl+shift+x)

第二步：搜索框输入preview on web server

第三步：点击安装按钮，我这里已经安装过。

第四步：点击设置，快捷键(ctrl+,)

第五步：在设置搜索框搜索settings，然后配置文件settings.json

第六步：添加"previewServer.port": 5500,（端口号）然后保存。

第七步：打开html文件输入内容，右键单击出现vscode-preview-server:Preview on side panel 快捷键（ctrl+shift+V）

保存即可立马预览效果。