vscode-实现html和vue实时预览-对比了vscode的8个预览插件

原创 最新推荐文章于 2026-07-14 09:58:50 发布 2.9w 阅读 AI写同款
收录于
前端随记

当前文章被收录于：

前端随记
15 篇文章 0 人学习
订阅专栏 查看详情
billycoder
billycoder 博客等级 码龄17年 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 2.9w累计阅读 3w+平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要
171粉丝188篇原创
关注
分享六个 Vue3 开发必备的 VSCode 插件 今天分享的 6 个插件，大家可以按需安装使用。我比较强烈推荐实用Volar 和Vue VSCode Snippets 这 2 个插件。 阅读详情
AI摘要

这篇博客介绍了VSCode中多个用于网页预览的插件，如OpeninBrowser、HTMLPreview、vscode-preview-server、LiveServer、BrowserPreview、justhemlpreview、BrowseLite和livePreview。每个插件的特点和适用场景被详细阐述，强调了选择预览工具应以个人需求和喜好为主。LiveServer和justhemlpreview因其实时预览和适应不同项目调试的特点受到推荐。

1.Open in Browser

  • 打开chrome浏览器或者其他外部浏览器
  • 总结:单纯想打开外部浏览器,用它
    在这里插入图片描述

2.HTML Preview

  • 内嵌浏览器
  • 打开方便,当前页面是html页面,点击右上角图标就可以了
  • 可以实时预览效果
  • 不足:带图片的话,不能有中文路径

在这里插入图片描述

3.vscode-preview-server

  • 可以实时预览效果
  • 右键使用
  • 可以内嵌,也可以外部
    在这里插入图片描述

右键使用
在这里插入图片描述

4.Live Server

  • 可以实时预览效果
  • 右键使用
  • 打开外部浏览器
    在这里插入图片描述
    右键菜单
    在这里插入图片描述

5. Browser Preview

  • 不在维护
  • 内嵌浏览器
  • 呼出方便
  • 适合调试vue项目或者web app项目
  • 或者简单百度一下东西
  • 可以调手机和pc模式
  • 不足:内容会变的有点模糊
    在这里插入图片描述
    在这里插入图片描述
    侧边栏菜单呼出
    在这里插入图片描述

6.just heml preview

  • 内嵌浏览器
  • 命令输入"just" 可以找到并呼出
  • 适合调试vue项目或者web app项目
  • 优点:比Browser Preview显示清晰
  • 可以调手机和pc模式
    在这里插入图片描述

7.Browse Lite

  • 内嵌浏览器
  • 命令输入"lite" 可以找到并呼出
  • 适合调试vue项目或者web app项目
  • 可以调手机和pc模式
  • 不足:总是有点显示不清晰
  • 内嵌一个debug,这个不错
    在这里插入图片描述

8.live Preview

  • 内嵌浏览器,外部浏览器都有
  • 命令输入"live" 可以找到并呼出
  • 适合调试html项目
  • 内嵌一个debug,这个不错
    在这里插入图片描述
    在这里插入图片描述

总结

  • 工具没有绝对好,适合自己最好,用多了才知道自己最喜欢哪个
  • 哈哈,我都装了
标签
#vscode #vscode内嵌浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
三种HTML文件预览方案对比：新窗口、弹窗与iframe的优缺点解析 本文深入对比了HTML文件预览的三种主流方案：新窗口打开、弹窗内嵌渲染与iframe嵌入。分析了各自在隔离性、用户体验、性能及安全性上的核心优缺点，并提供了基于内容来源、交互需求等关键因素的技术选型指南，特别针对docx等文档转换预览场景给出了优化建议。 阅读详情

相关推荐

从一条消息到多个接收方，理解 SAP PI 中的 Routing 设计

