告别LiveServer，vscode微软官方的LivePreview来了

最新推荐文章于 2024-04-15 00:07:47 发布
最新推荐文章于 2024-04-15 00:07:47 发布
阅读量5.6k 收藏 1
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40608763/article/details/119457265
版权
vscode最新1.59版本引入了官方的LivePreview扩展，提供网页实时渲染功能，类似markdown的实时预览。相比LiveServer，LivePreview集成度更高，尽管仍处于开发阶段，但体验流畅，有望成为LiveServer的替代品。
摘要由CSDN通过智能技术生成

今天更新了vscode1.59版本，看到更新简要里写着Live Preview extension

在这里插入图片描述
这个插件是一个网页的实时渲染显示功能，就和markdown的实时预览功能一样。
Live Preview 目前还是预览版本

Live Server

安装插件以后会发现在打开html文件的状态下右上角多了一个跟markdown一样的预览按钮，点击之后又会出现一个编辑器内置的web窗口。
在这里插入图片描述
相比于LiveServer只能打开网页的实时渲染功能（现在也可以内置在编辑器内，但是不稳定），Live Preview无疑跟vscode的集成程度更高（毕竟是微软官方插件）。目前此插件还处于开发阶段，但是体验已经非常流畅，未来大概率会取代LiveServer插件地位。

