VSCode设置网页代码实时预览的实现
一、设置描述
1.VSCode作为一款很不错的开发软件，相比DW更小巧，用来测试前端特别不错，那么我们平时开发网页发现只有写完代码，然后保存，接下来到浏览器中刷新查看效果，然后不停重复，我们发现很多时间就这样浪费到了这三个步骤上。
2.其实我们可以在VSCode中配置一个网页服务器，修改完代码之后只需要保存代码浏览器就可以实时预览
二、操作步骤
1.打开VScode，点击坐标工具栏的最后一个进入插件安装
2.如果没有显示左边的工具栏，也可以在View中找到Extensions进入插件安装
3.在搜索框中输入Live Server，在搜索结果中找到如下，选择安装
4.安装完成需要重启软件插件才能生效
5.重启过之后，新建一个工作区（也可以直接拖一个文件夹到vscode中），在这里创建一个HTML文件做测试，注意单独新建一个HTML文件拖动到IDE中是使用不了Live Server的，需要把这个HTML文件放到创建的工作区(文件夹)中，新建完成后我们可以在状态栏上看到一个Go Live，单击会自动打开浏览器并显示
提示：如果之前也有HTML项目，直接把项目根文件夹拖动到VScode中就会自动添加到工作区
6.如果没有状态栏上，也可以在文件上单击右键，选择Open With Live Server这一项
7.接下来修改代码我们只需要ctrl+S保存修改后的代码，浏览器自动刷新，动图显示
8.遇到问题解决不了别忘了留言~~
到此这篇关于VSCode设置网页代码实时预览的实现的文章就介绍到这了,更多相关VSCode 网页代码实时预览内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了GIt的基本操作。具有很好的参考价值，下面跟着小编一起来看下吧2017-01-01
在处理页面事件时，我们会经常会碰到这样的情况：当我们在提交一项页面表单时，在提交成功后，当我们试图按F5刷新页面时，数据会再次的被重复提交2012-10-10
本文主要介绍Git 工作区、暂存区和版本库的知识，这里整理了详细的资料，有需要的小伙伴可以参考下2016-09-09
WinSCP和PuTTY(与Linux系统链接的工具)的安装和使用图文教程
Putty是用来远程连接服务器的，支持SSH、Telnet、Serial等协议的连接,WinSCP是一个Windows环境下使用SSH的开源图形化SFTP客户端,它的主要功能就是在本地与远程计算机间安全的复制文件,本文重点给大家介绍WinSCP和PuTTY安装使用，感兴趣的朋友一起看看吧2022-06-06
这篇文章主要介绍了玩转VSCode插件之Remote-SSH的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
这篇文章主要介绍了Gitee的下载安装配置及使用,本文通过详细步骤给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-08-08
我们在日常使用Git的过程中经常会发生一些意外情况,如果处理不当,则可能会出现代码丢失的假象,这篇文章主要给大家介绍了关于Git冲突处理指南之如何高效解决代码冲突问题的相关资料,需要的朋友可以参考下2024-08-08
这篇文章主要为大家介绍了pycharm中venv文件夹自定义处理方式图解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
接下来小编就为大家介绍一下在Zend Stdio 8.0版本中的快捷键汇总。需要的朋友可以过来参考下，希望对大家有所帮助2013-10-10
这篇文章主要介绍了详解idea切换git账号的两个方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
最新评论