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

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

可以看到，它可以根據用戶輸入的內容來一項一項排除，只顯示完全匹配的那一項。
項目的框架是Vue，編輯器用的是Monaco Editor。

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

安裝

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";

查看了資料后，發現在monaco中有提供一個提示功能的方法registerCompletionItemProvider，具體實現如下：

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

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

還有一個問題就是registerCompletionItemProvider的第一個參數只能是字符串，如果有多種語言只能疊加重復寫，恰巧我的需求是有多種語言，所以只能如下解決，也就是每種語言都寫了一遍：

["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，也就是說在輸入${_DB后，再輸入一個:提示出key，在key之后輸入:提示value。

這里又碰到一個問題，需要知道當前輸入的內容來判斷是$還是:，而且后面兩個觸發提示的符號同是:，無法區分，只能通過識別:的位置來判斷是提示key還是value，所以還要知道當前輸入的:之前的內容。

那么只有在provideCompletionItems這一步判斷，但是查遍了資料沒有發現這樣的參數，provideCompletionItems只有model、position、token這幾個參數，后來發現model中的getLineContent方法可以獲取指定行的所有內容，而position可以獲取當前輸入行的行數和列數，于是就有了以下解決方法：

this.monaco.languages.registerCompletionItemProvider(item, {
  provideCompletionItems (model, position) {
    // 獲取當前行數
    const line = position.lineNumber
    
    // 獲取當前列數
    const column = position.column
    
    // 獲取當前輸入行的所有內容
    const content = model.getLineContent(line)
    
    // 通過下標來獲取當前光標后一個內容，即為剛輸入的內容
    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: ["$", ":"]
});

能獲取光標后的第一個內容，后面的內容就都能獲取啦，如果識別到前面的內容是${_DB就提示key，否則提示value。

最后總結下來就是一定要多看文檔，勤于測試就能解決問題啦~

啦啦啦~ 交差去啦~