如何建立一个简单的Visual Studio Code扩展

注：本文提到的代码示例下载地址>How to create a simple extension for VS Code

VS Code 是微软推出的一款轻量级的代码编辑器，免费，开源，支持多种语言，还能安装各类扩展。没有用过的同窗能够下载下来感觉一下，具体参见官方文档。

假设VS Code你已经安装好了，也已经大概玩过一遍了。接下来咱们就开始讲讲怎么建立一个简单的VS Code扩展。

首先要装下node.js，而后经过命令行安装Yeoman，咱们要经过这个工具来自动生成扩展代码：

>npm install -g yo generator-code

安装完了以后，再在命令行中敲>yo code

扩展支持JavaScript和TypeScript两种语言编写，咱们此次选择JavaScript，使用上下键来选择，而后回车，下面输入你的扩展的各类信息

确认回车后，工具会帮咱们生成一个Hello World扩展，咱们这边取的名字是hellocode, 因此扩展所在的文件夹名就是hellocode，打开hellocode

运行>code .

hellocode文件夹将会经过VS Code打开，咱们在这个VS Code窗口中按下F5来运行这个扩展，能够看到一个新的VS Code窗口会打开。咱们在里面按下Ctrl+Shift+P，在弹出的命令栏中敲Hello World回车，你会看到弹出一个“Hello Worlld!”信息框。

 

 关掉这个窗口，咱们来看一下hellocode底下的文件，package.json 里有咱们用工具生成代码的时候写的一些信息。

 

咱们能够在这个里面修改配置，好比把title改为“Hi Code”，那咱们调取这个扩展的时候就要敲“Hi Code”而不是“Hello World”了。

    "contributes": {
        "commands": [{
            "command": "extension.sayHello",
            "title": "Hi Code"
        }]
    },

那么弹出信息框的代码在哪里呢？

咱们在extension.js里找到这段代码，activate 方法中，咱们给“extension.sayHello”注册了方法，方法内容就是，弹出“Hello World!”信息框。

function activate(context) {

    // 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 "testcode" 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', function () {
        // 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);
}

接下来咱们稍微修改下这个方法，

function activate(context) {
    // 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 "hellocode" 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', SelectItem);
    context.subscriptions.push(disposable);
}

function SelectItem() {
    vscode.window.showQuickPick(["a", "b"]).then(function (selected) {
        if(selected){
        vscode.window.showInformationMessage("Item '"+selected+"' has been selected!");}
    });
}

咱们在弹出信息框以前，调用了一个VC Code 的API，显示一个快速选择的列表，当用户选择以后，把选中的内容显示在信息框中。

按下F5来debug一下，

 

咱们能够在extension.js中添加断点进行一步步调试，这边我就不一步步的放截图了，你们能够本身尝试着去作一下。

好了，此次的示范就到这里，但愿能帮到你们~

想了解更多的VS Code API, 戳这边：https://code.visualstudio.com/docs/extensionAPI/vscode-api

此次的示例代码在这里能够下载：How to create a simple extension for VS Code

以为这个例子太简单？这里有更多完整的示例：https://code.visualstudio.com/docs/tools/samples