iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 29
0
Software Development

自己用的工具自己做! 30天玩轉VS Code Extension之旅系列 第 29

Day29 | 使用extension動態產生snippet提示吧!

大家好,我是韋恩,今天是鐵人賽的第二十九天,今天我們會來練習language命名空間下的api,使用它幫使用者產生snippet。

CompletionItemProvider簡介


在vscode的language命名空間的方法底下,有非常多的方法讓我們增強editor的功能,今天我們就會實際來練習註冊vscode的CompletionItemProvider,產生editor的自動補全提示,讓按下提示的使用者在編輯器上產生程式碼片段。

如上圖所示,在我們註冊使用CompletionItemProvider時,我們會先指定一個vscode.DocumentSelector,然後提供CompletionItemProvider。

DocumentSelector是做什麼用的呢?如英文字面的意思,selector讓我們可以指定某種語言的檔案,並且只對該檔案生成snippet,selector的功能真的是非常方便。

當我們想要對某種語言註冊CompletionItemProvider,比如typescript的檔案,我們就可以這麼設定selector物件

 { language: 'typescript' }

在上面,我們透過指令language_id來選擇語言。

現在我們有了更近一步的需求:我們想讓某一種格式開頭的檔案才套用設定,這個時候可以這樣指定

{ scheme: 'file', pattern: '**/interface.ts', language: 'typescript' }

如上所示,當我們這樣寫,vscode就會在符合pattern屬性裡glob語法的檔案註冊我們的provider,也就是說只有該命名開頭的檔案才會套用服務。

到這裡,讀者應該逐漸感受到了language底下功能的強大了吧!

現在,讓我們來實作provider吧!

class CompletionProvider implements vscode.CompletionItemProvider<vscode.CompletionItem> {
  constructor(private completionItems: vscode.CompletionItem[]) {}
  provideCompletionItems(
    _document: vscode.TextDocument, 
    _position: vscode.Position, 
    _token: vscode.CancellationToken, 
    _context: vscode.CompletionContext
  ): vscode.ProviderResult<vscode.CompletionItem[] | vscode.CompletionList<vscode.CompletionItem>> {
    return this.completionItems;
  }
 }

在我們指定要實作interface以後,我們至少要在class實作provideCompletionItem的方法,在方法下回傳一個completionItems的vscode.CompletionItem陣列。

因此,讓我們看一下最基本的CompletionItem用法吧!


export interface SnippetSetting {
 ...
 prefix: string;
 body: string[];
 description: string;
}

const completionItem = (snippet: SnippetSetting) => {
  const item = new vscode.CompletionItem(snippet.prefix);
  item.insertText = new vscode.SnippetString(snippet.body.join('\n'));
  item.documentation = snippet.description;
  return item;
};

如上面可見,我們可以將prefix、description以及snippet設定的body分別指派給label、insertText以及documentation的屬性。

當這些item提供給provider並且註冊指定語言檔案,就會產生snippet的提示。

結語


好的,今天我們練習了snippet的用法,明天會繼續實作跟介紹api用法到第三十天,先為賽程做個總結。

之後視情況增補附錄的章節,我們明天見,掰掰。


上一篇
Day28 | 獲取安裝的extension進行操作
下一篇
Day30 | 30天系列回顧 X賽程後規劃
系列文
自己用的工具自己做! 30天玩轉VS Code Extension之旅36

尚未有邦友留言

立即登入留言