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

初探 VS Code + Webview

news 2026/2/10 3:25:05

本文作者为 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

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

编程新知 2026/2/5 17:57:20

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

编程新知 2026/2/6 9:49:55

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

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/9/17 2:39:21

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

编程新知 2026/1/27 4:58:14

Mysql8 忘记密码重置，以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

编程新知 2026/1/9 8:59:09

LangFlow技术架构分析

&#x1f527; LangFlow 的可视化技术栈 前端节点编辑器 底层框架&#xff1a;基于 &#xff08;一个现代化的 React 节点绘图库&#xff09; 功能&#xff1a; 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...

编程新知 2025/6/10 21:26:51

论文阅读：LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址&#xff1a;LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂&#xff0c;正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...

编程新知 2026/2/4 4:39:19

Python 训练营打卡 Day 47

注意力热力图可视化 在day 46代码的基础上&#xff0c;对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...

编程新知 2025/11/24 9:42:16

河北对口计算机高考MySQL笔记(完结版)（2026高考）持续更新~~~~

MySQL 基础概念 数据&#xff08;Data&#xff09;&#xff1a;文本&#xff0c;数字&#xff0c;图片&#xff0c;视频&#xff0c;音频等多种表现形式&#xff0c;能够被计算机存储和处理。 **数据库&#xff08;Data Base—简称DB&#xff09;&#xff1a;**存储数据的仓库…...

编程新知 2026/1/31 0:57:08

【见合八方平面波导外腔激光器专题系列】用于干涉光纤传感的低噪声平面波导外腔激光器2

----翻译自Mazin Alalus等人的文章 摘要 1550 nm DWDM 平面波导外腔激光器具有低相位/频率噪声、窄线宽和低 RIN 等特点。该腔体包括一个半导体增益芯片和一个带布拉格光栅的平面光波电路波导&#xff0c;采用 14 引脚蝶形封装。这种平面波导外腔激光器设计用于在振动和恶劣的…...

编程新知 2026/2/5 22:21:59