VsCode实时预览

最新推荐文章于 2024-05-18 18:50:15 发布
最新推荐文章于 2024-05-18 18:50:15 发布
阅读量476 收藏 9
点赞数 6
文章标签： vscode 编辑器 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53539384/article/details/136619805
版权

一共需要两个插件 Preview on Web Server 和 Live Server

先安装Live Server

安装成功之后，可以直接通过右键，点击Open With Live Server可直接打开预览

如果要在侧边显示实时预览效果的情况下，下载第二个插件Preview on Web Server

下载成功之后左下角点击齿轮-》设置

搜索setting，选择任意一个进入编辑即可（我选择的是第二个）

x

在原配置下新增配置端口

"previewServer.port": 8081

然后返回要打开的文件中右键

最终效果如图：

晚秋贰拾伍
关注
  • 6
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
VSCode设置网页代码实时预览的实现
10-15
主要介绍了VSCode设置网页代码实时预览的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vscode实时预览markdown效果
微电子学与固体电子学-俞驰
02-02 687
上面是搜索框。
Vscode——vscode实时预览httml网页插件—live server
qq_43201350的博客
01-10 1973
Vscode——vscode实时预览httml网页插件—live server
VScode实时预览markdown文档
m0_56208280的博客
03-16 2774
vscode 实时预览 markdown 文档
VSCode 实时预览HTML网页效果 - Live Server插件
热门推荐
鳄鱼儿
08-23 1万+
操作步骤 1.打开VScode，点击坐标工具栏的最后一个进入插件安装 2.在搜索框中输入Live Server，在搜索结果中找到Live Server，选择安装 3.实时预览，在文件上单击右键，选择Open With Live Server这一项，此时浏览器打开的网页就可以实时预览了 以上如有不对，请大家指正 ...
vscode-svg-previewer：Vscode SVG预览器
02-17
SVG预览器仅预览（而不是代码编辑器） 如果您想默认查看SVG预览而不是源代码。如何设置？ 打开任何SVG图像执行命令“视图：使用...重新打开编辑器”（通过命令面板） 选择“图像查看器”并将其设置为默认值命令： ...
vscodethemes：从VSCode市场预览主题
02-06
在VSCode市场上预览主题。 查看发布。 内置 ， 和 如何在VSCodeThemes上获得主题？ 为了使您的主题出现在它们必须： 发布到 扩展程序的package.json 包含 查看使用了GUI和标记颜色的 如果不确定为什么没有显示...
vscode-map-preview:VSCode地图预览扩展
05-27
VSCode地图预览 此扩展程序提供了预览地图上的空间数据文件和代码片段的功能支持的格式通过库提供的格式驱动程序可以获得对各种格式的支持。 CSV文件（自0.5.0 ） 威客 如何使用此扩展打开任何纯文本文件（或活动的...
vscode-preview-server:实时预览VSCode扩展
05-02
vscode预览服务器特征该扩展提供了在Web服务器上执行HTML预览。 保存文件时，此扩展名会自动重新加载浏览器或侧面板（实时预览功能）。 您可以从上下文菜单或编辑器菜单调用这些功能。 主要功能如下。 Preview on ...
VSCode运行CMake教程
zhangyan的博客
05-17 306
VSCODE运行cmake 显示opencv图像
[Vulnhub] KVM3 (ht编辑器权限提升)
最新发布
05-18 312
#Kioptrix3 #ht #GALLARIFIC #SQLI
Xed编辑器开发第一期:使用Rust从0到1写一个文本编辑器
八尺妖剑的博客
05-15 1240
如果这篇内容跟下来，你还是觉得比较难，那么我推荐你暂时放一下，这里推荐一个我之前写的开源项目untools,这也是一个使用Rust编写的工具库，可以拿来练手，顺手点个star的同时也欢迎有想法有能力的同学PR;
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 681
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1130
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
s_sos0的博客
05-14 545
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
解决 SpringBoot 的 Date、LocalDateTime 变成时间戳和数组的问题，创建自定义对象消息转换器
shijialeya
05-18 405
解决 SpringBoot 的 Date、LocalDateTime 变成时间戳和数组的问题，创建自定义对象消息转换器进行数据格式化。
综合性练习-验证码
cj13106811623的博客
05-15 826
生成验证码param(参数): 无Return: 图片的内容校验验证码用户输入的验证码5. 代码编写生成验证码://图型验证码写出,可以写出到文件,也可以写出到流try {//返回到浏览器修改前端代码相对应的接口验证成功。
vscode实时预览插件
07-25
对于实时预览功能，VS Code有很多插件可以实现。以下是一些常用的实时预览插件： 1. Live Server：这是一个非常受欢迎的插件，它可以在浏览器中实时预览HTML、CSS和JavaScript文件的更改。它支持自动刷新和热重载。 2. Live Preview：这个插件可以在编辑器中实时预览Markdown、HTML和其他文件的更改。它还支持自定义样式和布局。 3. Browser Preview：这个插件可以在VS Code中使用浏览器来实时预览HTML文件。它支持多个浏览器，并且可以在编辑器中显示多个预览。 4. Markdown Preview Enhanced：这个插件专门用于Markdown文件的实时预览。它支持数学公式、表格、代码块高亮等功能。 这些插件都可以通过在VS Code的扩展商店中搜索并安装。安装完成后，你可以按照插件的说明来使用实时预览功能。希望对你有所帮助！如果有其他问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值