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

vscode插件开发之 - menu配置

news 2026/2/8 20:39:39

   上一遍博客介绍了如何从0到1搭建vscode插件开发的base code，这遍博客将重点介绍如何配置menu。通常，开发一款插件，会将插件显示在VSCode 左侧的活动栏（Activity Bar），那么如何配置让插件显示在Activity Bar中呢？非常简单。在package.json中增加如下的内容即可。

SideBar配置

"viewsContainers": {"activitybar": [{"id": "demo","title": "demo","icon": "./public/static/bot.png"}]},"views": {"demo": [{"type": "webview","id": "demoSidebar","name": "DemoSidebar"}]},

activitybar配置的作用：在 VSCode 左侧的活动栏（Activity Bar）中添加一个新的视图容器。提供一个名为 "demo" 的新图标，当用户点击这个图标时，可以打开相关的视图面板.
views配置的作用：在 "demo" 视图容器中添加一个类型为 webview 的视图，名为 "demoSidebar"。需要注意：views里面的名称要与视图容器中定义的id保持一致。

配置了上面的内容后，如果要正常显示，还需要修改extension.ts的内容，extension.js中内容如下所示：下面的代码创建了一个WebviewViewProvider的class，通过resolveWebviewView方法来创建插件的UI界面。在activate方法中，再通过vscode.window.registerWebviewViewProvider将provider注册进去。

import * as vscode from 'vscode';
import * as path from 'path';class MyWebviewViewProvider implements vscode.WebviewViewProvider {public static readonly viewName = 'demoSidebar';constructor(private readonly _extensionPath: string) { }public resolveWebviewView(webviewView: vscode.WebviewView,context: vscode.WebviewViewResolveContext,_token: vscode.CancellationToken) {webviewView.webview.options = {enableScripts: true,localResourceRoots: [vscode.Uri.file(path.join(this._extensionPath, 'dist'))]};const onDiskPath = vscode.Uri.file(path.join(this._extensionPath, 'dist', 'bundle.js'));const webviewUri = webviewView.webview.asWebviewUri(onDiskPath);webviewView.webview.html = this.getWebviewContent(webviewUri);}private getWebviewContent(webviewUri: vscode.Uri): string {return `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Taoli Webview</title></head><body><div id="root"></div><script src="${webviewUri}"></script></body></html>`;}
}export function activate(context: vscode.ExtensionContext) {context.subscriptions.push(vscode.window.registerWebviewViewProvider(MyWebviewViewProvider.viewName,new MyWebviewViewProvider(context.extensionPath)));
}export function deactivate() { }

上面构建html代码时，需要注意一点：在<body></body>中要添加上<div id="root"></div>的代码，否则UI无法显示，会提示无法找到root element的错误。因为在用React构建UI时，增加了查看root element的逻辑。下面是react构建的index.tsx文件。

const App = () => {return (<div><input type="text" name="name"></input><button>hello</button></div>);
};
const rootElement = document.getElementById('root');
if (rootElement) {const root = (ReactDOM as any).createRoot(rootElement);root.render(<App />);
} else {console.error('Root element not found!');
}

配置完成后，再次开启extension，可以看到在sidebar中显示了插件UI，具体如下图所示：

上面介绍了如何在sidebar中显示插件的UI，接着在看看如何在配置右键菜单，通过右键菜单，可以trigger相关的command。

配置右键菜单

下面的配置中，首先定义一个子菜单 demo.submenu，并命名为 "Demo"。接着，在编辑器的右键上下文菜单中添加一个子菜单 demo.submenu。使用户在右键点击编辑器中的内容时，可以方便地访问 "Demo" 相关的命令.在 demo.submenu 子菜单中添加 demo.showOne 和 demo.showTwo 命令,将相关的命令放入子菜单中，方便用户选择和执行这些命令.

 "contributes": {"commands": [{"command": "demo.showOne","title": "showOne"},{"command": "demo.showTwo","title": "showTwo"}],"submenus": [{"id": "demo.submenu","label": "Demo"}],"menus": {"editor/context": [{"submenu": "demo.submenu","group": "demo"}],"demo.submenu": [{"command": "demo.showOne"},{"command": "demo.showTwo"}]}},

配置完后，启动extension，在打开的文件中，点击右键，可以看到新配置的两个菜单。具体如下图所示：

如果要验证点击菜单是否有效，可以在extension.ts中对showOne和showTwo两个命令配置简单的信息显示即可。具体内容如下所示，修改extension.ts,再次运行，点击菜单后，在窗口中就会显示对应的信息。

export function activate(context: vscode.ExtensionContext) {context.subscriptions.push(vscode.window.registerWebviewViewProvider(MyWebviewViewProvider.viewName,new MyWebviewViewProvider(context.extensionPath)));context.subscriptions.push(vscode.commands.registerCommand('demo.showOne', () => {vscode.window.showInformationMessage('I am showOne.');}));context.subscriptions.push(vscode.commands.registerCommand('demo.showTwo', () => {vscode.window.showInformationMessage('I am showTwo.');}));
}