摘要： SAP PI 的 Routing 能力常被低估，其核心在于运行时动态决策消息流向，而非简单的协议转换或通道配置。Routing 根据消息内容（如客户编号、销售区域等业务字段）将消息分发至不同后端系统，实现业务分流，降低发送方与接收方的耦合度。典型场景如集团订单按区域分发至不同 ERP 系统。SAP PI 通过 Receiver Determination 和 Interface Determination 分层管理接收方与目标接口，支持多接收方分发及条件路由。内容路由（如基于字段值的动态判断）虽灵活

2007 年 ~ 2025 年，深耕 SAP 技术 18 年 8388

vscode 如何实时显示html文件？

VSCode 实时预览 HTML 页面 注意：html文件名或者路径好像不能有中文，否则显示不出来？

Dontla的博客 1万+

htmlpreview:托管在此处的html预览页

htmlpreview 托管在此处的html预览页

如何在VSCode内嵌浏览器实时预览Vue项目

如何在VSCode内嵌浏览器实时预览Vue项目

m0_50298323的博客 8369

USB摄像头开发实战：从参数配置到图像采集的完整流程（Python+OpenCV）

本文详细介绍了USB摄像头开发的完整流程，从参数配置到图像采集，使用Python和OpenCV实现。内容涵盖硬件原理、环境配置、参数调优及高级优化技巧，帮助开发者解决常见问题如分辨率设置、帧率控制和灯光频闪等，提升开发效率。

star的博客 235

硬件工程师八大细分岗位详解：从芯片到整机的技术分工与职业选择

硬件工程作为电子系统设计的核心领域，涉及从芯片级到整机级的完整技术链条。其基本原理是通过电路设计、信号处理和功率管理等技术，将电子元件集成为功能完备的硬件系统。随着产品复杂度提升，硬件工程师岗位出现高度专业化分工，这种细分不仅提升了技术深度，更优化了团队协作效率。在工程实践中，信号完整性和电源完整性成为高速数字设计的两个关键技术挑战，直接影响系统稳定性。本文基于行业热词"硬件工程师"和"信号完整性"，深入解析八大细分岗位的技术差异，帮助从业者明确职业发展方向，构建系统化的硬件设计思维。

weixin_33811539的博客 457

VsCode工具开发vue项目必装插件

VsCode工具开发vue项目必装插件 目录VsCode工具开发vue项目必装插件1.概述2.VsCode插件清单2.1.Vetur插件让vue文件代码高亮2.2.Vue VSCode Snippets自动生成vue模板内容插件1.安装插件2.使用插件生成vue模板代码2.3.LiveServer实时刷新网页1.安装LiveServer2.使用LiveServer打开网页3.开启自动保存2.4.开发工具设置2个空格缩进2.5.browser插件浏览器插件查看html文件1.安装创建2.浏览html文件 1.

Bruce小鬼 3万+

【eNSP 华为模拟器】单臂路由实战：从原理到配置全解析

本文详细解析了单臂路由技术，通过华为eNSP模拟器从原理到配置进行实战教学。文章阐述了单臂路由如何利用路由器单物理接口创建多个子接口，实现不同VLAN间通信，并提供了完整的操作步骤、配置命令及排错方法，帮助网络工程师掌握这一经典网络技术。

699

分享 6 个 Vue3 开发必备的 VSCode 插件

今天分享的 6 个插件，大家可以按需安装使用。我比较强烈推荐实用Volar和这 2 个插件。👍大家有更好的插件，欢迎评论分享~🔥欢迎关注我的微信公众号“前端自习课”。

pingan8787 2万+

李宏毅机器学习笔记第17周_概述领域自适应（Domain Adaptation）

Domain Adaptation

peaunt1的博客 1105

2023最新扫码连wifi-扫码挪车-聚合CPS返利多合一小程序源码

