本文转载自微信公众号《神光的编程秘籍》，作者神说必有光zxg。转载本文请联系神光编程秘籍公众号。VSCode是我们日常使用的编辑器。我们使用了很多VSCode插件，其中一些功能比较强大，但实际上实现起来非常简单。今天我就给大家介绍一个这样的API。概念说说先来了解几个概念：每一个这样的编辑窗口称为一个Editor，可以通过vscode.window.visibleTextEditors获取所有可见的编辑器实例。编辑器里有什么？当然，编辑器编辑文档，可以通过editor.document获取文档实例。文档可以通过document.getText()获取文档的内容。接下来是简单而强大的API：editor.setDecorations(decoration,range)它的作用是在编辑器的某个位置添加一些CSS到某个位置，也就是某个范围。这些CSS称为装饰。创建装饰器的api是window.createTextEditorDecorationType:vscode.window.createTextEditorDecorationType({textDecoration:'line-through',})参数是css，可以添加各种样式。您还可以添加伪元素（之前或之后）：vscode.window.createTextEditorDecorationType({before:{contentText:'',textDecoration:`none;`},})这些装饰品放在哪里？是第二个参数range如果指定，范围由文档中的两个位置决定。conststartPos=activeEditor.document.positionAt(index1);constendPos=activeEditor.document.positionAt(index2);constrange=newvscode.Range(startPos,endPos);这样编辑器就可以装饰了。我们把上面说的东西串联起来：从编辑器中获取文档，然后从document.getText()中获取文本内容，找到position1和position2这两个位置，构造一个范围，然后将editor.setDecorations传给这个段落范围加上装饰，装饰是各种css或者伪元素。你可能会说，就这些？这个api有什么厉害的。那我们就来看看这个api能做什么。Decorator的应用程序css颜色预览。这个css颜色高亮插件vscode-color-highlight你用过吗？这个的实现是通过正则化来匹配颜色的范围，然后添加一个before伪元素装饰来添加背景色。上图是我之前做的一个颜色预览功能，也是支持渐变色的。gitlens的内联提交信息gitlens可以说是最流行的VSCode插件了，它是如何在编辑器中显示提交信息的呢？是的，也是通过装饰器。还有编辑效果，编辑器里放烟花的插件vscode-power-mode，这么炫酷的效果也是基于装饰器的。原理是当文档内容发生变化时，添加一个before伪元素，放一张gif图片，过一会就消失了。这些功能都是基于我们前面学习的editor.setDecorationsapi，是不是简单又强大呢？总结VSCode中的每个编辑窗口都是一个编辑器实例，所有可见的编辑器都可以通过vscode.window.visibleTextEditors获取。编辑器中有一个文档，可以通过document.getText获取文本。之后通过对文字进行正则匹配，确定装饰的范围，然后创建一个装饰对象，就是一段CSS。然后你就可以使用这个简单而强大的api：editor.setDecorations给编辑器添加装饰。其实在我们平时使用的VSCode功能中有很多装饰器，比如css颜色预览，行中的gitblame信息，烟花等编辑效果。是不是简单又强大。小子，我珍藏的这个VSCode插件API就传给你了。唯一能限制你的是你的想象力。
