VSCode函数调用关系图插件开发(d3-graphviz)

wang.wenchao

已于 2025-01-02 10:23:04 修改

阅读量1.7k

点赞数 5

文章标签： vscode ide 编辑器

于 2025-01-02 10:20:18 首次发布

本文链接：https://blog.csdn.net/wwchao2012/article/details/144878782

版权

文章目录

1、如何在VSCode插件webview中用d3-graphviz绘图

我来帮你创建一个 VS Code 插件示例，实现右键菜单触发 Webview 显示函数调用图的功能。

// package.json
{
   
  "name": "function-call-graph",
  "displayName": "Function Call Graph",
  "description": "Show function call graph in webview",
  "version": "0.0.1",
  "engines": {
   
    "vscode": "^1.80.0"
  },
  "categories": ["Other"],
  "activationEvents": [],
  "main": "./out/extension.js",
  "contributes": {
   
    "commands": [
      {
   
        "command": "function-call-graph.showGraph",
        "title": "Show Function Call Graph"
      }
    ],
    "menus": {
   
      "editor/context": [
        {
   
          "command": "function-call-graph.showGraph",
          "group": "navigation"
        }
      ]
    }
  },
  "scripts": {
   
    "vscode:prepublish": "npm run compile",
    "compile": "tsc -p ./"
  },
  "devDependencies": {
   
    "@types/vscode": "^1.80.0",
    "@types/node": "^16.11.7",
    "typescript": "^5.1.3"
  }
}

// src/extension.ts
import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
   
  let disposable = vscode.commands.registerCommand('function-call-graph.showGraph', () => {
   
    const panel