VScode插件开发

VScode插件之Codelens

2022-11-25  本文已影响0人  从今以后_19d7
demo.gif

插件配置

package.json

"contributes": {
        "commands": [
            {
                "title": "Enable CodeLens",
                "command": "codelens-sample.enableCodeLens",
                "category": "CodeLens Sample"
            },
            {
                "title": "Disable Codelens",
                "command": "codelens-sample.disableCodeLens",
                "category": "CodeLens Sample"
            }
        ],
        "configuration": {
            "properties": {
                "codelens-sample.enableCodeLens": {
                    "type": "boolean",
                    "default": true
                }
            }
        }
    },

入口文件中

export function activate(context: ExtensionContext) {
    const codelensProvider = new CodelensProvider();

    // 重点: 注册codelens提供者, 
    languages.registerCodeLensProvider("*", codelensProvider);
    // 注册两个命令的处理事件, 也就是对codelens这个选项的启用与否的修改
    commands.registerCommand("codelens-sample.enableCodeLens", () => {
        workspace.getConfiguration("codelens-sample").update("enableCodeLens", true, true);
    });

    commands.registerCommand("codelens-sample.disableCodeLens", () => {
        workspace.getConfiguration("codelens-sample").update("enableCodeLens", false, true);
    });
    // 这里注册codelen被点击的处理函数,这个命令会在provider中进行注册
    commands.registerCommand("codelens-sample.codelensAction", (args: any) => {
        window.showInformationMessage(`CodeLens action clicked with args=${args}`);
    });
}

CodeLensProvider

重要的一些API

class CodelensProvider implements vscode.CodeLensProvider {

    private codeLenses: vscode.CodeLens[] = [];
    private regex: RegExp;
    // 定义一个事件触发器
    private _onDidChangeCodeLenses: vscode.EventEmitter<void> = new vscode.EventEmitter<void>();
    // 接口中定义的事件属性
    public readonly onDidChangeCodeLenses: vscode.Event<void> = this._onDidChangeCodeLenses.event;

    constructor() {
        this.regex = /(.+)/g;
        // 当配置发生修改的时候,触发codelens事件, 也就触发了本对象的两个提供者方法
        vscode.workspace.onDidChangeConfiguration((_) => {
            this._onDidChangeCodeLenses.fire();
        });
    }

    // 那些位置提供codelens
public provideCodeLenses(document: vscode.TextDocument, token: vscode.CancellationToken): vscode.CodeLens[] | Thenable<vscode.CodeLens[]> {

    // 如果codelens被启用
    if (vscode.workspace.getConfiguration("codelens-sample").get("enableCodeLens", true)) {
        this.codeLenses = [];
        // 设置目标的正则
        const regex = new RegExp(this.regex);
        // 文档的文本
        const text = document.getText();
        let matches;
        // 循环查找正则
        while ((matches = regex.exec(text)) !== null) {
            // 获取正则匹配处的行内容
            const line = document.lineAt(document.positionAt(matches.index).line);
            // 正则内容开始的字符位置
            const indexOf = line.text.indexOf(matches[0]);
            // 创建位置对象
            const position = new vscode.Position(line.lineNumber, indexOf);
            const range = document.getWordRangeAtPosition(position, new RegExp(this.regex));
            if (range) {
                // 注册进入codelen
                this.codeLenses.push(new vscode.CodeLens(range));
            }
        }
        return this.codeLenses;
    }
    return [];
}

 // 解决codelens的内容
public resolveCodeLens(codeLens: vscode.CodeLens, token: vscode.CancellationToken) {
    if (vscode.workspace.getConfiguration("codelens-sample").get("enableCodeLens", true)) {
        // 一个codelens的命令
        codeLens.command = {
            // 显示的内容
            title: "Codelens provided by sample extension",
            // 鼠标悬停的提示内容
            tooltip: "Tooltip provided by sample extension",
            // 鼠标点击触发的事件
            command: "codelens-sample.codelensAction",
            // 事件的参数
            arguments: ["Argument 1", false]
        };
        return codeLens;
    }
    return null;
}
上一篇 下一篇

猜你喜欢

热点阅读