vscode插件开发之 - menu配置

   上一遍博客介绍了如何从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.');
        })
    );
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/708597.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

[Shell编程学习路线]——深入理解Shell编程中的变量(理论与实例)

&#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f6e0;️Shell编程专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年6月12日11点40分 &#x1f004;️文章质量&#xff1a;95分 文章目录 ————前言———— 1 自定义变量 &#x1fae0;…

数据结构笔记39-48

碎碎念&#xff1a;想了很久&#xff0c;不知道数据结构这个科目最终该以什么笔记方式呈现出来&#xff0c;是纸质版还是电子版&#xff1f;后来想了又想&#xff0c;还是电子版吧&#xff1f;毕竟和计算机有关~&#xff08;啊哈哈哈哈哈哈哈&#xff09; 概率论已经更新完了&…

为国产加油:“缺芯少屏”暂缓,另一领域,也要加把劲

说起咱中国之前的“缺芯少屏”&#xff0c;真的是让人挺闹心的。 不过呢&#xff0c;为了改变这个状况&#xff0c;咱们的工程师们可是费了不少劲儿&#xff0c;辛辛苦苦努力了数十年。现在好了&#xff0c;咱们也迎来了柔性屏的时代。 柔性屏 说起来&#xff0c;在触摸屏或者…

消费者消费数据时报错:INVALID_REPLICATION_FACTOR

今天部署了kafka集群&#xff0c;三台服务器&#xff0c;启动后&#xff0c;生产者发送数据&#xff0c;消费者接收数据的时候报错&#xff0c;INVALID_REPLICATION_FACTOR。 查了很多资料&#xff0c;说是要改kafka下config目录的server.properties,可能是副本数太小&#xff…

【MATLAB源码-第225期】基于matlab的计算器GUI设计仿真,能够实现基础运算,三角函数以及幂运算。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 界面布局 计算器界面的主要元素分为几大部分&#xff1a;显示屏、功能按钮、数字按钮和操作符按钮。 显示屏 显示屏&#xff08;Edit Text&#xff09;&#xff1a;位于界面顶部中央&#xff0c;用于显示用户输入的表达式和…

Python学习打卡:day05

day5 笔记来源于&#xff1a;黑马程序员python教程&#xff0c;8天python从入门到精通&#xff0c;学python看这套就够了 目录 day538、函数的初体验39、函数的基础定义语法函数的定义注意事项 40、函数的基础定义案例练习41、函数的传入参数42、函数的传入参数案例练习——升…

python django初步搭建(一)

记录一次简单的python django使用&#xff0c;后续调用api相关的暂时不想写。。。 一、环境 windows python 3.11.7 django 二、初步搭建 2.1 新建空文件夹 为了方便本次记录&#xff0c;新建了一个空的文件夹来使用。 直接在这里输入cmd 然后按下回车 2.2 安装virtual…

Kubernetes集群持久化部署实践

WordPress 网站持久化部署 要持久化MariaDB 可以把 Deployment 改成了 StatefulSet&#xff0c;修改 YAML添加“serviceName”“volumeClaimTemplates”这两个字段&#xff0c;定义网络标识和 NFS 动态存储卷&#xff0c;然后在容器部分用“volumeMounts”挂载到容器里的数据目…

利用three-csg-ts对做物体交互式挖洞

默认物体均为居中&#xff0c;如果指定位置没有发生偏移&#xff0c;可能是因为在执行布尔操作之前没有正确设置变换。确保在进行布尔运算之前应用所有必要的变换。以下是经过修正的完整代码示例&#xff0c;它会确保圆柱正确旋转并与盒子进行 CSG 操作。 安装依赖 首先&…

快捷回复话术分享:如何应对顾客愤怒骂人?

在客服的日常工作中&#xff0c;面对情绪激动、甚至愤怒发泄骂人的顾客是常见的挑战。初入此行业的小伙伴们往往在遭遇顾客的激烈情绪时感到手足无措&#xff0c;不知道如何妥善回应。为此&#xff0c;本文将分享一些实用的快捷回复话术和技巧&#xff0c;帮助新手客服更好地处…

