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用法到第三十天，先为赛程做个总结。

之後视情况增补附录的章节，我们明天见，掰掰。