Vscode/Icoding树插件开发

qq_40757983

980人浏览 · 2025-09-28 13:06:59

qq_40757983 · 2025-09-28 13:06:59 发布

在icoding里面修改配置之后，可以直接展现在icode代码或评审里面，根据需求调研是否可以在icoding的基础上进行开发

https://liiked.github.io/VS-Code-Extension-Doc-ZH/#/

调研结果

使用when属性控制这些操作的展示。

在package.json的contributes中设置menus；

icoding是基于vscode的基础做的一个代码编辑工具，可以根据vscode的方法进行修改
需求实现的基本方法：可以在侧边栏添加需要的内容，添加位置如图为例，参考链接：
https://blog.csdn.net/holdsky/article/details/111234085 VSCode插件开发--添加侧边栏入口和面板
vscode插件开发尝试
1. 首先要先安装好Node.js和Git，然后安装Yeoman和VS Code Extension Generator，这个脚手架会生成一个可以立马开发的项目。
  1. npm install -g yo generator-code
2. 运行生成器填好字段就可以创建一个helloworld提示弹窗；https://liiked.github.io/VS-Code-Extension-Doc-ZH/#/get-started/your-first-extension
解析插件结构，参考链接：https://liiked.github.io/VS-Code-Extension-Doc-ZH/#/get-started/extension-anatomy
1. package.json插件配置字段 https://liiked.github.io/VS-Code-Extension-Doc-ZH/#/references/extension-manifest
树视图：树视图demo
视图容器：视图容器包含了一列视图(views)，这些视图又包含在内置的视图容器中，要想配置一个视图容器，首先得注册package.json中的contributes.viewsContainers。还必须配置以下字段：
- id: 新视图容器的名称
- title: 展示给用户的视图容器名称，它会显示在视图容器上方
- icon: 在活动栏中展示的图标

创建一个新的树视图容器 https://liiked.github.io/VS-Code-Extension-Doc-ZH/#/extension-guides/tree-view

"contributes": {
		"viewsContainers": {
			"activitybar": [
				{
					"id":"sidebar_test",
					"title": "侧边栏测试",
					"icon": "test.svg"
				}
			]
		}
	}

视图是显示在视图容器中的UI片段。使用contributes.views进行配置，可以将新视图加在内置的视图容器或者配置好的视图容器中，必须给视图配置一个ID外加一个名称，还可以配置视图出现的位置：
1. explorer：显示在资源管理器侧边栏
2. debug: 显示在调试侧边栏
3. scm: 显示在源代码侧边栏

test: 测试侧边栏中的资源管理器视图

"contributes": {
        "viewsContainers": {
            "activitybar": [
                {
                    "id":"sidebar_test",
                    "title": "侧边栏测试",
                    "icon": "test.svg"
                }
            ]
        },
        "views": {
            "sidebar_test":[
                {
                    "id":"sidebar_test_id1",
                    "name":"面板区块名称1"
                },
                {
                    "id":"sidebar_test_id2",
                    "name":"面板区块名称2"
                }
            ]
        }
    },

测试插件打包：https://blog.csdn.net/qq_23350817/article/details/83374373
打包方法
1. 执行npm install vsce -g --save vsce，安装vsce命令。
2. 修改工程中的错误，有任何错误都不能完成打包(将Blob类型改成any)。
3. 删除node_modules文件夹，执行npm install
4. 执行vsce package
5. 安装方法

动态创建树视图

创建TreeItem类型的构造函数，传递参数label、collapsibleState；
1. new TreeItem(label:string|TreeItemLabel, collapsibleState?:TreeItemCollapsibleState):TreeItem
  1. label: tree 该项的标题。
  2. collapsibleState:(非必填) 该项是否折叠状态。Collapsed(折叠状态)、Expanded(展开状态)、None(无状态)。
2. new TreeItem(resourceUri:Uri,collapsibleState?:TreeItemCollapsibleState):TreeItem
  1. resourceUri:Uri: 表示此项目的资源的Uri,表示磁盘上的文件或其他资源(用来读取文件路径)
  2. collapsibleState:(非必填) 该项是否折叠状态。Collapsed(折叠状态)、Expanded(展开状态)、None(无状态)。
为树视图提供数据：插件创作者需要注册TreeDataProvider，以便动态生成视图中的数据。
1. 允许向TreeView贡献数据并在数据更改时进行更新。
  1. 方法：registerTreeDataProvider<T>(viewId:string, treeDataProvider:TreeDataProvider<T>):Disposable
    1. viewId:string：扩展节点的id
    2. treeDataProvider ：为树视图提供树数据的TreeDataProvider（数据提供程序）

创建节点方法

getTreeItem(element: T): TreeItem | Thenable<TreeItem>；获取树视图中的每一项 item,所以要返回 element;

getChildren(element?:T):ProviderResult<T[]> （element如果未传递任何元素，则跳过或获取根的子级。）

