少年,我把珍藏的这个 VSCode 插件 API 传给你了

开发 开发工具
VSCode 是我们每天都用的编辑器,我们会使用很多 VSCode 插件,其中有些功能比较强大但实现起来其实很简单,今天就给大家介绍一个这种 API。

[[426985]]

本文转载自微信公众号「神光的编程秘籍」,作者神说要有光zxg 。转载本文请联系神光的编程秘籍公众号。

VSCode 是我们每天都用的编辑器,我们会使用很多 VSCode 插件,其中有些功能比较强大但实现起来其实很简单,今天就给大家介绍一个这种 API。

概念串讲

先来了解几个概念:

每一个这种编辑窗口叫做一个 Editor,通过 vscode.window.visibleTextEditors 就可以拿到所有可见的 editor 实例。

editor 里有什么呢?

编辑器里编辑的当然是文档了,通过 editor.document 就可以拿到文档实例。

document 又可以通过 document.getText() 拿到文档内容。

接下来就是那个简单又强大的 API: editor.setDecorations(decoration, range)

它的作用就是在 editor 的某个位置到某个位置,也就是某段范围添加一些 CSS,这些 CSS 叫做装饰。

创建 decorator 的 api 是 window.createTextEditorDecorationType:

  1. vscode.window.createTextEditorDecorationType({ 
  2.   textDecoration: 'line-through',  
  3. }) 

参数就是 css,可以加各种样式。还可以加伪元素(before 或 after):

  1. vscode.window.createTextEditorDecorationType({ 
  2.   before: { 
  3.     contentText:''
  4.     textDecoration: `none;` 
  5.   }, 
  6. }) 

那这些装饰放在哪里呢?就是第二个参数 range 指定的,range 由文档中的两个位置来确定。

  1. const startPos = activeEditor.document.positionAt(ndex1); 
  2. const endPos = activeEditor.document.positionAt(index2); 
  3. const range = new vscode.Range(startPos, endPos); 

这样,就可以给编辑器加上了装饰。

我们来串联一下上面讲的东西:

从 editor 中拿到 document,然后 document.getText() 拿到文本内容,找到其中的两个位置 position1 和 position2,构造成一个 range, 然后通过 editor.setDecorations 给这段 range 加装饰,装饰就是各种 css 或者伪元素。

你可能会说,就这?这个 api 有啥强大的。

那我们来看下这个 api 能做啥。

decorator 的应用

css 颜色预览

大家用没用过这个 css 的颜色高亮插件 vscode-color-highlight,这个的实现就是通过正则匹配出 color 所在的 range,然后加一个 before 伪元素的装饰,添加背景色。

上图就是我之前做过一个颜色预览功能,还支持了渐变色。

gitlens 的行内 commit 信息

gitlens 可以说是最流行的 VSCode 插件了,它是怎么在 editor 中显示 commit 信息的呢?

没错,也是通过 decorator。

编辑特效

还有,在编辑器中放烟花的插件 vscode-power-mode,这么炫酷的效果也是基于 decorator。原理是 document 内容改变的时候添加 before 伪元素,放一个 gif 图,过段时间消失。

这些功能就是基于我们前面了解的那个 editor.setDecorations 的 api,是不是简单又强大。

总结

VSCode 里面的每个编辑窗口是一个 editor 实例,可以通过 vscode.window.visibleTextEditors 拿到所有的可见 editor。

editor 中有 document,然后可以通过 document.getText 拿到文本。

之后,通过对文本通过正则匹配,确定加装饰的范围,然后创建装饰对象,也就是一段 CSS。接下来就可以使用这个简单又强大的 api: editor.setDecorations给编辑器加装饰了。

其实我们平时用的 VSCode 功能中有很多 decorator 实现的,比如 css 颜色预览、行内的 git blame 信息,还有放烟花等编辑特效等等。是不是简单又强大。

 

少年,这个我珍藏的 VSCode 插件 API 就传授给你了,能限制你的应该就只有想象力了吧。

 

责任编辑:武晓燕 来源: 神光的编程秘籍
相关推荐

2021-03-02 07:33:10

VSCode插件代码

2020-09-08 08:45:39

jupyter插件代码

2016-04-28 09:36:44

人才教育/华三

2017-11-16 09:28:04

2020-02-05 09:39:08

BashLinux命令

2013-09-15 22:10:48

2021-10-11 09:38:46

模型Transformer代码

2017-07-11 15:57:31

Chrome插件浏览器

2020-04-14 10:06:20

微服务Netflix语言

2021-12-03 11:57:27

代码##语言

2023-10-30 19:51:52

ESlint检测工具代码

2021-06-28 10:06:21

开源文本识别pyWhat

2021-12-11 19:04:38

漏洞

2024-01-04 14:16:05

腾讯红黑树Socket

2020-12-14 08:00:00

浏览器插件Web

2020-12-09 08:27:48

并发编程编程开发

2020-12-09 15:00:08

编程IT线程

2021-07-27 11:45:37

Python 开发编程

2024-03-11 15:27:41

开发前端

2013-08-30 14:57:30

移动产品经理思考
点赞
收藏

51CTO技术栈公众号