首页 开发工具 VSCode vscode如何实现实时预览效果

vscode如何实现实时预览效果

Jan 10, 2020 am 10:00 AM
vscode 实现 效果

vscode如何实现实时预览效果

1、打开VScode,点击【扩展】,在搜索框中输入Live Server,在搜索结果中找到如下插件,选择安装

bcf7b72f33d81c4f2bd1f67f4137aa4.png

2、安装完成后重启软件,使插件生效

3、重启过之后,新建一个工作区(也可以直接拖一个文件夹到vscode中),在这里创建一个HTML文件做测试,注意单独新建一个HTML文件拖动到IDE中是使用不了Live Server的,需要把这个HTML文件放到创建的工作区(文件夹)中,新建完成后我们可以在状态栏上看到一个Go Live,单击会自动打开浏览器并显示

提示:如果之前也有HTML项目,直接把项目根文件夹拖动到VScode中就会自动添加到工作区

2358364d0ff200ad98cb86baf712cc0.png

1497032592fb24ee9fec99b662c87b5.png

4、如果没有状态栏上,也可以在文件上单击右键,选择Open With Live Server这一项

4fe5b1d24486daae0ac604a064fdfb9.png

5、接下来修改代码,只需要ctrl+S保存修改后的代码,浏览器即可自动刷新

20df32ec9d964275ce82b47cd834e4e.png

相关文章教程推荐:vscode教程

以上是vscode如何实现实时预览效果的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

vscode怎么查看word文档 vscode查看word文档的方法 vscode怎么查看word文档 vscode查看word文档的方法 May 09, 2024 am 09:37 AM

首先,在电脑上打开vscode软件,点击左边的【Extension】(扩展)图标,如图中①所示然后,在扩展界面的搜索框中输入【officeviewer】,如图中②所示接着,从搜索结果中选择【officeviewer】安装,如图中③所示最后,打开文件,如docx,pdf等,如下图

vscode工作区怎么添加文件 vscode工作区添加文件的方法 vscode工作区怎么添加文件 vscode工作区添加文件的方法 May 09, 2024 am 09:43 AM

1.首先,打开vscode软件,点击资源管理器图标,找到工作区窗口2.然后,点击左上角的文件菜单,找到将文件夹添加到工作区选项3.最后,在本地磁盘中找到文件夹位置,点击添加按钮即可

vscode怎么开启后台更新 vscode开启后台更新方法 vscode怎么开启后台更新 vscode开启后台更新方法 May 09, 2024 am 09:52 AM

1.首先,打开界面后,点击左上角的文件菜单2.随后,在首选项栏目中点击设置按钮3.接着,在跳转的设置页面中,找到更新板块4.最后,鼠标点击勾选启用在Windows上后台下载和安装新的VSCode版本按钮,并重启程序即可

vscode怎么禁止wsl配置文件 vscode禁止wsl配置文件方法 vscode怎么禁止wsl配置文件 vscode禁止wsl配置文件方法 May 09, 2024 am 10:30 AM

1.首先,打开设置菜单中的settings选项2.随后,在跳转的commonlyused页面中找到terminal栏目3.最后,在该栏目右侧取消勾选usewslprofiles按钮即可

VScode怎么设置动画平滑插入 VScode设置动画平滑插入教程 VScode怎么设置动画平滑插入 VScode设置动画平滑插入教程 May 09, 2024 am 09:49 AM

1.首先,打开界面后,点击工作区界面2.然后,在打开的编辑面板中,点击文件菜单3.随后,点击首选项栏目下的设置按钮4.最后,鼠标点击勾选CursorSmoothCaretAnimation按钮,保存设置即可

Vscode怎么打开工作区信任权限 Vscode打开工作区信任权限方法 Vscode怎么打开工作区信任权限 Vscode打开工作区信任权限方法 May 09, 2024 am 10:34 AM

1.首先,打开编辑窗口后,点击左下角的配置图标2.随后,在打开的子菜单中点击管理工作区信任按钮3.接着,在编辑窗口中找到该页面4.最后,根据自己的办公需求勾选相关指令即可

Vscode怎么打开动画 Vscode打开动画的方法介绍 Vscode怎么打开动画 Vscode打开动画的方法介绍 May 09, 2024 am 10:28 AM

1.首先,点击打开更多菜单中的settings选项2.然后,找到Features板块下的terminal栏目3.最后,在栏目右侧,用鼠标点击勾选enableanimation按钮以后,保存设置即可

vscode怎样设置文件图标主题_vscode设置文件图标主题方法 vscode怎样设置文件图标主题_vscode设置文件图标主题方法 May 09, 2024 am 10:00 AM

1.打开界面后,点击左下角的扩展按钮2.在扩展商店中搜索找到vscode-icons插件进行安装3.随后点击左上角文件菜单中的首选项按钮,找到文件图标主题选项4.找到刚刚安装的插件进行设置即可

See all articles