小刚真的皮
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vsce-livepreview::desktop_computer:VSCode的Live Preview扩展
03-13
韦伯 SwifWeb应用程序的实时预览 用法 打开swifweb应用程序项目 点击Cmd+Shift+P 键入Webber Live Preview 按下Enter 请享用！ :rocket: 在上了解更多 享受！
推荐：Live Server — 实时开发服务器
gitblog_00006的博客
05-11 752
推荐：Live Server — 实时开发服务器 vscode-live-serverLaunch a development local Server with live reload feature for static & dynamic pages.项目地址:https://gitcode.com/gh_mirrors/vs/vscode-live-server Live Server ...
VS Code——Live Server的简介、安装与使用
热门推荐
无限迭代中......
01-07 7万+
基本概念 Live Server：一个具有实时加载功能的小型服务器，可以使用它来破解html/css/javascript，但是不能用于部署最终站点。也就是说我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。 优点 1：一键安装，实现自动刷新，架设本地服务器环境。 2：比起 gulp 构建 实现自动刷新，架设本地服务器环境，需要安装自动刷新插件...
Visual Studio Code实时预览插件live preview的安装和使用
yin_CSDN_1007的博客
03-05 2万+
VScode实时预览插件live preview的安装和使用教程。 1.安装插件 2.测试插件 3.注意点 4.小建议。
前端 | VScode实现一边写代码一边可以实时查看页面效果[图文详解]
weixin_44649780的博客
07-01 9559
本文主要是基于VSCode实现实现一边写前端代码一边可以实时查看页面效果。
VSCode设置网页代码实时预览
Cpm_Aries的博客
06-08 2045
3.在html页面右击+show preview。2.下载Live Preview。1.打开vscode的扩展。
vscode+web_网页预览插件live preview/live server preview/live server
xuchaoxin1375的博客
10-02 3431
文章目录live preview启动pitylive server preview启动live server启动 live preview download 插件不错,支持实时预览,还支持调试工具 启动 command palette: 或着右键. pity 文件路径中不可以包含中文,否则无法成功预览 live server preview 允许您在路径名中存在中文.但是不支持浏览器的dev tool 启动 live server 浏览器内打开,支持实时更新(自动刷新) 启动 alt+l al
vscode-实现html和vue实时预览-对比了vscode的8个预览插件
billycoder的专栏
02-06 2万+
1.Open in Browser 打开chrome浏览器或者其他外部浏览器 总结:单纯想打开外部浏览器,用它 2.HTML Preview 内嵌浏览器 打开方便,当前页面是html页面,点击右上角图标就可以了 可以实时预览效果 不足:带图片的话,不能有中文路径 3.vscode-preview-server 可以实时预览效果 右键使用 可以内嵌,也可以外部 右键使用 4.Live Server 可以实时预览效果 右键使用 打开外部浏览器 右键菜单 5. Brow
react-live：用于实时编辑React组件的灵活场所
02-05
用法使用npm install react-live或用yarn add react-live并尝试以下JSX： import { LiveProvider , LiveEditor , LiveError , LivePreview} from 'react-live'< LiveProvider xss=removed>Hello
wagtail-livepreview:Wagtail Live Preview使您可以在Wagtail管理中查看页面更改
05-14
g实况预览 使用Wagtail Live Preview，您可以在Wagtail管理员中查看页面更改。... 但是代码引用了livepreview而不是wagtail_livepreview ，以免将wagtail_livepreview功能与该软​​件包中的内容混淆。 安装 安装
blockdiag-api:blockdiag API服务器和livepreview ui
05-17
Blockdiag-api 演示版 使用docker-compose $ docker-compose build app $ docker-compose up API参考 端点： /api/v1/ ... JSON有效负载 { "source" : "<diagram>" ... curl命令示例$ curl -XPOST \ ...
FireUI live Preview.apk
03-16
4.打开 Delphi berlin IDE , 正常情况会看到 LivePreview 找到 IDE Server 名称 5.开启一个 firemonkey 程式 6.并尝试连接 app 与 IDE 连接 Connect 7.如无意外 可在app 上看到 firemonkey 在android 运作样貌 --...
vscode 前端开发插件live server
快乐de馒头
01-11 718
插件：live server 作用：使用http协议打开页面。 html文件上鼠标右键： 就可以用http协议打开页面了。 关闭live server
vscode前端环境(html+css+javascript)的配置
ScottePerk的博客
10-02 8097
现在最新版本发vscode已经不需要额外配置这三个语言本身了。已经默认支持很多功能。
VSCode篇 -- 前端很好用的插件集
weixin_42995152的博客
07-26 1326
1、Live Server 实时更新页面 VSCode 搜索 preview，出现 live server之后，直接安装即可。 安装成功之后，就可以在编辑的 HTML 页面上，鼠标右键点击 Open With LiveServer。 LiveServer 默认端口号 5500，开启 LiveServer 服务器之后，即可实现页面边编辑边切换查看页面的实时更新效果展示。 关闭，只需鼠标右键点击 Stop LiveServer 即可。 2、Live Server Preview 页面实时预览 VSCode
【Web】VS Code 插件
享你所想
04-15 1814
一、安装步骤 二、插件 1.Chinese (Simplified) (简体中文) 2.open in browser 3.vscode-icons 4.Live Server 5.Live Server Preview 6.翻译(英汉词典) 三、快捷键 1.缩放代码字号
VS CODE好用的插件
cs10dn101529的博客
03-21 73
相关：prettier，eslint，JSON to TS ，Image preview 不解释。：其实新版已经内置了，vue2不支持，jsx不支持，所以还是用着吧。：选中一段代码，右击CodeSnap，生成好看的代码段图片。：代码缩进彩色标识，一眼看出没对齐的缩进。：智能提示，提示接下来更可能写的代码。：见名知意，高亮匹配的标签。：根据HEX值展示出颜色。
基于粒子群算法优化的BPNN和ElM对海浪高度的预测+python源代码+文档说明
最新发布
08-18
<项目介绍> - 基于粒子群算法优化的BPNN和ElM对海浪高度的预测 - 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
wpf 设置标题栏颜色
06-03
要在WPF应用程序中设置标题栏颜色，你可以使用以下代码： 1. 首先，添加以下命名空间： ```csharp using System.Windows.Interop; using System.Runtime.InteropServices; ``` 2. 接着，在你的窗口类中添加以下方法： ```csharp private void SetWindowTitleBarColor(Color color) { var hwnd = new WindowInteropHelper(this).Handle; var accent = new AccentPolicy(); accent.AccentState = AccentState.ACCENT_ENABLE_BLURBEHIND; accent.AccentFlags = 0x20 | 0x40 | 0x80 | 0x100; accent.GradientColor = (color.R << 16) | (color.G << 8) | color.B; var accentStructSize = Marshal.SizeOf(accent); var accentPtr = Marshal.AllocHGlobal(accentStructSize); Marshal.StructureToPtr(accent, accentPtr, false); var data = new WindowCompositionAttributeData(); data.Attribute = WindowCompositionAttribute.WCA_ACCENT_POLICY; data.SizeOfData = accentStructSize; data.Data = accentPtr; SetWindowCompositionAttribute(hwnd, ref data); Marshal.FreeHGlobal(accentPtr); } [DllImport("user32.dll")] internal static extern int SetWindowCompositionAttribute(IntPtr hwnd, ref WindowCompositionAttributeData data); [StructLayout(LayoutKind.Sequential)] public struct AccentPolicy { public AccentState AccentState; public int AccentFlags; public int GradientColor; public int AnimationId; } public enum AccentState { ACCENT_DISABLED = 0, ACCENT_ENABLE_GRADIENT = 1, ACCENT_ENABLE_TRANSPARENTGRADIENT = 2, ACCENT_ENABLE_BLURBEHIND = 3, ACCENT_ENABLE_ACRYLICBLURBEHIND = 4, ACCENT_INVALID_STATE = 5 } public enum WindowCompositionAttribute { WCA_UNDEFINED = 0, WCA_NCRENDERING_ENABLED = 1, WCA_NCRENDERING_POLICY = 2, WCA_TRANSITIONS_FORCEDISABLED = 3, WCA_ALLOW_NCPAINT = 4, WCA_CAPTION_BUTTON_BOUNDS = 5, WCA_NONCLIENT_RTL_LAYOUT = 6, WCA_FORCE_ICONIC_REPRESENTATION = 7, WCA_EXTENDED_FRAME_BOUNDS = 8, WCA_HAS_ICONIC_BITMAP = 9, WCA_THEME_ATTRIBUTES = 10, WCA_NCRENDERING_EXILED = 11, WCA_NCADORNMENTINFO = 12, WCA_EXCLUDED_FROM_LIVEPREVIEW = 13, WCA_VIDEO_OVERLAY_ACTIVE = 14, WCA_FORCE_ACTIVEWINDOW_APPEARANCE = 15, WCA_DISALLOW_PEEK = 16, WCA_CLOAK = 17, WCA_CLOAKED = 18, WCA_ACCENT_POLICY = 19, WCA_FREEZE_REPRESENTATION = 20, WCA_EVER_UNCLOAKED = 21, WCA_VISUAL_OWNER = 22, WCA_LAST = 23 } [StructLayout(LayoutKind.Sequential)] public struct WindowCompositionAttributeData { public WindowCompositionAttribute Attribute; public IntPtr Data; public int SizeOfData; } ``` 3. 最后，在窗口的构造函数中调用 `SetWindowTitleBarColor` 方法，并传递一个 `Color` 类型的参数，如下所示： ```csharp public MainWindow() { InitializeComponent(); SetWindowTitleBarColor(Colors.Blue); } ``` 这将设置标题栏的颜色为蓝色。你可以使用任何有效的 `Color` 对象来设置颜色。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值