时间戳

首页 > 解决方案 > 在 VS Code 中选择树项时执行命令

javascript - 在 VS Code 中选择树项时执行命令

问题描述

我的 VS Code 扩展有一个树视图。当用户单击其中一个子树项时，它应该执行命令（显示信息消息）。我不知道如何捕捉点击事件并发出命令。这是树视图的提供者：

const vscode = require('vscode');

class TreeviewProvider {
  constructor(data) {
    this.data = data;
  }

  getTreeItem(element) {
    return element;
  }

  getChildren(element) {
    if(element) {
      return Promise.resolve(this.getData(element.label));
    }
    else {
      return Promise.resolve(this.getData());
    }
  }

  getData(value) {
    if(value) {
      // Load children items
      // Should I pass the command id?
      const command = 'myExtension.debugMessage';
      const data = this.data[value].map(element => {
        return new Data(element.label, vscode.TreeItemCollapsibleState.None, command);
      });
      return data;
    }
    else {
      // Load root items
      // ...
    }
  }
}

class Data extends vscode.TreeItem {
  constructor(label, collapsibleState, command = undefined) {
    super(label, collapsibleState);
    if(command) {
      // It should be a command to execute
      this.command = command;
    }
  }
}

module.exports = TreeviewProvider;

这就是我在激活函数中注册树视图的方式：

const vscode = require('vscode');
const TreeviewProvider = require('./components/TreeviewProvider');

/**
 * @param {vscode.ExtensionContext} context
 */
function activate(context) {
    const debugMessage = vscode.commands.registerCommand('myExtension.debugMessage', function () {
        // This is a command to execute 
        const date = new Date();
        vscode.window.showInformationMessage('Debug called at ' + date.toLocaleString());
    });

    const treeviewProvider = new TreeviewProvider(getSomeData());
    const treeviewView = vscode.window.registerTreeDataProvider('treeview-view', treeviewProvider);

    context.subscriptions.push(treeviewView);
}

// ...

标签： javascriptvisual-studio-code

解决方案

我刚刚意识到command扩展 TreeItem 的类中的属性应该是一个Command对象，就像文档中所说的那样： https ://code.visualstudio.com/api/references/vscode-api#TreeItem

因此，可以通过以下方式完成：

class Data extends vscode.TreeItem {
  constructor(label, collapsibleState, commandId) {
    super(label, collapsibleState);
    const command = {
      'command': commandId // commandId is a string that contains the registered id ('myExtension.debugMessage')
    };
    this.command = command;
  }
}

推荐阅读