2023最新扫码连wifi-扫码挪车-聚合CPS返利多合一系统 系统特点: 目前已接入的 CPS 渠道: 充值:话费充值、电费充值、影视会员充值、会员卡券充值 本地团购:联联周边游 电商平台:京东、拼多多、唯品会、淘宝、抖音美团:外卖、闪购、酒店、到店、优选饿了么:外卖、商超 出行服务:滴滴打车、滴滴加油、滴滴货运、花小猪打车、高德打车、同程打车 连锁餐饮点餐:肯德基、麦当劳、百果园、奈雪的茶、瑞幸咖啡、星巴克、喜茶、汉堡王、必胜客电影票:特价电影票 注意:以上涉及到需要支付的 CPS 渠道,不需要预存!

qq_41837379的博客 3113

VSCode必备插件！快看过来！

同学同学，你是不是也很头疼VSCode不知道安装什么插件啊？尤其是萌新小白，更是一头雾水，那就快来一起看看吧~

qq_50260510的博客 4万+

Ceres Solver：从入门到使用

Ceres Solver是谷歌开源的C++非线性优化库，能够解决有约束或无约束条件下的非线性最小二乘问题。2010年之后大量的运用在谷歌的产品开发中，尤其在谷歌开源的cartographer中被大量的使用。 ceres可以在Linux，Windows，macOS，Andrioid，IOS系统进行安装使用，详情可查看下方的官网链接。 Ceres Solver 官网：http://ceres-solver.org/

非晚非晚的博客 1万+

VSCode 前端常用插件

1.Auto Close Tag 　　自动闭合HTML/XML标签 2.Auto Rename Tag 　　自动完成另一侧标签的同步修改3.Beautify 　　格式化代码，值得注意的是，beautify插件支持自定义格式化代码规则4.Bracket Pair Colorizer 　　给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色 5.Deb...

fairyier 1万+

JAVA：Spring Boot 集成 Atomikos 实现分布式事务

摘要： Atomikos是一款基于JTA标准的分布式事务协调器，通过两阶段提交（2PC）协议实现跨数据库/消息系统的事务一致性，适用于金融等高要求场景。本文以Spring Boot集成Atomikos为例，演示多数据源（订单库、库存库）的分布式事务管理。核心步骤包括：引入Atomikos依赖、配置XA数据源、设置两阶段提交的MyBatis多数据源，并通过Atomikos协调全局事务，确保跨库操作原子性。代码示例涵盖配置类、YAML定义及MySQL XA数据源初始化，为分布式系统提供强一致性解决方案。

木头 334

PX4从放弃到精通（二十一）：使用git管理PX4代码

文章目录前言一、设置git密钥二、将代码上传至gitee 前言 Ubuntu 18.04 PX4 1.11.3 由于github有时网速较慢，本文使用gitee。 一、设置git密钥 ssh-keygen -t rsa -C “your_email@youremail.com” your_email@youremail.com为自己注册的gitee账户邮箱.设置路径与密码时,也直接回车不设置,如下图,密钥生成的位置在红框处. 在密钥目录下按Ctrl+H显示隐藏文件,进入.ssh文件夹用gedit打开id

超维空间科技的博客 3480

VSCODE Vue插件

1.Auto Close Tag——自动闭合尾部的标签 2.Atuo Rename Tag——修改 html 标签 自动帮你完成头部和尾部闭合标签的同步修改 3.Bracket Pair Colorizer——用于颜色匹配括号 4.Chinese （Simplified）Language Pack for Visual Studio Code——汉化VsCode 5.Code Spell Checker——代码拼写检查器 一个与camelCase代码配合良好的基本拼写检查程序。 此拼写检查程序的目标是帮助捕

讯达网络科技的博客 1万+

OV9734 DATASHEET，完整规格书

OV9734完整规格书，包括电气参数，尺寸规格，寄存器配置表等

VsCode 常用好用插件/配置+开发Vue 必装的插件

VsCode 常用好用插件/配置+开发Vue 必装的插件

伟庭的博客 2万+

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明，包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面，电脑运行连游戏界面都一样大小，很怀旧，很真实，（英文版）强烈推荐，很小的文件，很难才找到的。

