vscode插件快餐教程(5) - 代碼補全

上節(jié)我們介紹了lsp的基本框架和協(xié)議的三次握手胚宦。
下面我們先學(xué)習(xí)一個最簡單的功能協(xié)議：給vscode發(fā)送一條通知弦撩。

LSP窗口消息

在LSP協(xié)議中枪芒，跟窗口相關(guān)的協(xié)議有三條：

• window/ShowMessage Notification
• window/showMessage Request
• window/logMessage Notification

我們可以使用Connection.window.sendxxxMessage函數(shù)來向客戶端發(fā)送消息贺奠。
根據(jù)消息程度的不同竣稽，分為Information, Warning和Error三個級別撩穿。

舉個例子试吁，我們可以在onInitialized棺棵，也就是客戶端與服務(wù)端三次握手一切就緒之后，向客戶端發(fā)一個消息熄捍。

connection.onInitialized(() => {
    connection.window.showInformationMessage('Hello World! form server side');
});

顯示結(jié)果如下：

showMessage

代碼補全

我們用窗口通知熱熱身烛恤，測試一下鏈路通不通。下面我們就直奔我們最感興趣的主題之一：代碼補全余耽。

代碼補全的形式其實也很簡單缚柏，輸入是一個TextDocumentPositionParams，輸出是一個CompletionItem的數(shù)組碟贾，這個函數(shù)注冊到connection.onCompletion中：

connection.onCompletion(
    (_textDocumentPosition: TextDocumentPositionParams): CompletionItem[] => {});

代碼補全中用到的主要數(shù)據(jù)結(jié)構(gòu)如下圖所示：

代碼補全.png

其中kind屬性由一個枚舉定義：

CompletionItemKind.png

大家不要被嚇到币喧，我們通過一個簡單的例子看一下，其實基本實現(xiàn)方法還是很簡單的：

connection.onCompletion(
    (_textDocumentPosition: TextDocumentPositionParams): CompletionItem[] => {
        connection.console.log('[xulun]Position:' + _textDocumentPosition.textDocument);

        return [
            {
                label: 'TextView',
                kind: CompletionItemKind.Text,
                data: 1
            },
            {
                label: 'Button',
                kind: CompletionItemKind.Text,
                data: 2
            },
            {
                label: 'ListView',
                kind: CompletionItemKind.Text,
                data: 3
            }
        ];
    }
)

補全的詳細信息

除了補全信息textDocument/completion之外袱耽，lsp還支持completionItem/resolve請求杀餐，輸入和輸出都是CompletionItem，返回進一步的信息朱巨。
通過connection.onCompletionResolve方法可以注冊對于completionItem/resolve請求的支持：

connection.onCompletionResolve(
    (item: CompletionItem): CompletionItem => {
        if (item.data === 1) {
            item.detail = 'TextView';
            item.documentation = 'TextView documentation';
        } else if (item.data === 2) {
            item.detail = 'Button';
            item.documentation = 'JavaScript documentation';
        } else if (item.data === 3) {
            item.detail = 'ListView';
            item.documentation = 'ListView documentation';
        }
        return item;
    }
)

運行效果如下：

ListView

使用參數(shù)中的補全位置信息

輸入?yún)?shù)中會帶有發(fā)出補全申請的位置信息史翘，我們可以根據(jù)這個信息來控制補全的信息。
我們以一個例子來說明下：

connection.onCompletion(
    (_textDocumentPosition: TextDocumentPositionParams): CompletionItem[] => {
        
        return [
            {
                label: 'TextView' + _textDocumentPosition.position.character,
                kind: CompletionItemKind.Text,
                data: 1
            },
            {
                label: 'Button' + _textDocumentPosition.position.line,
                kind: CompletionItemKind.Text,
                data: 2
            },
            {
                label: 'ListView',
                kind: CompletionItemKind.Text,
                data: 3
            }
        ];
    }
)

我們此時不光補全一個控件名冀续，還將當(dāng)前的行號或列號增加其中琼讽。
下面是補全Button的運行情況，會增加當(dāng)前的行號到補全信息中洪唐，我們在934行觸發(fā)補全钻蹬，于是補全提示的信息變成Button933：

補全帶列號