摘要：這次接到一個(gè)需求，要在瀏覽器的中支持自定義提示功能，如下所示可以看到，它可以根據(jù)用戶輸入的內(nèi)容來(lái)一項(xiàng)一項(xiàng)排除，只顯示完全匹配的那一項(xiàng)。

這次接到一個(gè)需求，要在瀏覽器的IDE中支持自定義提示功能，如下所示：

可以看到，它可以根據(jù)用戶輸入的內(nèi)容來(lái)一項(xiàng)一項(xiàng)排除，只顯示完全匹配的那一項(xiàng)。
項(xiàng)目的框架是Vue，編輯器用的是Monaco Editor。

vscode是我們經(jīng)常在用的編輯器，它的前身是微軟的一個(gè)叫Monaco Workbench的項(xiàng)目，而Monaco Editor就是從這個(gè)項(xiàng)目中成長(zhǎng)出來(lái)的一個(gè)web編輯器，他們很大一部分的代碼都是共用的，所以Monaco Editor和VSCode在編輯代碼，交互及UI上幾乎是一摸一樣的。不同的是，兩者的平臺(tái)不一樣，Monaco Editor基于瀏覽器，而VSCode基于electron，所以功能上VSCode更加健全，性能比較強(qiáng)大。

安裝

npm install monaco-editor --save

使用

import * as monaco from "monaco-editor";
this.fileEditor = this.monaco.editor.create(document.getElementById("monaco"), {
  value: null,
  language: "sql"  // 這里以sql為例
})

this.fileEditor.dispose(); // 使用完后銷毀

這里引入monaco要注意，在react中以下面方式引入：

import * as monaco from "monaco-editor/esm/vs/editor/editor.api";

查看了資料后，發(fā)現(xiàn)在monaco中有提供一個(gè)提示功能的方法registerCompletionItemProvider，具體實(shí)現(xiàn)如下：

this.monaco.languages.registerCompletionItemProvider("sql", { // 這里以sql語(yǔ)言為例
  provideCompletionItems () {
    return [{
      label: "${_DB",  // 顯示的提示內(nèi)容
      kind: this.monaco.languages.CompletionItemKind["Function"], // 用來(lái)顯示提示內(nèi)容后的不同的圖標(biāo)
      insertText: "{_DB", // 選擇后粘貼到編輯器中的文字
      detail: "" // 提示內(nèi)容后的說(shuō)明
    }];
  },
  triggerCharacters: ["$"] // 觸發(fā)提示的字符，可以寫(xiě)多個(gè)
});

以上的用法，我試了一下之后發(fā)現(xiàn)，雖然triggerCharacters的值是數(shù)組，可以有多個(gè)，但是里面的字符串只能識(shí)別一個(gè)字符。一開(kāi)始的需求是輸入${_之后提示${_DB，但是由于不能識(shí)別多個(gè)字符，只能做到出現(xiàn)$就提示。

還有一個(gè)問(wèn)題就是registerCompletionItemProvider的第一個(gè)參數(shù)只能是字符串，如果有多種語(yǔ)言只能疊加重復(fù)寫(xiě)，恰巧我的需求是有多種語(yǔ)言，所以只能如下解決，也就是每種語(yǔ)言都寫(xiě)了一遍：

["json", "yaml", "php", "go", "sql", "java", "markdown", "plaintext"].map(item => {
  this.monaco.languages.registerCompletionItemProvider(item, {
    provideCompletionItems () {
      return [{
        label: "${_DB",
        kind: this.monaco.languages.CompletionItemKind["Function"],
        insertText: "{_DB",
        detail: ""
      }];
    },
    triggerCharacters: ["$"]
  });
});

需求是${_DB:key:value，也就是說(shuō)在輸入${_DB后，再輸入一個(gè):提示出key，在key之后輸入:提示value。

這里又碰到一個(gè)問(wèn)題，需要知道當(dāng)前輸入的內(nèi)容來(lái)判斷是$還是:，而且后面兩個(gè)觸發(fā)提示的符號(hào)同是:，無(wú)法區(qū)分，只能通過(guò)識(shí)別:的位置來(lái)判斷是提示key還是value，所以還要知道當(dāng)前輸入的:之前的內(nèi)容。

那么只有在provideCompletionItems這一步判斷，但是查遍了資料沒(méi)有發(fā)現(xiàn)這樣的參數(shù)，provideCompletionItems只有model、position、token這幾個(gè)參數(shù)，后來(lái)發(fā)現(xiàn)model中的getLineContent方法可以獲取指定行的所有內(nèi)容，而position可以獲取當(dāng)前輸入行的行數(shù)和列數(shù)，于是就有了以下解決方法：

this.monaco.languages.registerCompletionItemProvider(item, {
  provideCompletionItems (model, position) {
    // 獲取當(dāng)前行數(shù)
    const line = position.lineNumber
    
    // 獲取當(dāng)前列數(shù)
    const column = position.column
    
    // 獲取當(dāng)前輸入行的所有內(nèi)容
    const content = model.getLineContent(line)
    
    // 通過(guò)下標(biāo)來(lái)獲取當(dāng)前光標(biāo)后一個(gè)內(nèi)容，即為剛輸入的內(nèi)容
    const sym = content[column - 2]
    
    if (sym === "$") {
      return [{
        label: "${_DB",
        kind: this.monaco.languages.CompletionItemKind["Function"],
        insertText: "{_DB",
        detail: ""
      }];
    }
    
    return [{
      label: ":abb",
      kind: this.monaco.languages.CompletionItemKind["Function"],
      insertText: "abb",
      detail: ""
    },
    {
      label: ":bc",
      kind: this.monaco.languages.CompletionItemKind["Function"],
      insertText: "bc",
      detail: ""
    }];
  },
  triggerCharacters: ["$", ":"]
});

能獲取光標(biāo)后的第一個(gè)內(nèi)容，后面的內(nèi)容就都能獲取啦，如果識(shí)別到前面的內(nèi)容是${_DB就提示key，否則提示value。

最后總結(jié)下來(lái)就是一定要多看文檔，勤于測(cè)試就能解決問(wèn)題啦~

啦啦啦~ 交差去啦~