vscode显示页面_VSCode设置网页代码实时预览的实现

一、设置描述1.VSCode作为一款很不错的开发软件，相比DW更小巧，用来测试前端特别不错，那么我们平时开发网页发现只有写完代码，然后保存，接下来到浏览器中刷新查看效果，然后不停重复，我们发现很多时间就这样浪费到了这三个步骤上。2.其实我们可以在VSCode中配置一个网页服务器，修改完代码之后只需要保存代码浏览器就可以实时预览二、操作步骤1.打开VScode，点击坐标工具栏的最后一个进入插件安装2...

weixin_39979245的博客 2088

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术，以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索，主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式，计算机控制系统的数学描述与基本分析方法，以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

VSCode设置网页代码实时预览

一、设置描述 1.VSCode作为一款很不错的开发软件，相比DW更小巧，用来测试前端特别不错，那么我们平时开发网页发现只有写完代码，然后保存，接下来到浏览器中刷新查看效果，然后不停重复，我们发现很多时间就这样浪费到了这三个步骤上。 2.其实我们可以在VSCode中配置一个网页服务器，修改完代码之后只需要保存代码浏览器就可以实时预览 二、操作步骤 1.打开VScode，点击坐标工具栏的最后一个进入插...

qq_40997551的博客 2538

【VsCode】VsCode（Vue/React）的安装与48个插件大全

一、下载和安装 下载地址：https://code.visualstudio.com/download是Microsoft（微软的产品） 最好安装System Installer版 二、配置 1、打开【设置】，找到或搜索【Format on Save】，打对勾。 2、打开【设置】，找到或搜索【AutoSave】，选择：afterDelay。 三、插件（陆续更新中，红色推荐前端安装） 1、Chinese Language （简体中文，重启软件生效）。 2、Live Server（按alt+..

【敦厚的曹操】的专栏 1万+

vscode 开发vue必备插件_前端必备vscode插件推荐

1.Auto Close Tag自动补全 html 标签2.Auto Rename Tag修改 html 标签，自动帮你完成尾部闭合标签的同步修改3.Path Intellisense智能路径提示，可以在你输入文件路径时智能提示4.Open in Browser这个插件能让你从 vscode 打开 html 文件，并且可以自由选择用哪个浏览器打开5.Live Server在 vscode 中就可以...

weixin_35520863的博客 1万+

vue项目vscode常用插件

对于很多使用vscode编写vue项目的新手同学来说，可能不知道使用什么插件，这里简单说一下我常用的几款插件。 1. vetur vetur能够实现在 .vue 文件中： 语法错误检查，包括 CSS/SCSS/LESS/Javascript/TypeScript 语法高亮，包括 html/jade/pug css/sass/scss/less/stylus js/ts emmet 支持 代码...

weixin_42735794的博客 2万+

vsCode常用插件

以上就是今天要讲的内容，希望对你有所帮助。

weixin_69227792的博客 2036

Vue.js快速入门番外篇——Live Server插件的简介、安装与使用

简介 Live Server是一个具有实时加载功能的小型服务器，可以使用它来破解html/css/javascript，但是不能用于部署最终站点。也就是说我们可以在项目中实时用Live Server作为一个实时服务器实时查看开发的网页或项目效果。 安装 第一步，打开VSCode开发工具，在VSCode扩展中搜索Live Server，然后安装即可。 Live Server插件安装成功之后，应该就是下面这个样子了。 第二步，按Ctrl+Shift+P快捷键打开命令面板，输入settings，然后在下拉列表

李阿昀的博客 1万+
上一篇： uniapp引入uview-基于最新HBuilder X 3.3-基于uni_modules
下一篇： uview内置样式-带例子-带效果图-代码可下载-值得收藏
点赞 12
评论 2
书签 书签 57
billycoder
billycoder
博客等级 码龄17年 171粉丝 188原创
+ 关注 专栏目录 订阅专栏
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值