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

初探 VS Code + Webview

news 2025/7/9 9:01:10

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

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/7/5 18:14:39

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2025/7/5 13:53:37

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2025/7/7 18:23:46

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/7/7 22:33:57

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

编程新知 2025/6/21 14:58:57

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

编程新知 2025/7/8 4:19:56

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

编程新知 2025/7/7 16:28:01

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...

编程新知 2025/7/7 0:24:14

论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing

Muffin 论文 现有方法 CRADLE 和 LEMON&#xff0c;依赖模型推理阶段输出进行差分测试&#xff0c;但在训练阶段是不可行的&#xff0c;因为训练阶段直到最后才有固定输出&#xff0c;中间过程是不断变化的。API 库覆盖低&#xff0c;因为各个 API 都是在各种具体场景下使用。…...

编程新知 2025/7/6 6:24:56

上位机开发过程中的设计模式体会(1)：工厂方法模式、单例模式和生成器模式

简介 在我的 QT/C 开发工作中&#xff0c;合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式&#xff1a;工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...

编程新知 2025/6/25 2:12:34