网站开发环境准备第五篇：VSCode安装Live Server插件实现Html网页代码的实时预览

已于 2024-01-26 15:44:52 修改
阅读量944 收藏 8
点赞数 9
分类专栏： Java / CSS / Html 开发环境准备 文章标签： vscode
于 2024-01-04 14:09:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75715995/article/details/135385487
版权

前言

VSCode 使用 Live Server 插件可以实时预览 HTML 页面开发效果。

安装Live Server 插件

1、搜索插件:Live Server

2、安装完成后，重启VSCode软件，让插件生效

3、重启之后，打开需要实时预览的文件夹，选择需要实时预览的HTML文件，在状态栏上看到一个Go Live标识，单击该标识会自动打开浏览器并显示网页文件的效果

实时调试

当编辑页面修改内容后，ctr+s保存代码，浏览器上会自动同步显示效果

小卡拉米本米
关注
  • 9
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vscode html实时预览_推荐几款好用的VSCODE插件
weixin_39876877的博客
11-25 4542
点击上方蓝字关注我们Visual Studio Code 是由微软开发的一款免费、跨平台的文本编辑器。由于其卓越的性能和丰富的功能，它很快就受到了大家的喜爱。就像大多数 IDE 一样，VSCode 也有一个扩展和主题市场，包含了数以千计质量不同的插件。为了帮助大家挑选出值得下载的插件，我们针对性的收集了一些实用、有趣的插件与大家分享。01CSS Peek使用此插件，你可以追踪至样式表中 ...
vscode-live-frame：在VS Code中运行您的Web应用程序
03-04
VS Code动态框架 在VS Code中运行您的Web应用程序。 你为什么想这么做？ 您正在开发一个Web应用程序，并且已经有了某种实时/热重装设置。 使用Live Frame ，无需在编辑器和浏览器之间切换，而无需离开VS Code，即可查看更改。 或者，也许您正在流式传输或录制屏幕截图，而您只想在一个窗口中很好地处理所有事情。 无论您是什么原因，我们都不在这里进行判断。 如何使用它 从安装Live Frame 。 启动本地开发服务器 运行（ Cmd + Shift + P ）命令Live Frame: Open 请按照显示的。 扩展设置 将以下内容添加到您的用户或工作区设置。 鉴于您的应用程序的开发URL可能是特定于项目的，因此工作区设置可能更有意义。 { // Required: The website to display "liveFrame.url" : "
vscode-live2d-models:VSCode看板娘模型库
05-28
vscode-live2d-models VSCode看板娘模型库 VSCode看板娘: 打开 “设置@ext:charlesz.vscode-live2d” 粘贴模型对应的url即可直接使用 URL 1. bilibili-22 https://raw.githubusercontent.com/iCharlesZ/vscode-live2d-models/master/model-library/bilibili-22/index.json 2. bilibili-33 https://raw.githubusercontent.com/iCharlesZ/vscode-live2d-models/master/model-library/bilibili-33/index.json 3. chiaki_kitty https://raw.githubusercontent.com/
vscode-live-server：为静态和动态页面启动具有实时重新加载功能的开发本地服务器
02-06
[要尝试使用 （BETA）吗？ 它将启用实时更改，而无需保存文件。 ] 实时服务器 Live Server喜欢 :heart_with_arrow: 您的多根工作区 服务器端页面（如PHP）的Live Server。 [针对“找不到命令错误” ] 启动具有实时重新加载功能的本地开发服务器，以处理静态和动态页面。 启动/停止服务器的快捷方式 [注意：如果您的工作区中没有任何.html或.htm文件，则必须遵循方法4和5来启动服务器。 打开一个项目，然后从状态栏中单击Go Live启用”以打开/关闭服务器。 右键单击资源管理器窗口中的HTML文件，然后单击“ Open with Live Server 。 。 打开
推荐13款常用的Vscode插件
最新发布
m0_68271787的博客
03-01 3325
1.插件是一个用于前端开发的扩展，它的主要作用是提供一个本地开发服务器，以便实时预览和调试网页应用程序。热重载因为允许开发者在浏览器中实时预览您正在编辑的网页。每当保存文件时，该插件会自动刷新浏览器，以便开发者可以立即看到页面的更改效果。
VSCode浏览器实时预览插件的使用
qq_43310920的博客
01-05 1万+
一：设置概要 当写起网页代码时会因为每次看效果必须每次打开浏览器查看，非常影响效率，我推荐一个可以实时预览的插件，可以在vscode内实时查看网页效果。 二：操作步骤 第一步：打开扩展工具，快捷键(ctrl+shift+x) 第二步：搜索框输入preview on web server 第三步：点击安装按钮，我这里已经安装过。 第四步：点击设置，快捷键(ctrl+,) 第五步：在设置搜索框搜索settings，然后配置文件settings.json 第六步：添加"previ.
一、HTML VScode常用插件
Yang
07-22 3314
优点：一边编写代码一边保存，即实时刷新预览，大大提升开发测试效率。Theme 作用：显示 Vscode 文件、文件夹的图标。作用：修改标签，自动帮你完成头部和尾部闭合标签的同步修改。作用：该插件可通过编辑器打开默认浏览器显示代码效果。插件名称：Chinese 中文（简体）语言包。插件名称：Auto Rename Tag。插件名称：open in brower。插件名称：Material Icon。插件名称：carbon-now-sh。插件名称：Live Server。作用：通过插件可以开启本地服务。
vscode 如何实时显示html文件？
Dontla的博客
03-13 5826
VSCode 实时预览 HTML 页面 注意：html文件名或者路径好像不能有中文，否则显示不出来？
Vscode——vscode实时预览httml网页插件—live server
qq_43201350的博客
01-10 1973
Vscode——vscode实时预览httml网页插件—live server
vscode-实现html和vue实时预览-对比了vscode的8个预览插件
billycoder的专栏
02-06 1万+
1.Open in Browser 打开chrome浏览器或者其他外部浏览器 总结:单纯想打开外部浏览器,用它 2.HTML Preview 内嵌浏览器 打开方便,当前页面是html页面,点击右上角图标就可以了 可以实时预览效果 不足:带图片的话,不能有中文路径 3.vscode-preview-server 可以实时预览效果 右键使用 可以内嵌,也可以外部 右键使用 4.Live Server 可以实时预览效果 右键使用 打开外部浏览器 右键菜单 5. Brow
VSCode 使用教程-5.Live Server实时预览html效果
qq_27371025的博客
09-23 5288
VSCode 使用 Live Server 插件可以实时预览 HTML 页面开发效果。
推荐13款常用的Vscode插件，提高前端日常开发效率
热门推荐
DEVELOPERAA的博客
11-02 2万+
推荐13款常用的Vscode插件，提高前端日常开发效率
vscode-preview-server:实时预览VSCode扩展
05-02
vscode预览服务器 特征 该扩展提供了在Web服务器上执行HTML预览。 保存文件时，此扩展名会自动重新加载浏览器或侧面板（实时预览功能）。 您可以从上下文菜单或编辑器菜单调用这些功能。 主要功能如下。 Preview on side panel (ctrl+shift+v) ：在侧面板上打开HTML预览。 使用此功能，您可以轻松检查HTML，CSS和JavaScript的操作。 Launch on browser (ctrl+shift+l) ：在默认浏览器上打开网页。 您可以通过网页检查所有操作。 Stop the web server (ctrl+shift+s) ：停止Web服务器。 此功能只能在命令面板中使用。 Resume the web server (ctrl+shift+r) ：恢复Web服务器。 此功能只能在命令面板中使用。 show UI Page (c
assets_live2d网页_live2d网页_live2d网页_VScode看板娘_网站编程_
10-04
看板娘插入代码，可以在您设计的网页中添加一个live2D的看板娘
vsce-livepreview::desktop_computer:VSCode的Live Preview扩展
03-13
韦伯 SwifWeb应用程序的实时预览 用法 打开swifweb应用程序项目 点击Cmd+Shift+P 键入Webber Live Preview 按下Enter 请享用！ :rocket: 在上了解更多 享受！
VSCode中安装Live Server插件实现Html网页代码的实时预览
m0_46772594的博客
01-31 1万+
VSCode中安装Live Server插件实现Html网页代码的实时预览 利用寒假时间学习了一些基本的网页知识，在编写Html代码时可以利用IDEA、WebStorm、Dream Weaver等工具，当然也可以选择使用拥有丰富插件、可以编写多种语言的轻量开发工具—VSCode，今天来介绍一下如何在VSCode中编写Html语言，并通过安装插件实现网页代码的实时预览。 1、打开VSCode,找到“扩展”并打开 如果没有打开左侧的工具栏，也可以在"查看—>扩展"中打开 2、在插件搜索栏中输入" Li
在 VS Code 中运行 html 用到的插件
Evelyn_178的博客
07-11 2280
启动一个具有静态和动态页面实时重新加载功能的开发本地服务器，用于实时预览运行效果。使用 open in browser 运行代码时，只要代码有变动，就需要手动刷新重新预览页面运行结果，而 Live Server 可以自动刷新运行结果。运行代码片段或代码文件的多种语言：C、C++、Java、JavaScript, PHP、Python、Perl、Perl 6、Ruby、Go等40多种语言和自定义命令。在默认浏览器或应用程序中打开当前文件，用于运行代码。选择在其他浏览器中运行。选择在默认浏览器中运行。
VSCode插件分享：一个实时预览Vue/React组件的插件
qq_43067585的博客
11-16 5884
在VSCode中开发Vue/React组件时，怎么实时预览组件？本篇文章就给大家分享一个VSCode 中实时预览Vue/React组件的插件，希望对大家有所帮助！
前端 | VScode实现一边写代码一边可以实时查看页面效果[图文详解]
weixin_44649780的博客
07-01 7828
本文主要是基于VSCode实现实现一边写前端代码一边可以实时查看页面效果。
vscode安装插件liveserver
04-11
要安装VSCode插件liveserver，请按照以下步骤： 1. 打开VSCode编辑器。 2. 点击左侧的“扩展”图标（或使用快捷键Ctrl+Shift+X）。 3. 在搜索框中输入“liveserver”并按Enter键。 4. 找到“Live Server”插件并点击安装按钮。 5. 安装完成后，重启VSCode编辑器。 6. 在需要使用Live Server的HTML文件中，点击右键并选择“Open with Live Server”。 安装完成后，您可以在VSCode中方便地使用Live Server插件进行实时预览和调试Web应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值