xmake

                                    

最近打算給xmake寫一些IDE和編輯器的集成插件,發現vscode的編輯器插件比較容易上手的,就先研究瞭下vscode的插件開發流程,並且完成瞭xmake-vscode插件的開發。

我們先來看幾張最後的效果圖:

語法高亮和自動補全

<img src="http://tboox.org/static/img/xmake/xmake-vscode-completion.gif" width="60%" />

狀態欄

statusbar

要實現上面的效果,其實並不復雜,首先我們先來簡單介紹下,vscode的插件開發的基本流程:

安裝插件開發環境

安裝cnpm

由於國內環境比較復雜,直接用npm安裝也許很慢或者訪問不穩定,因此這裡先安裝瞭cnpm去默認使用淘寶的鏡像源。

xmake-grammars.json中的描述規則,我們摘錄自lua的grammars文件,因為xmake.lua本身就是基於lua語法的,例如,我們匹配'xxx'單引號字符串的規則,進行字符串的高亮輸出。

{
    "begin": "'",
    "beginCaptures": {
        "0": {
            "name": "punctuation.definition.string.begin.xmake"
        }
    },
    "end": "'",
    "endCaptures": {
        "0": {
            "name": "punctuation.definition.string.end.xmake"
        }
    },
    "name": "string.quoted.single.xmake",
    "patterns": [
        {
            "include": "#escaped_char"
        }
    ]
}

自動補全的實現

代碼的自動提示和補全比較麻煩下,需要寫個自定義的class,通過languages進行註冊:

vscode.languages.registerCompletionItemProvider("xmake", new Completion());

這裡我們定義瞭一個Completion類,註冊到xmake語言上去,xmake語言定義,就是剛才講的在package.json中的配置。

然後我們實現下這個Completion類:

export class Completion implements vscode.CompletionItemProvider {

    // 匹配當前輸入,提供需要補全的候選文本列表
    public provideCompletionItems(document: vscode.TextDocument, position: vscode.Position, token: vscode.CancellationToken): Thenable<vscode.CompletionItem[]> {

        // 獲取當前輸入的單詞文本
        let wordAtPosition = document.getWordRangeAtPosition(position);
        var currentWord = '';
        if (wordAtPosition && wordAtPosition.start.character < position.character) {
            var word = document.getText(wordAtPosition);
            currentWord = word.substr(0, position.character - wordAtPosition.start.character);
        }

        // 猜測匹配結果,返回候選列表
        return new Promise(function (resolve, reject) {
            Promise.all([
                getLuaKeywordsSuggestions(currentWord),
                getXMakeCommandsSuggestions(currentWord)
            ]).then(function (results) {
                var suggestions = Array.prototype.concat.apply([], results);
                resolve(suggestions);
            }).catch(err => { reject(err); });
        });
    }

    // 這裡可以對剛剛返回的候選文本列表在做二次處理,例如:增加詳細的文檔描述信息
    public resolveCompletionItem(item: vscode.CompletionItem, token: vscode.CancellationToken): Thenable<vscode.CompletionItem> {
        
        // 對每個候選文本增加文檔描述
        return new Promise(function (resolve, reject) { 
            item.documentation = "xxxxxxxxxxx";
            resolve(item);
         });
    }
}

這部分代碼比較多,就不完全貼出來瞭,完整實現,可參考:completion.ts

<img src="http://tboox.org/static/img/xmake/xmake-vscode-completion.gif" width="60%" />

結語

本文講述的一些vscode插件代碼都來自xmake-vscode,有興趣的同學可以直接參考源碼,寫個自己的插件。

關聯文章