VScode插件之Codelens
2022-11-25 本文已影响0人
从今以后_19d7
demo.gif
插件配置
在package.json中
- commands注册两个命令
- configuration 配置一个配置项, 这个配置项控制着CodeLens的显示和隐藏, 这里默认是显示的
"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
}
}
}
},
入口文件中
- codelensProvider继承
vscode.CodeLensProvider对象 - 对配置项的修改
workspace.getConfiguration("codelens-sample").update("enableCodeLens", true, 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
- document.positionAt(matches.index).line
- document.lineAt
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;
}