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

初探 VS Code + Webview

news 2026/5/21 6:36:41

本文作者为 360 奇舞团前端开发工程师

介绍

VSCode 是一个非常强大的代码编辑器，而它的插件也非常丰富。在开发中，我们经常需要自己编写一些插件来提高开发效率。本文将介绍如何开发一个 VSCode 插件，并在其中使用 Webview 技术。首先介绍一下什么是Webview。

什么是 Webview？

Webview 是一种可以在 VS Code 中嵌入 Web 内容的技术。通过 Webview，开发者可以将自己的 Web 应用程序嵌入到 VS Code 中，以便在工具中执行各种任务。Webview 提供了一个 Web 浏览器的环境，可以在其中加载 HTML、CSS 和 JavaScript，从而实现各种功能。Webview 还提供了一个 API，使得开发者可以从 Web 应用程序中与 VS Code 进行交互。webview API为开发者提供了完全自定义视图的能力，Webview也能用于构建比VS Code原生API支持构建的更加复杂的用户交互界面。可以把webview看成是VS Code中的iframe，它可以渲染几乎全部的HTML内容，它通过消息机制和插件通信。这样的自由度令我们的webview非常强劲并将插件的潜力提升到了新的高度。接下来我们一起来学习。

1. 创建一个空的 VSCode 插件

首先，我们借助脚手架yomen和generator-code来快速生成项目框架：安装依赖

npm install -g yo generator-code

初始化一个 VS Code插件项目

yo code? What type of extension do you want to create? New Extension (TypeScript)? What's the name of your extension? HelloWorld? What's the identifier of your extension? helloworld? What's the description of your extension? HelloWorld? Initialize a git repository? No? Which package manager to use? npm等待安装依赖完成code ./helloworld

以下为初始化的项目结构

d6c0adbad77188a9e28f91cd4c74cf4b.png

2. 在插件中创建一个 Webview

在插件中创建一个 Webview，需要使用 vscode 模块中的 window.createWebviewPanel 方法。该方法需要传入一个唯一标识符、标题、视图类型和展示位置等参数。例如：

