[[426985]]

本文轉(zhuǎn)載自微信公眾號(hào)「神光的編程秘籍」，作者神說(shuō)要有光zxg 。轉(zhuǎn)載本文請(qǐng)聯(lián)系神光的編程秘籍公眾號(hào)。

VSCode 是我們每天都用的編輯器，我們會(huì)使用很多 VSCode 插件，其中有些功能比較強(qiáng)大但實(shí)現(xiàn)起來(lái)其實(shí)很簡(jiǎn)單，今天就給大家介紹一個(gè)這種 API。

概念串講

先來(lái)了解幾個(gè)概念：

每一個(gè)這種編輯窗口叫做一個(gè) Editor，通過(guò) vscode.window.visibleTextEditors 就可以拿到所有可見(jiàn)的 editor 實(shí)例。

editor 里有什么呢?

編輯器里編輯的當(dāng)然是文檔了，通過(guò) editor.document 就可以拿到文檔實(shí)例。

document 又可以通過(guò) document.getText() 拿到文檔內(nèi)容。

接下來(lái)就是那個(gè)簡(jiǎn)單又強(qiáng)大的 API： editor.setDecorations(decoration, range)

它的作用就是在 editor 的某個(gè)位置到某個(gè)位置，也就是某段范圍添加一些 CSS，這些 CSS 叫做裝飾。

創(chuàng)建 decorator 的 api 是 window.createTextEditorDecorationType：

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

參數(shù)就是 css，可以加各種樣式。還可以加偽元素(before 或 after)：

vscode.window.createTextEditorDecorationType({ 
  before: { 
    contentText:'', 
    textDecoration: `none;` 
  }, 
}) 

那這些裝飾放在哪里呢?就是第二個(gè)參數(shù) range 指定的，range 由文檔中的兩個(gè)位置來(lái)確定。

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

這樣，就可以給編輯器加上了裝飾。

我們來(lái)串聯(lián)一下上面講的東西：

從 editor 中拿到 document，然后 document.getText() 拿到文本內(nèi)容，找到其中的兩個(gè)位置 position1 和 position2，構(gòu)造成一個(gè) range， 然后通過(guò) editor.setDecorations 給這段 range 加裝飾，裝飾就是各種 css 或者偽元素。

你可能會(huì)說(shuō)，就這?這個(gè) api 有啥強(qiáng)大的。

那我們來(lái)看下這個(gè) api 能做啥。

decorator 的應(yīng)用

css 顏色預(yù)覽

大家用沒(méi)用過(guò)這個(gè) css 的顏色高亮插件 vscode-color-highlight，這個(gè)的實(shí)現(xiàn)就是通過(guò)正則匹配出 color 所在的 range，然后加一個(gè) before 偽元素的裝飾，添加背景色。

上圖就是我之前做過(guò)一個(gè)顏色預(yù)覽功能，還支持了漸變色。

gitlens 的行內(nèi) commit 信息

gitlens 可以說(shuō)是最流行的 VSCode 插件了，它是怎么在 editor 中顯示 commit 信息的呢?

沒(méi)錯(cuò)，也是通過(guò) decorator。

編輯特效

還有，在編輯器中放煙花的插件 vscode-power-mode，這么炫酷的效果也是基于 decorator。原理是 document 內(nèi)容改變的時(shí)候添加 before 偽元素，放一個(gè) gif 圖，過(guò)段時(shí)間消失。

這些功能就是基于我們前面了解的那個(gè) editor.setDecorations 的 api，是不是簡(jiǎn)單又強(qiáng)大。

總結(jié)

VSCode 里面的每個(gè)編輯窗口是一個(gè) editor 實(shí)例，可以通過(guò) vscode.window.visibleTextEditors 拿到所有的可見(jiàn) editor。

editor 中有 document，然后可以通過(guò) document.getText 拿到文本。

之后，通過(guò)對(duì)文本通過(guò)正則匹配，確定加裝飾的范圍，然后創(chuàng)建裝飾對(duì)象，也就是一段 CSS。接下來(lái)就可以使用這個(gè)簡(jiǎn)單又強(qiáng)大的 api： editor.setDecorations給編輯器加裝飾了。

其實(shí)我們平時(shí)用的 VSCode 功能中有很多 decorator 實(shí)現(xiàn)的，比如 css 顏色預(yù)覽、行內(nèi)的 git blame 信息，還有放煙花等編輯特效等等。是不是簡(jiǎn)單又強(qiáng)大。

少年，這個(gè)我珍藏的 VSCode 插件 API 就傳授給你了，能限制你的應(yīng)該就只有想象力了吧。