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

一:设置概要

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

 

二:操作步骤

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

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

VSCode浏览器实时预览插件的使用_第1张图片

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

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

VSCode浏览器实时预览插件的使用_第2张图片

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

VSCode浏览器实时预览插件的使用_第3张图片

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

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

VSCode浏览器实时预览插件的使用_第4张图片

VSCode浏览器实时预览插件的使用_第5张图片

保存即可立马预览效果。

你可能感兴趣的:(vscode插件,vscode)