VSCode扩展API自动补全的documentation/detail能否实现语法高亮

解决方案 #

要实现动态生成的CompletionItem补全内容的语法高亮，只需使用vscode.MarkdownString类型构造补全项的documentation字段，在内容中通过带语言标识的Markdown代码块包裹需要高亮的代码即可。detail字段目前仅支持纯文本渲染，如需高亮的说明内容建议统一放在documentation字段中。

修改后的实现代码 #

vscode.languages.registerCompletionItemProvider('xml', {
    provideCompletionItems(document: vscode.TextDocument, position: vscode.Position, token: vscode.CancellationToken): Thenable<vscode.CompletionItem[]> {
        return new Promise<vscode.CompletionItem[]>((resolve, reject) => {
            let ci = new vscode.CompletionItem("tag", vscode.CompletionItemKind.Snippet);
            ci.detail = "自定义XML标签";
            // 构造带语法高亮的Markdown说明内容
            const md = new vscode.MarkdownString();
            md.appendCodeblock('<Tag>documentation</Tag>', 'xml');
            md.appendCodeblock('<Tag>detail</Tag>', 'xml');
            ci.documentation = md;
            ci.insertText = "<Tag></Tag>";
            resolve([ci]);
        });
    }
});

说明 #

上述代码中通过appendCodeblock方法指定代码块的语言为xml，VSCode会自动调用XML语法高亮规则渲染这段代码，最终呈现的效果和静态配置的snippet高亮完全一致。

内容的提问来源于stack exchange，提问作者Rus