VS Code 插件开发（二） — 了解 Command

最新推荐文章于 2024-04-12 18:39:33 发布

benwalker

最新推荐文章于 2024-04-12 18:39:33 发布

阅读量2.7k

点赞数

分类专栏： VS Code Extension 文章标签：前端

本文链接：https://blog.csdn.net/weixin_49067499/article/details/107783110

版权

VS Code Extension 专栏收录该内容

2 篇文章

订阅专栏

在VS Code插件开发中，Command是核心功能之一。本文介绍了如何执行内置命令，如`openFolder`，以及如何创建自定义命令。执行命令可通过`vscode.commands.executeCommand`，并提供了`Command URI`来触发命令。同时，利用`vscode.commands.registerCommand`注册自定义命令，如`myExtension.sayHello`，并在`package.json`中配置，以便用户通过Command Palette访问。总结了Command的基本使用，为后续深入学习奠定基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在 VS Code 插件开发中，Command 是最基本、最常用的一个特性。你可以使用内置的一些命令，如：vscode.openFolder 打开文件夹或工作空间；也可以自定义命令，给用户使用。

执行命令

通过 vscode.commands.executeCommand() 可执行一个命令，此方法第一个参数为命令名，根据不同命令，后面可以传跟命令相关的参数。以 vscode.openFolder 命令为例，此命令后可跟两个参数：uri，文件夹或工作空间的路径，如果不传，则打开原生文件系统弹框，供用户选择；newWindow，是否在新窗口打开，默认在当前窗口打开。

import * as vscode from 'vscode';

// 打开原生文件系统弹框
vscode.commands.executeCommand('vscode.openFolder');

// 在当前页面打开 /opt/path 文件夹
const folderUri = vscode.Uri.file('/opt/path');
vscode.commands.executeCommand('vscode.openFolder', folderUri);

除了调用 vscode.commands.executeCommand() 执行命令外，点击 Command URI 也可以执行命令。通过 vscode.Uri.parse() 可以产生一个 Command URI。

举个例子，在 webview 中点击打开文件夹：

import * as vscode from 'vscode';

const webview = vscode.window.createWebviewPanel(
	'hello',
	`Hello World`,
	vscode.ViewColumn.One,
	{
		enableCommandUris: true
	}
);
// 生成 commandURI
let openCommandURI = vscode.Uri.parse('command:vscode.openFolder');
// 点击 a 标签，执行 vscode.openFolder 命令
webview.webview.html = `<a href="${openCommandURI}">打开文件夹</a>`;

自定义命令

通过 vscode.commands.registerCommand 可注册一个自定义命令。此方法接收两个参数，第一个为命令名，第二个为此命令的处理函数。如下：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  const command = 'myExtension.sayHello';

  const commandHandler = (name: string = 'world') => {
    console.log(`Hello ${name}!!!`);
  };

  context.subscriptions.push(vscode.commands.registerCommand(command, commandHandler));
}

当执行 myExtension.sayHello 命令时，会执行 commandHandler 函数。

对于自定义的命令，如果要暴露出给用户使用，则需要在 package.json 文件中的 contributes 命令中进行关联。如下：

{
  "contributes": {
    "commands": [
      {
        "command": "myExtension.sayHello",
        "title": "Say Hello"
      }
    ]
  }
}

这样当用户打开 Command Palette，输入 Say Hello，回车后就会执行 myExtension.sayHello 命令。

总结

以上介绍了 VS Code 里基本的 Command 的使用方法。总体来说通过 vscode.commands.executeCommand() 执行命令，通过 vscode.commands.registerCommand() 注册命令。在之后的文章中，会继续介绍关于 Command 的更多特性和更高级的功能。