相关文章：

vscode插件开发之 - menu配置

上一遍博客介绍了如何从0到1搭建vscode插件开发的base code&#xff0c;这遍博客将重点介绍如何配置menu。通常&#xff0c;开发一款插件&#xff0c;会将插件显示在VSCode 左侧的活动栏&#xff08;Activity Bar&#xff09;&#xff0c;那么如何配置让插件显示在Activity Bar…...

编程日记 2024/6/15 13:50:25

自学C语言-9

** 第9章 函数 ** 大型程序一般会被分为若干个程序模块&#xff0c;每个模块实现一个特定功能 。C语言中&#xff0c;由函数实现子程序&#xff0c;由子程序实现模块功能。本章致力于使读者了解函数的概念&#xff0c;掌握函数的定义及调用方式&#xff1b;了解内部函数和外部…...

编程日记 2024/6/15 13:49:23

NVIDIA Triton系列01-应用概论

NVIDIA Triton系列01-应用概论 推理识别是人工智能最重要的落地应用&#xff0c;其他与深度学习相关的数据收集、标注、模型训练等工作&#xff0c;都是为了得到更好的最终推理性能与效果。 几乎每一种深度学习框架都能执行个别的推理工作&#xff0c;包括 Tensorflow、Pytorc…...

编程日记 2024/6/15 13:48:22

LIMS（实验室）信息管理系统源码、有哪些应用领域？采用C# ASP.NET dotnet 3.5 开发的一套实验室信息系统源码

LIMS&#xff08;实验室&#xff09;信息管理系统源码、有哪些应用领域&#xff1f;采用C# ASP.NET dotnet 3.5 开发的一套实验室信息系统源码 LIMS实验室信息管理系统&#xff0c;是一种基于计算机硬件和数据库技术&#xff0c;集多个功能模块为一体的信息管理系统。该系统主…...

编程日记 2024/6/15 13:46:20

Web前端进国企：挑战与机遇并存

Web前端进国企&#xff1a;挑战与机遇并存 随着互联网的飞速发展&#xff0c;Web前端技术已经成为企业信息化建设的重要组成部分。对于许多热衷于前端技术的年轻人来说&#xff0c;进入国企工作既是一种挑战&#xff0c;也是一种机遇。本文将从四个方面、五个方面、六个方面和…...

编程日记 2024/6/15 13:42:16

快速上手SpringBoot

黑马程序员Spring Boot2 文章目录 1、SpringBoot 入门程序开发1.1 创建一个新的项目 2、浅谈入门程序工作原理2.1 parent2.2 starter2.3 引导类2.4 内嵌tomcat 1、SpringBoot 入门程序开发 1.1 创建一个新的项目 file > new > project > empty Project 创建新模块&a…...

编程日记 2024/6/15 13:41:15

SQL 快速参考

SQL 快速参考 SQL&#xff08;Structured Query Language&#xff09;是一种用于管理关系数据库管理系统&#xff08;RDBMS&#xff09;的标准编程语言。它用于执行各种操作&#xff0c;如查询、更新、插入和删除数据库中的数据。本快速参考将提供SQL的基本语法和常用命令&…...

编程日记 2024/6/15 13:39:12

Cask ‘oraclexxx‘ is unavailable: No Cask with this name exists.

brew search oracle-jdk或brew search --cask oracle-jdk 原因&#xff1a;Homebrew官方仓库不再维护多个旧版本的OracleJDK 不推荐使用Homebrew环境安装JDK //指定版本安装 brew install --cask temurin17 //设置 JAVA_HOME 环境变量 //找到安装的JDK 版本的路径 /usr/lib…...

编程日记 2024/6/15 13:38:11

2024年武汉市中级、高级职称水测考试开卷方法分享

2024年武汉市&#xff08;除开东湖高新区外&#xff09;职称首次组织全员水测&#xff0c;先考水测后报名&#xff0c;水测报名在5月16号截止。 武汉市水测组织形式&#xff1a; 武汉市2024年专业技术职务水平能力测试分为笔试和面试&#xff0c;面试答辩有关事项另行通知&…...

编程日记 2024/6/15 13:37:10

计算机网络(6) ICMP协议

ICMP&#xff08;Internet Control Message Protocol&#xff0c;互联网控制消息协议&#xff09;是一种用于在IP网络中传递控制消息和错误报告的协议。ICMP是IP协议族的一部分&#xff0c;尽管它并不用于传输用户数据&#xff0c;但它在网络诊断和管理中起着关键作用。以下是关…...

编程日记 2024/6/15 13:33:07

FuTalk设计周刊-Vol.036

&#x1f525;AI漫谈 热点捕手 1、Stable Zero123:从单张图像生成高质量 3D 对象 Stable Zero123 可以生成物体的新颖视图&#xff0c;展示从各个角度对物体外观的 3D 理解&#xff0c;由于训练数据集和高程条件的改进&#xff0c;其质量比 Zero1-to-3 或 Zero123-XL 显著提高…...

