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 网页代码实时预览内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
- brackets编辑器在ie11下实现实时预览设置方法(版本需brackets 1.3以上)
- 海康IPC+ffmpeg+nginx+ckplayer实现网页实时预览监控视频
- js实现Select头像选择实时预览代码
- vscode保存代码,自动按照eslint规范格式化代码设置
- sublime text 3 + LiveReload插件实现前端代码实时预览(同时支持Chrome和Firefox)
- VSCode中tab自动补全html代码设置
- vscode Tab补齐代码设置
- 在vs code中使用ftp-sync插件实现客户端与服务器端代码的同步
- VS Code 折腾记 - (13) VS Live Share (可提高效率的代码实时协作插件)的使用姿势
- vscode中对flake8(python静态代码检查工具)和yapf(python代码格式化工具)的设置
- VSCode代码自动换行设置
- 最简单的JS网页拖动块练习(html+css+js实现,vscode编辑器实现)
- 用网页技术CSS实现网页背景渐变的四种代码设置
- 在vs code中使用ftp-sync插件实现客户端与服务器端代码的同步
- 海康IPC+ffmpeg+nginx+ckplayer实现网页实时预览监控视频
- VSCode 同步设置及扩展插件 实现设备上设置统一
- VUE在VSCode中的代码格式化设置
- vs2008C#网页实现显示实时时间
- vs code如何设置每行的代码长度
- JQuery 改变页面字体大小的实现代码(实时改变网页字体大小)