要实现 vs code 的语义标记提供者,需在 package.json 中声明 semanticTokens 支持,定义 tokenTypes 与 tokenModifiers;然后在 extension.ts 中注册 DocumentSemanticTokensProvider,实现 provideDocumentSemanticTokens 方法,通过 SemanticTokensBuilder 将语法结构(如函数、变量)转换为带类型和修饰符的标记;可选提供增量更新以优化性能;最后通过调试工具验证标记生效。关键在于准确解析代码范围并映射到语义类型。

要实现 visual studio Code 中的语义标记提供者(Semantic Tokens Provider),你需要使用 VS Code 的扩展 API 来为代码中的语法元素提供更精确的颜色和样式。语义标记能增强语法高亮,使变量、函数、类、类型等具有语义意义的元素以不同颜色显示。
1. 注册语义标记提供者
在你的扩展 package.json 文件中,需要声明对语义高亮的支持,并激活相应的语言:
“semanticTokens”: true 需要在 package.json 的 contributes 字段中启用,例如:
{ "contributes": { "semanticTokens": { "legend": { "tokenTypes": ["function", "variable", "class", "type"], "tokenModifiers": ["declaration", "readonly"] }, "selectors": [ { "language": "my-lang" } ] } } }
其中 tokenTypes 是你支持的语义标记类型,tokenModifiers 是修饰符(如只读、声明等)。
2. 实现 SemanticTokensProvider
在扩展主文件(通常是 extension.ts 或 extension.js)中注册提供者:
import * as vscode from 'vscode'; <p>export function activate(context: vscode.ExtensionContext) { const provider = new MySemanticTokensProvider();</p><p>const legend = new vscode.SemanticTokensLegend( ['function', 'variable', 'class', 'type'], ['declaration', 'readonly'] );</p><p>const selector = { language: 'my-lang' };</p><p>context.subscriptions.push( vscode.languages.registerDocumentSemanticTokensProvider(selector, provider, legend) ); }
接着实现提供者的 provideDocumentSemanticTokens 方法:
class MySemanticTokensProvider implements vscode.DocumentSemanticTokensProvider { provideDocumentSemanticTokens( document: vscode.TextDocument, token: vscode.CancellationToken ): vscode.ProviderResult<vscode.SemanticTokens> { <pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;">const tokensBuilder = new vscode.SemanticTokensBuilder(); // 示例:手动添加一些标记(实际应结合语法分析器) const functions = this.findFunctions(document); for (const func of functions) { tokensBuilder.push( func.range, 'function', func.isDeclaration ? ['declaration'] : [] ); } return tokensBuilder.build();
}
findFunctions(document: vscode.TextDocument) { const result = []; const text = document.getText(); const Regex = /bfunctions+([a-zA-Z_$][w$])s(/g;
let match; while ((match = regex.exec(text))) { const startPos = document.positionAt(match.index); const endPos = document.positionAt(match.index + match[0].length); result.push({ range: new vscode.Range(startPos, endPos), isDeclaration: true }); } return result;
} }
3. 支持增量更新(可选)
若需提高性能,可实现 provideDocumentSemanticTokensEdits 方法,在文档变化时仅返回差异数据。这适用于大型文件或复杂语言服务场景。
4. 测试与调试
启动扩展开发主机后,打开目标语言文件,查看是否应用了语义高亮。可通过命令面板运行 “Developer: Inspect Editor Tokens and Scopes” 查看当前光标处的标记类型和作用域,确认语义标记是否生效。
基本上就这些。只要定义好标记图例、正确实现提供者并解析出语法结构,就能让 VSCode 显示丰富的语义高亮。关键是把源码结构映射到语义类型上,通常配合语言服务器或简单的词法分析器完成。不复杂但容易忽略细节,比如行号偏移或范围计算错误会影响显示效果。