import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {let disposable = vscode.commands.registerCommand('Hello-World.helloWorld', () => {let panel = vscode.window.createWebviewPanel('myWebview', // 标识符，需要唯一'My Webview', // 标题vscode.ViewColumn.One, // 第一列{});// 设置HTML内容panel.webview.html = getWebviewContent();});context.subscriptions.push(disposable);
}

3. 在 Webview 中加载 HTML 页面

在插件中创建 Webview 后，需要使用 webview.html 属性加载一个 HTML 页面。例如：

function getWebviewContent() { return `<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Hello Webview</title></head><body><h1>Hello Webview!</h1></body></html>`;
}

完成后进入 VS Code，按下F5，你会立即看到一个插件打开主机窗口，其中就运行着插件。在命令面板(Ctrl+Shift+P)中输入Hello World命令，可以看到如下效果。

bb03508ccacab63ef952f04bf313774a.gif

4. 给webview动态传值更新webview的内容

这里引用官方的例子

/*** 4 webview* 可以给webview传值，动态改变内容的webview*/const cats = {'Coding Cat': 'https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif','Compiling Cat': 'https://media.giphy.com/media/mlvseq9yvZhba/giphy.gif'};let disposable = vscode.commands.registerCommand('Hello-World.helloWorld', () => {const panel = vscode.window.createWebviewPanel('myWebview', // 标识符，需要唯一'My Webvie', // 标题vscode.ViewColumn.One, //  第一列{} // webview其他的选项);let iteration = 0;const updateWebview = () => {const cat = iteration++ % 2 ? 'Compiling Cat' : 'Coding Cat';panel.title = cat;panel.webview.html = getWebviewContent(cat);};// 设置初始化内容updateWebview();// 每秒更新内容setInterval(updateWebview, 1000);context.subscriptions.push(disposable);
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></head><body><img src="${cats[cat]}" width="300" /></body></html>`;
}

那么如何与 VS Code 进行交互？

Webview 与 VS Code 之间的交互是通过 Webview 的 API 进行的。通过 API，开发者可以从 Webview 中向 VS Code 发送消息，并从 VS Code 中接收消息。

在 Webview 中，可以使用 vscode.postMessage 方法向 VS Code 发送消息：

1. 在 Webview 中调用插件 API

为了让 Webview 能够与插件交互，需要在 Webview 中使用 acquireVsCodeApi 方法获取一个 vscode 对象，并将其传递给 JavaScript，以便在 JavaScript 中调用插件 API。例如

const vscode = acquireVsCodeApi();vscode.postMessage({command: 'showMessage',text: 'Hello from Webview!'});

2. 在插件中监听 Webview 的消息

在 VS Code 中，可以通过监听 WebviewPanel.onDidReceiveMessage 事件来接收来自 Webview 的消息。例如：

webview.onDidReceiveMessage(message => {switch (message.command) {case 'showMessage':vscode.window.showInformationMessage(message.text);break;}});

下面我们来实现一个具体的demo，来看下webview与vscode 之间的交互:

import * as vscode from 'vscode';export function activate(context: vscode.ExtensionContext) {// 创建 Webview 面板const panel = vscode.window.createWebviewPanel('myWebview', // 面板 ID'My Webview', // 面板标题vscode.ViewColumn.One, // 显示位置{ enableScripts: true } // 启用 JavaScript);// 在 Webview 中加载 HTML 页面panel.webview.html = getWebviewContent();;// 监听 Webview 发送的消息panel.webview.onDidReceiveMessage(message => {if (message.type === 'buttonClick') {// 在 VS Code 中显示提示框vscode.window.showInformationMessage('Button clicked in Webview!');}});// 在 VS Code 中注册命令let disposable = vscode.commands.registerCommand('Hello-World.helloWorld', () => {// 向 Webview 发送消息panel.webview.postMessage({ type: 'showButton' });});context.subscriptions.push(disposable);}function getWebviewContent() {return `<html><body><button id="myButton">Click me</button><script>const vscode = acquireVsCodeApi();const myButton = document.getElementById('myButton');myButton.addEventListener('click', () => {vscode.postMessage({ type: 'buttonClick' });});</script></body></html>`;}

下图为 点击 按钮之后的效果。


27631506867715c3c968a9c852482a2b.png

在这个示例中，我们创建了一个 Webview 面板，并在其中加载了一个简单的 HTML 页面，其中包含一个按钮。当用户点击该按钮时，我们向 VS Code 发送了一个消息，并在 VS Code 中显示了一个提示框。在 VS Code 中，我们还注册了一个命令 Hello-World.helloWorld，当用户执行该命令时，我们向 Webview 发送了一个消息，以便在 Webview 中显示按钮。

通过 Webview，我们可以在 VS Code 和 Web 应用程序之间进行双向通信，从而实现各种功能。

结论

通过以上步骤，我们可以创建一个带有 Webview 的 VSCode 插件，并在其中使用 Webview 技术。Webview 可以让我们在插件中嵌入交互式的 HTML 页面，从而提高开发效率和用户体验。而且通过 Webview，开发者可以将自己的 Web 技能应用于 VS Code 插件开发中，并实现各种功能。

参考来源

https://code.visualstudio.com/docs

‍https://code.visualstudio.com/api/get-started/your-first-extension

https://code.visualstudio.com/api/references/vscode-api#window.createWebviewPanel

- END -

关于奇舞团

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

662b79d6c2dbcd9d1b47f2e2942b9c2b.png

相关文章：

初探 VS Code + Webview

本文作者为 360 奇舞团前端开发工程师 介绍 VSCode 是一个非常强大的代码编辑器&#xff0c;而它的插件也非常丰富。在开发中&#xff0c;我们经常需要自己编写一些插件来提高开发效率。本文将介绍如何开发一个 VSCode 插件&#xff0c;并在其中使用 Webview 技术。首先介绍一下…...

编程日记 2023/4/28 18:28:25

Codeforces Round 864 (Div. 2)（A~D）

A. Li Hua and Maze 给出两个不相邻的点&#xff0c;最少需要堵上几个方格&#xff0c;才能使得两个方格之间不能互相到达。 思路&#xff1a;显然&#xff0c;对于不邻任何边界的方格来说&#xff0c;最少需要的是4&#xff0c;即上下左右都堵上&#xff1b;邻一个边界就-1&a…...

编程日记 2023/4/28 18:23:24

第3章-运行时数据区

此章把运行时数据区里比较少的地方讲一下。虚拟机栈&#xff0c;堆&#xff0c;方法区这些地方后续再讲。 转载https://gitee.com/youthlql/JavaYouth/tree/main/docs/JVM。 运行时数据区概述及线程 前言 本节主要讲的是运行时数据区&#xff0c;也就是下图这部分&#xff0c…...

编程日记 2023/4/28 18:18:23

delta.io 参数 spark.databricks.delta.replaceWhere.constraintCheck.enabled

总结 默认值true 你写入的df分区字段必须全部符合覆盖条件 .option("replaceWhere", "c2 == 2") false: df1 overwrite tb1: df1中每个分区的处理逻辑: - tb1中存在(且谓词中匹配)的分区,则覆盖 - tb1中存在(谓词中不匹配)的分区,则append - tb1中不存…...

编程日记 2023/4/28 18:13:22

Redis知识点

1. Redis-常用数据结构 Redis提供了一些数据结构供我们往Redis中存取数据&#xff0c;最常用的的有5种&#xff0c;字符串&#xff08;String&#xff09;、哈希(Hash)、列表&#xff08;list&#xff09;、集合&#xff08;set&#xff09;、有序集合&#xff08;zset&#xf…...

编程日记 2023/4/28 18:08:21

经典数据结构之2-3树

2-3树定义 2-3树&#xff0c;是最简单的B-树&#xff0c;其中2、3主要体现在每个非叶子节点都有2个或3个子节点&#xff0c;B-树即是平衡树&#xff0c;平衡树是为了解决不平衡树查询效率问题&#xff0c;常见的二叉平衡书有AVL树&#xff0c;它虽然提高了查询效率&#xff0c…...

编程日记 2023/4/28 18:03:20

Numpy从入门到精通——节省内存|通用函数

这个专栏名为《Numpy从入门到精通》&#xff0c;顾名思义&#xff0c;是记录自己学习numpy的学习过程&#xff0c;也方便自己之后复盘&#xff01;为深度学习的进一步学习奠定基础&#xff01;希望能给大家带来帮助&#xff0c;爱睡觉的咋祝您生活愉快&#xff01; 这一篇介绍《…...

编程日记 2023/4/28 17:58:18

Docker-compose 启动 lnmp 开发环境

GitHub传送阵 docker-lnmp 项目帮助开发者快速构建本地开发环境&#xff0c;包括Nginx、PHP、MySQL、Redis 服务镜像&#xff0c;支持配置文件和日志文件映射&#xff0c;不限操作系统&#xff1b;此项目适合个人开发者本机部署&#xff0c;可以快速切换服务版本满足学习服务新…...

编程日记 2023/4/28 17:53:17

《android源码阅读四》Android系统源码整编、单编并运行到虚拟机

1、编译环境 《安装Ubuntu系统》《android源码下载》 2、整编源码 进入Android源码根目录 cd AOSP初始化环境 source build/envsetup.sh清除缓存 make clobber选择编译目标 // 选择编译目标 lunch // 因为本次是在虚拟机中运行&#xff0c;这里使用x86 lunch aosp_x86_6…...

编程日记 2023/4/28 17:48:16

深度学习技巧应用8-各种数据类型的加载与处理，并输入神经网络进行训练

大家好，我是微学AI，今天给大家介绍一下深度学习技巧应用8-各种数据类型的加载与处理，并输入神经网络进行训练。在模型训练中，大家往往对各种的数据类型比较难下手，对于非结构化数据已经复杂的数据的要进行特殊处理，这里介绍一下我们如何进行数据处理才能输入到模型中，进…...

编程日记 2023/4/28 17:43:15

【笔试】备战秋招,每日一题|20230415携程研发岗笔试

前言 最近碰到一个专门制作大厂真题模拟题的网站 codefun2000&#xff0c;最近一直在上面刷题。今天来进行2023.04.15携程研发岗笔试&#xff0c;整理了一下自己的思路和代码。 比赛地址 A. 找到you 题意&#xff1a; 给定一个仅包含小写字母的 n n n\times n nn 的矩阵…...

编程日记 2023/4/28 17:38:14

【unity专题篇】—GUI（IMGUI）思维导图详解

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;uni…...

编程日记 2023/4/28 17:33:12

【C++ Metaprogramming】0. 在C++中实现类似C#的泛型类

两年前&#xff0c;笔者因为项目原因刚开始接触C&#xff0c;当时就在想&#xff0c;如果C有类似C#中的泛型限定就好了&#xff0c;能让代码简单许多。我也一度认为&#xff1a; 虽然C有模板类&#xff0c;但是却没办法实现C#中泛型特有的 where 关键词&#xff1a; public c…...

编程日记 2023/4/28 17:28:11

TDA4VM/VH 芯片 NAVSS0

请从官网下载 TD4VM 技术参考手册&#xff0c;地址如下&#xff1a; TDA4VM 技术参考手册地址 概述 (NAVSS0 的介绍在 TRM 的第10.2章节) NAVSS0 可以看作 MAIN 域的一个复杂外设域&#xff0c;实现如下功能&#xff1a; UDMASS: DMA 管理子系统&#xff1b;MODSS&#xf…...

编程日记 2023/6/1 11:17:49

基于springboot的前后端分离的案列（一）

SpringBootWeb案例 前面我们已经讲解了Web前端开发的基础知识&#xff0c;也讲解了Web后端开发的基础(HTTP协议、请求响应)&#xff0c;并且也讲解了数据库MySQL&#xff0c;以及通过Mybatis框架如何来完成数据库的基本操作。 那接下来&#xff0c;我们就通过一个案例&#xf…...

编程日记 2023/4/28 17:18:08

Docker网络模式详解

文章目录 一、docker网络概述1、docker网络实现的原理1.1 随机映射端口( 从32768开始)1.2 指定映射端口1.3 浏览器访问测试 二、 docker的网络模式1、默认网络2、使用docker run 创建Docker容器时&#xff0c;可以用--net或--network 选项指定容器的网络模式 三、docker网络模式…...

编程日记 2023/5/30 18:35:12

PXE高效批量网络装机

PXE 定义 PXE(预启动执行环境&#xff0c;在操作系统之前运行)是由Intel公司开发的网络引导技术&#xff0c;工作在client /server模式&#xff0c;允许客户机通过网络从远程服务器下载引导镜像&#xff0c;并加载安装文件或者整个操作系统。 具备以下三个优点 1 规模化: 同时…...

编程日记 2023/4/28 17:08:06

YOLOv5+双目实现三维跟踪（python）

YOLOv5双目实现三维跟踪&#xff08;python&#xff09; 1. 目标跟踪2. 测距模块2.1 测距原理2.2 添加测距 3. 细节修改&#xff08;可忽略&#xff09;4. 实验效果 相关链接 1. YOLOV5 双目测距&#xff08;python&#xff09; 2. YOLOV7 双目测距&#xff08;python&#x…...

编程日记 2023/4/28 17:03:05

ESP8266使用SDK软硬件定时执行函数

1、软件定时 以下接口使用的定时器由软件实现&#xff0c;定时器的函数在任务中被执行。因为任务可能被中断&#xff0c;或者被其他高优先级的任务延迟&#xff0c;因此以下os_timer系列的接口并不能保证定时器精确执行。 注意&#xff1a; ①对于同一个 timer&#xff0c;os…...

编程日记 2023/4/28 16:57:58

ThreadPoolExecutor源码阅读流程图

1.创建线程池 public ThreadPoolExecutor(int corePoolSize,int maximumPoolSize,long keepAliveTime,TimeUnit unit,BlockingQueue<Runnable> workQueue) {this(corePoolSize, maximumPoolSize, keepAliveTime, unit, workQueue,Executors.defaultThreadFactory(), def…...

编程日记 2023/4/28 16:52:57

STM32F103 平行替代方案全面分析（2026 年最新）

STM32F103 作为全球最经典的 Cortex-M3 MCU&#xff0c;凭借成熟的生态和广泛的应用基础统治了中低端嵌入式市场十余年。但近年来受国际供应链波动影响&#xff0c;其价格持续走高&#xff08;2026 年 5 月 STM32F103C8T6 批量价约 8-12 元&#xff0c;部分型号甚至超过 20 元&…...

编程新知 2026/5/21 6:28:09

WebShell-Bypass-Guide字符串处理函数免杀技巧详解

WebShell-Bypass-Guide字符串处理函数免杀技巧详解 【免费下载链接】WebShell-Bypass-Guide 从零学习Webshell免杀手册 项目地址: https://gitcode.com/gh_mirrors/we/WebShell-Bypass-Guide WebShell免杀技术是网络安全领域的重要技能&#xff0c;而字符串处理函数是构…...

编程新知 2026/5/21 4:07:16

UMI 采集技术落地应用 核数聚助力人形机器人快速迭代

在具身智能从实验室走向产业落地的关键期&#xff0c;数据饥渴已成为行业公认的核心瓶颈。传统真机遥操作采集成本高、效率低、泛化性差&#xff0c;仿真数据又存在物理真实性不足的问题。此时&#xff0c;UMI&#xff08;Universal Manipulation Interface&#xff0c;通用操作…...

编程新知 2026/5/21 3:10:42

【Perplexity阅读推荐查询实战指南】：20年AI工具专家亲授5大精准筛选技巧，错过再等一年

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;Perplexity阅读推荐查询的核心价值与适用场景 Perplexity 作为一款基于大语言模型的实时问答与研究工具&#xff0c;其“阅读推荐查询”能力并非简单的内容聚合&#xff0c;而是融合语义理解、来源可信度评估…...

编程新知 2026/5/21 2:17:50

抖音内容采集系统架构设计与工程实践

抖音内容采集系统架构设计与工程实践 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback support. 抖音批量下载工具&#x…...

编程新知 2026/5/21 1:00:40

构建企业级HTML到DOCX转换引擎：html-to-docx架构深度解析

构建企业级HTML到DOCX转换引擎&#xff1a;html-to-docx架构深度解析 【免费下载链接】html-to-docx HTML to DOCX converter 项目地址: https://gitcode.com/gh_mirrors/ht/html-to-docx 在现代企业文档处理流程中&#xff0c;将HTML内容转换为标准化的Word文档已成为刚…...

编程新知 2026/5/21 0:24:16

vscode过滤文件

const fs require(fs); const { exec } require(child_process);// 在这里输入你的关键词&#xff0c;每行一个 const keywordsStr BV1wmXwBCEsZ BV1MR6wBREhY BV1DuoSYuEpX ; // // 将多行字符串按换行符分割&#xff0c;过滤掉空行 const keywords keywordsStr.trim()…...

编程新知 2026/5/20 22:12:56

AI视频工业化生产新范式（Sora 2与DaVinci深度耦合技术解密）

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;AI视频工业化生产新范式&#xff08;Sora 2与DaVinci深度耦合技术解密&#xff09; Sora 2不再仅是生成式模型的单点突破&#xff0c;而是作为视频工业流水线的智能中枢&#xff0c;与Blackmagic Design DaVi…...

编程新知 2026/5/20 19:52:49

联想RD450X服务器风扇策略深度解析：IPMI raw命令详解与安全调校指南

联想RD450X服务器IPMI风扇调校实战&#xff1a;从底层指令到安全优化 在数据中心密集部署的服务器集群中&#xff0c;散热管理往往成为平衡性能与可靠性的关键支点。联想RD450X作为主流2U机架式服务器&#xff0c;其智能风扇控制系统通过IPMI接口提供了丰富的底层调节能力&…...

编程新知 2026/5/20 18:56:35

矩阵从0到自动化运转的4个阶段：90%的团队死在第2阶段

原创声明&#xff1a;✅ 本文为运营阶段理论分析与实战调研总结&#xff0c;涉及工具仅作阶段验证案例&#xff0c;不构成任何商业推荐。一、先说一个反直觉的事实我追踪了20个矩阵团队从0到稳定运营的全过程&#xff0c;发现一个规律&#xff1a;阶段存活率平均耗时最常见的死…...

编程新知 2026/5/20 17:49:55