VSCode设置网页代码实时预览的实现
更新时间：2020年04月30日 11:47:34 作者：TianXin1432516744
这篇文章主要介绍了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如何修改已提交的commit注释问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
BMP文件的图像深度可选lbit、4bit、8bit及24bit。BMP文件存储数据时，图像的扫描方式是按从左到右、从下到上的顺序。由于BMP文件格式是Windows环境中交换与图有关的数据的一种标准，因此在Windows环境中运行的图形图像软件都支持BMP图像格式2016-01-01
这篇文章主要介绍了idea集成Git实现团队合作分工的原理，本文通过图文实例相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2020-12-12
开源项目广受大家喜爱，其实我们在使用开源项目的过程中有不少注意的事项，今天就来给大家介绍下如何正确的使用开源项目。需要的朋友可以参考一下2018-09-09
HTTP 协议是一个标准，定义了web客户端如何与服务器对话，以及数据如何从服务器传回客户端，下面这篇文章主要给大家介绍了关于基于HTTP协议的一些实时数据获取技术的相关资料，需要的朋友可以参考下2018-07-07
最近用360浏览器访问自己的网站，发现都是被优先选用兼容模式打开，这使得网站很难看。为了让360浏览器打开网站的时候优先使用极速模式，而非兼容模式，找了一下官方论坛，发现了解决方案。2016-07-07
本文带领大家梳理在idea中常用的git命令,对idea git命令使用相关知识感兴趣的朋友跟随小编一起看看吧2024-08-08
这篇文章主要介绍了git中commit和push的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要为大家介绍了vs code开发中语法正确但显示报错问题分析解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要为大家介绍了蝴蝶优化算法的讲解及实现源码，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步2022-02-02
最新评论