vue聊天发送Emoji表情

在用web端写聊天发送表情的功能中&#xff0c;使用web端有系统自带的unicode表情会出现每端不统一的情况&#xff0c;不好用不能统一&#xff0c;在这里我想到了一个非常好的思路&#xff0c;可以解决这个问题&#xff01; 那就是发送表情用图片的形式呈现&#xff0c;然后发给…

电脑屏幕怎么显示提醒事项 电脑桌面提醒事项设置

在这个信息爆炸的时代&#xff0c;我们每个人都像是被数据洪流裹挟着前进。工作中&#xff0c;生活中&#xff0c;无数琐碎而重要的事情需要我们记忆和处理。有时&#xff0c;仅仅依靠大脑去记住所有事情&#xff0c;真的让人头疼。特别是对于那些整日面对电脑的办公族来说&…

Python基础教程(十一):数据结构汇总梳理

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; &#x1f49d;&#x1f49…

使用C#快速搭建一个在windows运行的exe应用

文章目录 一、前言1.1 编写语言需要工具1.2 选择自己需要的组件进行安装 二、新建项目1.1 新建一个 .NET4.x 的项目1.2 添加一个小案例1.3 对界面进行美化1.3.1、配置Form属性1.3.2、配置Button按钮 1.4 查看组将的相关代码 三、后记 一、前言 这是一个比较旧的内容&#xff0…

java调用GDAL及JTS实现生成泰森多边形(Voronoi图)的一种方法

目录 一、关于泰森多边形 1.泰森多边形的特性 2.本文的目的 二、实现思路 1.gdal和jts库的maven坐标 2.jts生成泰森多边形的关键代码 3.使用GDAL读取源文件信息的关键代码 4.使用GDAL将生成的泰森多边形写入文件 三、实现结果 1.实现的效果 2.完整代码示例 一、关于…

【STM32】飞控设计

【一些入门知识】 1.飞行原理 【垂直运动】 当 mg&#xff1e;F1F2F3F4&#xff0c;此时做下降加速飞行 当 mg&#xff1c;F1F2F3F4&#xff0c;此时做升高加速飞行 当 mgF1F2F3F4 &#xff0c;此时垂直上保持匀速飞行。 【偏航飞行】 ω 4 ω 2 ≠ ω 1 ω 3 就会产生水…

【CT】LeetCode手撕—200. 岛屿数量

目录 题目1-思路2- 实现⭐200. 岛屿数量——题解思路 3- ACM实现 题目 原题连接&#xff1a;200. 岛屿数量 1-思路 利用 dfs 深搜&#xff0c;遇到岛屿直接将岛屿填充为 0 2- 实现 ⭐200. 岛屿数量——题解思路 class Solution {public int numIslands(char[][] grid) {int …

开源WebGIS全流程常用技术栈

1 数据生产 1.1 uDig uDig&#xff08;http://udig.refractions.net/&#xff09;是一个基于Java开源的桌面应用框架&#xff0c;它构建在Eclipse RCP和GeoTools&#xff08;一个开源的Java GIS包)上。可以进行shp格式地图文件的编辑和查看&#xff1b;是一个开源空间数据查看…

5月产品更新 | 10大更新汇总,快来看看你的需求上线了吗?

5月&#xff0c;Smartbi从客户需求出发&#xff0c;并结合企业在数据分析、处理等方面遇到的问题&#xff0c;对数据模型、数据指标等数十项功能进行了优化升级。 Smartbi用户可以在官网下载下载PC端&#xff0c;更新后便可以使用相关功能&#xff0c;也可以在体验中心体验相关…

mybatis之特殊SQL的执行

1.1模糊查询 尝试&#xff1a; //模糊查询用户 List<User> getUserByLike(Param("mohu") String mohu);<select id"getUserByLike" resultType"user">select * from user where username like %#{mohu}% </select>Test publ…