编程日记 2024/6/15 13:31:05

Java——面向对象进阶（三）

前言&#xff1a; 抽象类&#xff0c;接口&#xff0c;内部类 文章目录 一、抽象类1.1 抽象方法1.2 抽象类1.3 抽象类的使用 二、 接口2.1 接口的定义和实现2.2 default 关键字2.3 实现接口时遇到的问题 三、内部类3.1 成员内部类3.2 静态内部类3.3 成员内部类3.4 匿名内部类&a…...

编程日记 2024/6/15 13:30:04

鸿蒙开发电话服务：【@ohos.telephony.observer (observer)】

observer 说明&#xff1a; 本模块首批接口从API version 6开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。 导入模块 import observer from ohos.telephony.observerobserver.on(‘networkStateChange’) on(type: ‘networkStateChange’, ca…...

编程日记 2024/6/15 13:29:02

希亦、追觅、云鲸洗地机：究竟有何不同？选择哪款更合适

最近收到很多私信里&#xff0c;要求洗地机测评的呼声特别高&#xff0c;作为宠粉的测评博主&#xff0c;当然是马上安排起来&#xff0c;满足大家对想看洗地机的愿望。这次洗地机测评&#xff0c;我挑选了三款热门的品牌型号&#xff0c;并从多个维度对它们进行使用测评&#…...

编程日记 2024/6/15 13:28:01

代码随想录算法训练营第二十六天

题目&#xff1a;455. 分发饼干 贪心第一题 这里的局部最优就是大饼干喂给胃口大的&#xff0c;充分利用饼干尺寸喂饱一个&#xff0c;全局最优就是喂饱尽可能多的小孩。或者小饼干先喂饱小胃口 首先要对 g 和 s进行排序这样才能知道最大的胃口和最大的饼干然后进行遍历即可…...

编程日记 2024/6/15 13:27:00

[面试题]Java【并发】

[面试题]Java【基础】[面试题]Java【虚拟机】[面试题]Java【并发】[面试题]Java【集合】[面试题]MySQL 因为 Java 并发涉及到的内容会非常多&#xff0c;本面试题可能很难覆盖到所有的知识点&#xff0c;所以推荐 《Java并发编程的艺术》 。 Java 线程 线程 通知 等待 线…...

编程日记 2024/6/15 13:25:59

基于VSCode和MinGW-w64搭建LVGL模拟开发环境

目录 概述 1 运行环境 1.1 版本信息 1.2 软件安装 1.2.1 下载安装VS Code 1.2.1.1 下载软件 1.2.1.1 安装软件 1.2.2 下载安装MinGW-w64 1.2.2.1 下载软件 1.2.2.2 安装软件 1.2.3 下载安装SDL 1.2.3.1 下载软件 ​1.2.3.2 安装软件 1.2.4 下载安装CMake 1.2.4.…...

编程日记 2024/6/15 13:24:57

H5112B 降压恒流芯片12V24V36V48V60V72V100V 1.2ALED 调光无频闪光滑细腻

H5112B多功能LED恒流驱动器是一款具有良好性能与高度集成度的驱动芯片。以下是该产品的主要优点及应用领域的详细分析&#xff1a; 产品优点&#xff1a; 宽电压输入范围&#xff1a;H5112B支持5V至90V的宽电压输入范围&#xff0c;使其能够适应多种不同的电源环境&#xff0…...

编程日记 2024/6/15 13:23:56

真心建议大家冲一冲新兴领域，工资高前景好【大模型NLP开发篇】

前言 从ChatGPT到新近的GPT-4&#xff0c;GPT模型的发展表明&#xff0c;AI正在向着“类⼈化”⽅向迅速发展。 GPT-4具备深度阅读和识图能⼒&#xff0c;能够出⾊地通过专业考试并完成复杂指令&#xff0c;向⼈类引以为傲的“创造⼒”发起挑战。 现有的就业结构即将发⽣重⼤变…...

编程日记 2024/6/15 13:21:54

深度剖析淘宝扭蛋机源码：打造趣味性电商活动的秘诀

在当今电商市场中&#xff0c;如何吸引用户的注意力、提升用户的参与度成为了各大电商平台竞相追求的目标。淘宝扭蛋机作为一种新型的电商活动形式&#xff0c;以其趣味性和互动性深受用户喜爱。本文将深度剖析淘宝扭蛋机源码&#xff0c;探讨其如何打造趣味性与互动性并存的电…...

编程日记 2024/6/15 13:19:51

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2026/2/8 3:54:15

线程同步：确保多线程程序的安全与高效！

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

编程新知 2025/9/24 16:02:40

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/11/28 6:00:25

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2026/1/27 17:31:07

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2026/2/4 12:35:34

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

编程新知 2026/2/6 20:07:35

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

编程新知 2026/1/30 12:10:19

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2026/1/31 3:30:33

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/9/24 23:08:17

tomcat入门

1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效&#xff0c;稳定&#xff0c;易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...

编程新知 2025/7/7 19:44:31