当前位置：首页 > news >正文

【VS Code插件开发】Webview面板（三）

news 2025/9/15 8:09:59

🐱 个人主页：不叫猫先生，公众号：前端舵手
🙋‍♂️ 作者简介：前端领域优质作者、阿里云专家博主，共同学习共同进步，一起加油呀！
📢 资料领取：前端进阶资料可以找我免费领取
🔥 摸鱼学习交流：我们的宗旨是在「工作中摸鱼，摸鱼中进步」，期待大佬一起来摸鱼(文末有我wx或者私信)

在这里插入图片描述

前言

Webview API 允许扩展在 VS Code 中创建完全可自定义的视图。例如，内置的 Markdown 扩展使用 webview 来渲染 Markdown 预览。Webview 还可以用于构建超出 VS Code 原生 API 支持范围的复杂用户界面。在视图中，会将 Webview 视为iframe。

Webview官方文档讲解
Webview官方案例

一、createWebviewPanel

vscode.window.createWebviewPanel 是 VS Code 扩展 API 中的一个方法，用于创建和管理 Webview 面板。Webview 面板允许您在 VS Code 的用户界面中嵌入一个基于 Web 技术的交互式内容。具体用法如下：

vscode.window.createWebviewPanel(viewType: string,        // 唯一的视图类型标识符，用于在插件中识别不同的 Webview 面板title: string,           // 面板的标题viewColumn: vscode.ViewColumn, // 面板要显示在哪一列options?: vscode.WebviewPanelOptions & { enableScripts?: boolean } // 配置选项
): vscode.WebviewPanel;

参数详解：

viewType：唯一的视图类型标识符，用于在插件中区分不同的 Webview 面板。可以在插件的不同部分使用这个标识符来识别和操作特定的面板
title：面板的标题，显示在面板的顶部
viewColumn：是一个枚举类型，表示面板显示在编辑器中的第几列，枚举包括下面几个选项
- ViewColumn.One：在第一列显示面板
- ViewColumn.Two：在第二列显示面板
- ViewColumn.Three：在第三列显示面板
- ViewColumn.Active：在当前活动的列显示面板
- ViewColumn.Beside：在当前列的旁边显示面板
options：可选的配置选项，设置Webview面板的各种属性，其中
- enableScripts：是一个布尔值，表示是否在Webview中运行JS

二、Webview案例

使用registerCommand注册一个启动面板的命令（demoPlugin.start），然后创建一个面板。案例实现了创建一个带有猫的图片面板：面板的唯一标识catCoding，面板的标题为Cat Coding ，面板展示在编辑器中的第一列，配置选项为一个空对象。注意我们这里设置的webview.html会被视为iframe

声明图片

const cats = {'Coding Cat': 'https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif','Compiling Cat': 'https://media.giphy.com/media/mlvseq9yvZhba/giphy.gif'
};

注册命令以及创建面板

		vscode.commands.registerCommand('demoPlugin.start', () => {// Create and show a new webviewconst panel = vscode.window.createWebviewPanel('catCoding', // Identifies the type of the webview. Used internally'Cat Coding', // Title of the panel displayed to the uservscode.ViewColumn.One, // Editor column to show the new webview panel in.{} // Webview options. More on these later.);const cat = "Coding Cat";//panel.title = cat; 重新定义面板的标题panel.webview.html = getWebviewContent(cat);
})

面板具体的Html

function getWebviewContent(cat: keyof typeof cats) {return `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Cat Coding</title><style>/* 根据主题更改文本颜色 */body.vscode-light {color: #ff0;}body.vscode-dark {color: white;}body.vscode-high-contrast {color: red;}</style></head><body><img src="${cats[cat]}" width="300" /></body></html>`;
}

package.json中，需要在contributes中的commands进行配置。

"contributes": {"commands": [{"command": "demoPlugin.start","title": "Start new cat coding session","category": "Cat Coding"}]
}

展示
最后我们就可以cmd/ctrl+shift+p在命令列表中选择配置的Cat Coding:Start new cat coding session命令。

面板动态切换