import * as vscode from 'vscode';

// 树节点
export class EntryItem extends vscode.TreeItem
{
}
//树的内容组织管理
export class EntryList implements vscode.TreeDataProvider<EntryItem>
{
    onDidChangeTreeData?: vscode.Event<void | EntryItem | null | undefined> | undefined;
    getTreeItem(element: EntryItem): vscode.TreeItem | Thenable<vscode.TreeItem> {
        return element;
    }
    getChildren(element?: EntryItem): vscode.ProviderResult<EntryItem[]> {
        if (element) {
            //创建子节点
            var childs = [];
                var item = new EntryItem('tool1',vscode.TreeItemCollapsibleState.None);
                item.command = {
                    command:"sidebar_test_id1.openChild", //命令id
                    title:"标题",
                    arguments:['toolone'] //命令接收的参数
                };
                childs[0] = item;
            return childs;
        } else { 
            //创建根节点
            return [new EntryItem("root",vscode.TreeItemCollapsibleState.Collapsed)];
        }
    }
}

创建节点之后需要注册在extension.ts中树视图

registerTreeDataProvider：注册树视图

注册命令

import * as sidebar from './slidetest';
const treeViewProvider= new sidebar.EntryList();
vscode.window.registerTreeDataProvider('sidebar_test_id1',treeViewProvider);
vscode.commands.registerCommand("sidebar_test_id1.openChild",args => {
    vscode.window.showInformationMessage(args);
});

示例

webview：点击节点打开新的webview并且嵌入页面

创建webview：window.createWebviewPanel(webviewId，title，viewColumn，)
1. 'webView', // 标识，随意命名
2. abel, // 面板标题
3. viewColumn, // 展示在哪个面板上
4. {
retainContextWhenHidden: true, // 控制是否保持webview面板的内容（iframe），即使面板不再可见。

enableScripts: true // 下面的 html 页可以使用 Scripts

}
1. 面板嵌入html: webviewPanel.webview.html = html;
2. 面板关闭操作：webviewPanel.onDidDispose(()=>{})

iframe无法引入设置禁止嵌套的页面（X-Frame-Options）

import { ExtensionContext, ViewColumn, WebviewPanel, window, commands } from 'vscode';
import * as vscode from 'vscode';
// 创建一个全局变量，类型为：WebviewPanel 或者 undefined
let webviewPanel : WebviewPanel | undefined;

// 创建一个可导出的方法,并且带上参数
export function createWebView(

    context: ExtensionContext,      // 上面的代码刚介绍过，可忽略
    viewColumn: ViewColumn,         // 窗口编辑器
    label: string                   // 传递进来的一个 label 值，就是点击树视图项 showInformationMessage 的值
    
) {

    if(webviewPanel === undefined) {
    
        // 上面重点讲解了 createWebviewPanel 传递4个参数
        webviewPanel = window.createWebviewPanel(
        
            'webView',                          // 标识，随意命名
            label,                              // 面板标题
            {
                viewColumn: vscode.ViewColumn.One  // 展示在哪个面板上
            },                         
            {
                retainContextWhenHidden: true,  // 控制是否保持webview面板的内容（iframe），即使面板不再可见。
                enableScripts: true              // 下面的 html 页可以使用 Scripts
            }
        );
        
        // 面板嵌入 html
        webviewPanel.webview.html = getIframeHtml(label);
        
    } else {
    
        // 如果面板已经存在，重新设置标题
        webviewPanel.title = label;
        webviewPanel.reveal();  // Webview面板一次只能显示在一列中。如果它已经显示，则此方法将其移动到新列。
    }

    // onDidDispose: 如果关闭该面板，将 webviewPanel 置 undefined
    webviewPanel.onDidDispose(() => {
        webviewPanel = undefined;
    });

    return webviewPanel;
}

// 嵌入 iframe 的 html 页面，
export function getIframeHtml(label: string) {
    let webviewhtml = `<!DOCTYPE html>
    <html lang="en">
        <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <style>
            html,
            body {
                margin: 0 !important;
                padding: 0 !important;
                width: 100%;
                height: 100%;
            }
            .iframeDiv {
                width: 100%;
                height: 100%;
            }
        </style>
        </head>

        <body>
        <iframe id='iframe1' class="iframeDiv" src="https://liiked.github.io/VS-Code-Extension-Doc-ZH/#/extension-guides/webview" scrolling="auto"></iframe>
        </body>
    </html>`;
    return webviewhtml;
}

在extension.ts中引入webview，例如要把页面加到指定的节点下：

import { createWebView } from './WebView';
vscode.commands.registerCommand("sidebar_test_id1.openChild",args => {
	const webView = createWebView(context, vscode.ViewColumn.Active, args);
	context.subscriptions.push(webView);
});

视图的操作 :在节点中添加右键菜单

