如何使用 VS 代码扩展 API 动态突出显示变量名？

Question

我希望我的 VS Code 扩展能够在初始化时突出显示变量名称。例如，当x = 4时，我希望x以红色突出显示。这是我到目前为止编写的代码：

extension.ts

context.subscriptions.push(
    vscode.workspace.onDidChangeTextDocument((event) => {
        const activeEditor = vscode.window.activeTextEditor;
        if(activeEditor){
            const currentLineIndex = activeEditor.selection.active.line;
            const lineContent = activeEditor.document.lineAt(currentLineIndex);
            const variableRegularExpression = new RegExp("^\s{0,}[a-zA-Z]{1,}[0-9]{0,}\s{0,}=\s{0,}[a-zA-Z0-9]{1,}\s{0,}(//[a-zA-Z0-9]){0,}$");
            if(variableRegularExpression.test(lineContent.text)){
                const variableName = lineContent.text.split('=')[0].trim();
                const startIndex = lineContent.text.indexOf(variableName);
                const endIndex = startIndex + variableName.length;
                const variableRange = new vscode.Range(currentLineIndex, startIndex, currentLineIndex, endIndex);
            }
        }
    })
);

如您所见，我正在尝试让扩展程序在初始化变量时动态理解。我将当前正在编辑的行与正则表达式进行比较，如果匹配，则提取变量的范围。

有没有办法动态地用颜色突出显示这个范围？这是为变量初始化实现动态突出显示的好方法吗？

Answer 1

您要找的是Semantic Token Highlighting。

您可以实现一个语义标记荧光笔，它从一个对象数组中读取您希望突出显示的文本的位置。

如何使用 VS 代码扩展 API 动态突出显示变量名？

How to highlight variable name dynamically using the VS Code Extension API?

typescript

visual-studio-code

vscode-extensions