简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > 开发工具 > VSCode > 正文

vscode如何实现实时预览效果

王林
发布： 2020-01-10 10:00:40
原创
11823 人浏览过

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中文网其他相关文章！

相关标签：
vscode 实现 效果
来源：php.cn
上一篇：vscode如何取消标签提示下划线 下一篇：vscode如何更换代码编辑框背景
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
页面突然无法拉动 css 或 bootstrap 所以我正在开发一个页面，我昨天做了一部分，效果很好，今天我继续做剩下的部分，一切都很好。当我尝试将其作为普通html页面打开时，CSS或BOOTSTRAP不起作用，仅显示页面文本，...
来自于 2024-04-06 21:58:04
0
1
800
数独检查器无法工作？谁能帮我识别错误？ 我尝试了在线编辑器上的所有方法，但仍然收到错误。但当我在我的机器上的VSCode上执行此操作时，它工作正常。我很困惑，在没有发现错误的情况下无法提交代码。我不知道该去哪里寻找了。我...
来自于 2024-04-06 21:21:07
0
1
474
我的网页在 HTML 中有标题，但不可见 所以我刚刚开始编码，所以不要评判我。我试图使用vscode创建我的网站，我使用html和css，但是我试图放在代码左上角的标题和按钮没有显示在浏览器上，我在网络上搜索并可以似乎不明...
来自于 2024-04-01 18:24:53
0
1
364
如何自定义 VSCode id 属性？ 我最近从Atom迁移到VSCode，虽然我设法根据自己的喜好自定义大部分编辑器，但我仍然缺少一些我喜欢的Atom功能。其中之一是Atom中的“id”属性曾经是一种特定的颜色，类似于...
来自于 2024-03-31 14:13:45
0
1
373
/bin/sh: 1: C:xamppphpphp.exe: 未找到 我正在使用WSL2、Ubuntu20.04并运行VSCode。我在Windows上的VSCode和XAMPP中使用CodeRunner扩展我在Windows环境变量中设置了php....
来自于 2024-03-31 09:10:37
0
1
333
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！