简单实战分享:带你聊聊VScode插件开发

1. VS Code插件开发基础

在开始插件开发之前,我们需要了解一些基础概念:

1.1. 扩展(extension)与插件(plugin)区别

在VS Code中,扩展(extension)与插件(plugin)并没有明确的区分。通常来说,扩展是指一类模块、插件是指实现特定功能的模块。

比如,在安装扩展Marketplace的时候,我们可以选择安装“Python语言支持”这个扩展;而“Python Intellisense”这个插件是实现Python代码提示的模块。

1.2. VS Code API

VS Code提供了丰富的API来方便我们进行插件开发。其中最重要的是vscode命名空间下的各种类和函数。例如,vscode.window可以用来操纵窗口,vscode.workspace可以用来操作工作区等等。

1.3. 插件开发模式

VS Code插件开发常用的开发模式有两种:直接使用VS Code内置的扩展功能API,或者使用yeoman generator进行自动化部署。

2. 开发VS Code插件

下面我们将以编写一个简单的Hello World插件为例来介绍如何开发VS Code插件。

2.1. 创建一个新的VS Code插件项目

首先,在控制台中执行以下命令来创造一个新的VS Code插件项目:

yo code

这里需要确保已经全局安装了yo和generator-code npm install yo generator-code -g。

然后,根据提示进行下一步操作,选择“New Extension”,填写插件信息。欢迎使用以下命令:

cd my-extension

code .

该命令将用VS Code打开您的插件项目。

2.2. 编写Hello World插件

打开src/extension.ts文件,输入以下代码:

// The module 'vscode' contains the VS Code extensibility API

// Import the module and reference it with the alias vscode in your code below

import * as vscode from 'vscode';

// This method is called when your extension is activated

// Your extension is activated the very first time the command is executed

export function activate(context: vscode.ExtensionContext) {

// Use the console to output diagnostic information (console.log) and errors (console.error)

// This line of code will only be executed once when your extension is activated

console.log('Congratulations, your extension "helloworld" is now active!');

// The command has been defined in the package.json file

// Now provide the implementation of the command with registerCommand

// The commandId parameter must match the command field in package.json

let disposable = vscode.commands.registerCommand('extension.sayHello', () => {

// The code you place here will be executed every time your command is executed

// Display a message box to the user

vscode.window.showInformationMessage('Hello World!');

});

context.subscriptions.push(disposable);

}

// this method is called when your extension is deactivated

export function deactivate() {}

这段代码定义了一个名为helloworld的扩展,启动后会打印一条消息,并提供了一个名为“sayHello”的命令。该命令运行后将弹出一个消息框,显示“Hello World!”。

2.3. 调试插件

要在开发过程中调试插件,我们可以使用VS Code内置的调试器。在VS Code中打开插件项目,按F5启动调试器,并在调试主机中选择“扩展(插件)开发主机”,随后在VS Code界面中选择一个开发者实例以便调试插件。如果一切正常,您现在应该可以运行并调试您的插件了。

2.4. 发布插件

要将插件发布到VS Code Marketplace中,您需要先打包扩展。在Visual Studio Code插件项目的根文件夹内,执行以下命令打包扩展:

vsce package

打包后,将生成一个名为helloworld-x.x.x.vsix的文件,默认保存在.vscode/extensions文件夹中。然后,登录VS Code Marketplace,并发布您的扩展。

发布前若不想自己创建“publisher”,可直接访问StoreFront。