VSCode 插件开发初体验

参考： Your First VSCode Extension: Hello World

开发环境

安装

1. 安装 Yeoman npm install -g yo
2. 安装 Yeoman 的 generator-code npm install -g generator-code

初始化项目

通过运行 yo code 来创建一个新的扩展开发项目。一般按提示走就可以了。

初始化项目的一些值得注意的点是，可以直接在依赖中添加 @types/node 以 nodejs 库作为依赖。 因为 VS Code 是构建在 NodeJS 之上的。（更具体的说是 : Electron）

Hello World

初始化项目之后，可以看到插件代码 extension.ts 代码如下：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    let disposable = vscode.commands.registerCommand('extension.sayHello', () => {
        vscode.window.showInformationMessage('Hello World!');
    });
    context.subscriptions.push(disposable);
}

这里面的逻辑如下：
1）当用户需要此插件时，加载此插件模块, 即 extension.ts 模块。
2）调用模块的激活插件接口：function activate(context: vscode.ExtensionContext)

3. 在激活插件接口中，注册插件的命令：

vscode.commands.registerCommand('extension.sayHello', () => {
        vscode.window.showInformationMessage('Hello World!');
    });

在这个 Hello Workd 示例中注册的是一个匿名函数。此函数通过调用 vscode.window.showInformationMessage 来显示一个窗口消息。

4）注册命令会返回一个可清理的对象。将此对象添加到 插件上下文中的 subscriptions 列表中。以便在不需要时 vscode 可以清理此插件命令占用的资源
context.subscriptions.push(disposable);

5）直接按 F5 即可调试此插件，此时 VSCode 会打开一个新窗口作为调试的 host window.

6. 后续可继续学习体验， Word Counter 这个示例。

API 小结

1. 注册命令 commands.registerCommand

    let disposable = vscode.commands.registerCommand('extension.sayHello', () => {
        // do something
    });

    context.subscriptions.push(disposable);

2. 得到当前选中的文本。

        let editor = vscode.window.activeTextEditor
        if(!editor){
            return
        }
        let selection = editor.selection
        let text = editor.document.getText(selection)

2. 得到 TextEditor 当前正在编辑 的 TextDocument 对象。 let doc = editor.document; ，其中 doc.getText() 可以用来读取当前文档的内容。

3. TextDocument 中有 languageId 属性可以用来读取当前文件的语言 ID。

4. window 全局对象有提供显示信息的 API，例如： vscode.window.showInformationMessage('你选择了文字:' + text);