我们设置一秒对面板的内容和标题进行切换。这里是用定时器，1s切换面板的内容，并且在面板关闭时（使用onDidDispose监听）清除更新内容的定时器，避免内存泄漏。getWebviewConten方法还是上面的不变。
其中解释一下onDidDispose，该方法用于监听 Webview 面板被关闭。

语法：

currentPanel.onDidDispose(() => { 
// 这里是面板关闭要执行的逻辑 
}, undefined, context.subscriptions)

参数详解：

第一个参数是一个函数，表示面板被关闭时要执行的逻辑。在这个例子中，函数体内的代码将 currentPanel 设置为 undefined，以表示面板已经被关闭。
第二个参数是一个可选的 this 上下文，这里设置为 undefined。
第三个参数 context.subscriptions 是一个数组，通常包含了注册的事件和资源的句柄。在扩展被停用时，VS Code 将会自动清理这些资源，避免内存泄漏。

		vscode.commands.registerCommand('demoPlugin.start', () => {// Create and show a new webviewconst panel = vscode.window.createWebviewPanel('catCoding', // Identifies the type of the webview. Used internally'Cat Coding', // Title of the panel displayed to the uservscode.ViewColumn.One, // Editor column to show the new webview panel in.{} // Webview options. More on these later.);panel.webview.html = getWebviewContent(cat);const cat = "Coding Cat";let iteration = 0;const updateWebview = () => {const cat = iteration++ % 2 ? 'Compiling Cat' : 'Coding Cat';panel.title = cat;panel.webview.html = getWebviewContent(cat);};// And schedule updates to the content every secondconst interval = setInterval(updateWebview, 1000);panel.onDidDispose(() => {// When the panel is closed, cancel any future updates to the webview contentclearInterval(interval);},null,context.subscriptions);// Set initial contentupdateWebview();})

最终结果如下所示：

在这里插入图片描述

三、Theming webview content（主题化视图内容）

Webview 可以使用 CSS 根据 VS Code 的当前主题更改其外观。VS Code 将主题分为三类，并向body元素添加一个特殊的类来指示当前主题：

vscode-light：浅色主题
vscode-dark：黑暗主题
vscode-high-contrast：高对比度主题

在Web.html中添加主题样式，如下

function getWebviewContent(cat: keyof typeof cats) {return `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Cat Coding</title><style>/* 根据主题更改文本颜色 */body.vscode-light {color: blue;}body.vscode-dark {color: green;}body.vscode-high-contrast {color: yellow;}</style></head><body><img src="${cats[cat]}" width="300" /></body></html>`;
}

body.vscode-light
body.vscode-dark
body.vscode-high-contrast

【VS Code插件开发】Webview面板（三）

目录

前言

一、createWebviewPanel

二、Webview案例

面板动态切换

三、Theming webview content（主题化视图内容）

相关文章：

【VS Code插件开发】Webview面板（三）

WebDriver API及对象识别技术

计算机视觉之三维重建(一)(摄像机几何)

机器学习算法-随机森林

Springboot 实践（10）spring cloud 与consul配置运用之服务的注册与发现

解决方案：如何在 Amazon EMR Serverless 上执行纯 SQL 文件？

pytorch lightning和pytorch版本对应

Postman返回了一个html页面

centos服务器搭建宝塔面板

【微信小程序】记一次自定义微信小程序组件的思路

TiDB数据库从入门到精通系列之四：SQL 基本操作

Azure创建自定义VM镜像

react 10之状态管理工具2 redux + react-redux +redux-saga

gor工具http流量复制、流量回放，生产运维生气

设计模式之单例设计模式

Java自学到什么程度就可以去找工作了?

三、Kafka生产者

【SA8295P 源码分析】19 - QNX Host NFS 文件系统配置

JRE、JDK、JVM及JIT之间有什么不同?_java基础知识总结

sqlite3数据库的实现

idea大量爆红问题解决

装饰模式（Decorator Pattern）重构java邮件发奖系统实战

7.4.分块查找

SkyWalking 10.2.0 SWCK 配置过程

python/java环境配置

《Playwright：微软的自动化测试工具详解》

页面渲染流程与性能优化

Robots.txt 文件

聊一聊接口测试的意义有哪些？

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）