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

vscode插件开发之 - menu配置

news 2025/9/11 12:29:17

   上一遍博客介绍了如何从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

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2025/9/10 3:57:22

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

编程新知 2025/9/6 0:09:27

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

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

编程新知 2025/8/19 20:28:20

C++课设：简易日历程序（支持传统节假日 + 二十四节气 + 个人纪念日管理）

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 专栏介绍：《编程项目实战》 目录 一、为什么要开发一个日历程序？1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

编程新知 2025/7/20 6:08:51

WebRTC从入门到实践 - 零基础教程

WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC&#xff1f; WebRTC&#xff08;Web Real-Time Communication&#xff09;是一个支持网页浏览器进行实时语音…...

编程新知 2025/8/9 9:56:56

Java中栈的多种实现类详解

Java中栈的多种实现类详解&#xff1a;Stack、LinkedList与ArrayDeque全方位对比 前言一、Stack类——Java最早的栈实现1.1 Stack类简介1.2 常用方法1.3 优缺点分析 二、LinkedList类——灵活的双端链表2.1 LinkedList类简介2.2 常用方法2.3 优缺点分析 三、ArrayDeque类——高…...

编程新知 2025/7/7 17:26:48

6.计算机网络核心知识点精要手册

计算机网络核心知识点精要手册 1.协议基础篇 网络协议三要素 语法&#xff1a;数据与控制信息的结构或格式&#xff0c;如同语言中的语法规则语义&#xff1a;控制信息的具体含义和响应方式&#xff0c;规定通信双方"说什么"同步&#xff1a;事件执行的顺序与时序…...

编程新知 2025/6/27 0:13:39

初探用uniapp写微信小程序遇到的问题及解决(vue3+ts)

零、关于开发思路 （一）拿到工作任务，先理清楚需求 1.逻辑部分 不放过原型里说的每一句话，有疑惑的部分该问产品/测试/之前的开发就问 2.页面部分（含国际化） 整体看过需要开发页面的原型后，分类一下哪些组件/样式可以复用，直接提取出来使用 (时间充分的前提下，不…...

编程新知 2025/9/9 12:05:23

MLP实战二：MLP 实现图像数字多分类

任务 实战&#xff08;二&#xff09;&#xff1a;MLP 实现图像多分类 基于 mnist 数据集&#xff0c;建立 mlp 模型&#xff0c;实现 0-9 数字的十分类 task: 1、实现 mnist 数据载入&#xff0c;可视化图形数字&#xff1b; 2、完成数据预处理&#xff1a;图像数据维度转换与…...

编程新知 2025/9/7 8:42:19