编辑器装饰是VSCode中通过DecorationType和Range为文本添加视觉效果的机制，用于高亮、提示等场景，不修改实际内容。
VSCode 编辑器支持通过扩展实现文本标记与样式渲染，也就是所谓的“编辑器装饰”（Editor Decorations）。这种机制允许开发者在不修改实际代码的前提下，为特定文本范围添加视觉效果，比如背景色、下划线、图标、提示信息等。这对于语法增强、错误提示、代码覆盖率显示、TODO 高亮等场景非常有用。
什么是编辑器装饰（Decorations）？
在 VSCode 中，编辑器装饰 是一种将样式附加到文档中特定位置的机制。它基于 Range（文本范围）和 DecorationOptions 来定义如何渲染某段文本。
装饰不会改变文件内容，仅影响显示效果。它们由扩展动态创建，并可随时更新或清除。
如何使用 DecorationType 定义样式
要应用装饰，首先需要使用 vscode.window.createTextEditorDecorationType 创建一个装饰类型，指定 CSS 样式规则：
- backgroundColor：设置背景色
- color：设置文字颜色
- border：添加边框
- textDecoration：如删除线、下划线
- before 或 after：在文本前或后插入内容（支持 contentText 和 iconPath）
示例代码：
const decorationType = vscode.window.createTextEditorDecorationType({
backgroundColor: '#ffdddd',
borderColor: 'red',
borderStyle: 'solid',
borderWidth: '1px',
borderRadius: '3px',
padding: '0 2px',
textDecoration: 'underline',
before: {
contentText: '⚠️ ',
margin: '0 4px'
}
});
如何标记文本并应用装饰
定义好装饰类型后，下一步是找出要标记的文本位置（即 Range 对象），然后调用 setDecorations 方法应用到目标编辑器：
- 使用正则表达式或语言服务分析文档内容
- 生成匹配文本的 vscode.Range 列表
- 将 Range 数组传给 editor.setDecorations(decorationType, ranges)
示例：高亮所有 TODO 注释
const text = document.getText();
const regex = /\bTODO\b/g;
const decorations: vscode.DecorationOptions[] = [];
for (const match of text.matchAll(regex)) {
const startPos = document.positionAt(match.index!);
const endPos = document.positionAt(match.index! + match[0].length);
const range = new vscode.Range(startPos, endPos);
decorations.push({ range });
}
editor.setDecorations(decorationType, decorations);
动态更新与性能优化建议
装饰应随文档变化实时更新。监听 onDidChangeTextDocument 事件可以实现自动刷新。
注意以下几点提升体验：
- 避免频繁创建新的 DecorationType，应复用已有类型
- 只在活跃编辑器上应用装饰，减少资源浪费
- 对大文件做节流处理（如使用 debounce）
- 在用户切换文件时清除旧装饰
基本上就这些。VSCode 的装饰系统灵活且高效，掌握它能让你的扩展具备更强的可视化能力。关键是理解 Range 与 DecorationType 的配合使用方式。不复杂但容易忽略细节。