view/title:视图标题位置显示的操作。这里可以配置主要的操作，使用"group": "navigation"进行配置，剩余的二级操作则出现在...菜单中。
view/item/context: 每个视图项的操作。这里可以配置主要的操作，使用"group": "inline"，剩余的二级操作则出现在...菜单中。

//package.json
"contributes": {
    "activationEvents": [
		"onView:sidebar_test_id1"
	],
    "commands": [
		{
            "command": "iCoding.Remote.ShareWorkspace",
            "title": "分享工作区",
            "category": "百度 iCoding"
        }
	],
    "menus": {
		"view/item/context": [
			{
               "command": "iCoding.Remote.ShareWorkspace",
               "group": "share@1",
               "when": "view == sidebar_test_id1"//如果需要针对特定的条目显示特殊的操作，定义树视图项的TreeItem.contextValue，并且在when中使用表达式，视图项的值储存在表达式的viewItem中。
            }
		]
	}
  }
 //extension.ts
 vscode.commands.executeCommand("iCoding.Remote.WorkspaceTree", 'params1', 'params2').then(result => {
	console.log('命令结果', result);
});

vscode请求数据创建树视图

1.安装axios npm install -g axios；

2.在文件中引入axios；

3.请求数据并创建树视图；

import * as vscode from 'vscode';
import axios from 'axios';
import { resolve } from 'path';
//数据请求
let envData: any = {};
let promiseFun = new Promise((resolve, reject) => {
    axios.get('xxxxxxxxxxxxxx')
    .then(function(response){
        let result: any = response['data'];
        resolve(result);
    })
    .catch(function(err){
        reject(err);
    });
});
promiseFun.then(function(data: any) {
    envData = data;
});

// 树节点
export class EntryItem extends vscode.TreeItem
{
}
//树的内容组织管理
export class EntryList implements vscode.TreeDataProvider<EntryItem>
{
    onDidChangeTreeData?: vscode.Event<void | EntryItem | null | undefined> | undefined;
    getTreeItem(element: EntryItem): vscode.TreeItem | Thenable<vscode.TreeItem> {
        return element;
    }
    getChildren(element?: EntryItem): vscode.ProviderResult<EntryItem[]> {
        if (element) {//子节点
            console.log(envData);
            var childs: any = [];
            let name: string = envData.name;
            var item = new EntryItem(name, vscode.TreeItemCollapsibleState.None);
            item.command = {
                command:"sidebar_test_id1.openChild", //命令id
                title:"标题",
                arguments:['toolone'] //命令接收的参数
            };
            childs[0] = item;
            return childs;
        } else { //根节点
            return [new EntryItem("root",vscode.TreeItemCollapsibleState.Collapsed)];
        }
    }
}import * as vscode from 'vscode';
import axios from 'axios';
import { resolve } from 'path';
//数据请求
let envData: any = {};
let promiseFun = new Promise((resolve, reject) => {
    axios.get('xxxxxxxxxxxxxxxxxx')
    .then(function(response){
        let result: any = response['data'];
        resolve(result);
    })
    .catch(function(err){
        reject(err);
    });
});
promiseFun.then(function(data: any) {
    envData = data;
});

// 树节点
export class EntryItem extends vscode.TreeItem
{
}
//树的内容组织管理
export class EntryList implements vscode.TreeDataProvider<EntryItem>
{
    onDidChangeTreeData?: vscode.Event<void | EntryItem | null | undefined> | undefined;
    getTreeItem(element: EntryItem): vscode.TreeItem | Thenable<vscode.TreeItem> {
        return element;
    }
    getChildren(element?: EntryItem): vscode.ProviderResult<EntryItem[]> {
        if (element) {//子节点
            console.log(envData);
            var childs: any = [];
            let name: string = envData.name;
            var item = new EntryItem(name, vscode.TreeItemCollapsibleState.None);
            item.command = {
                command:"sidebar_test_id1.openChild", //命令id
                title:"标题",
                arguments:['toolone'] //命令接收的参数
            };
            childs[0] = item;
            return childs;
        } else { //根节点
            return [new EntryItem("root",vscode.TreeItemCollapsibleState.Collapsed)];
        }
    }
}

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

别让你的 Agent 一口吃成胖子：AI Agent 任务拆分的工程实践指南

AI Agent技术社区

AI Agent律师行业智能体的实践步骤

AI Agent技术社区

MCP + 企业IM架构：AI Agent调用OA、ERP、MES时，身份和权限如何传递？

<think>我们只需要根据内容生成摘要，不超过150字。先理解文章核心：MCP+企业IM架构，AI Agent调用OA/ERP/MES时身份和权限传递。要点：IM从消息入口变任务入口；MCP解决连接，但不解决权限；需要五层身份映射；权限分层（可见性、调用、数据范围、确认）；建议组合MCP+API网关。摘要需简洁。参考生成： "本文探讨MCP与企业IM集成中AI Agent调用业务系统时的身份权