如何在VSCode扩展中实现GitHub Copilot风格的自动填充文本样式？

VSCode 官方提供了现成的 Inline Completion API 可以直接实现你需要的灰色预渲染、按Tab确认插入的效果，不需要手动实现样式渲染、按键监听等底层逻辑，GitHub Copilot 本身也基于这套API实现。

核心依赖API #

你需要用到的是 vscode.languages.registerInlineCompletionItemProvider 接口，专门用于提供行内的实时补全建议，内置了灰色预览、输入时自动重算建议、Tab/Enter确认插入等默认交互。

基础实现步骤 #

• 第一步：在扩展的 package.json 中声明能力，激活事件配置如下：

  "activationEvents": [
    "onInlineCompletion"
  ],
  "contributes": {
    "inlineCompletions": [
      {
        "language": "*", // 指定生效的语言，*代表所有语言
        "id": "your-extension.inline-completion"
      }
    ]
  }
  

• 第二步：在扩展入口代码中注册内联补全提供者，在回调方法中实现你自己的文本预测逻辑，返回对应的补全内容即可，预览和交互由VSCode自动处理。
• 第三步：打包发布扩展即可，用户安装后输入文本时就会自动触发你的补全逻辑，灰色展示预测内容，按下Tab即可插入并应用正常语法高亮。

最简示例代码 #

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  const inlineCompletionProvider = vscode.languages.registerInlineCompletionItemProvider(
    { pattern: '**' }, // 匹配所有文件
    {
      provideInlineCompletionItems(document: vscode.TextDocument, position: vscode.Position) {
        // 拿到当前光标所在行的文本
        const currentLine = document.lineAt(position).text.trim();
        // 这里替换为你自己的AI预测逻辑
        if (currentLine.startsWith('def max_sum_slice')) {
          // 构造补全项，传入预测的完整代码
          const completionItem = new vscode.InlineCompletionItem(
            `(arr: list[int]) -> int:
    max_ending = max_slice = 0
    for num in arr:
        max_ending = max(0, max_ending + num)
        max_slice = max(max_slice, max_ending)
    return max_slice`
          );
          return [completionItem];
        }
        return [];
      }
    }
  );

  context.subscriptions.push(inlineCompletionProvider);
}

export function deactivate() {}

高级自定义能力 #

如果需要实现更复杂的效果，可以通过调整InlineCompletionItem的属性实现：

• 配置range属性指定补全内容需要替换的文本范围，支持修改已经输入的内容
• 配置command属性，实现补全插入后触发额外的自定义逻辑
• 配置insertText支持带占位符的代码片段插入

内容的提问来源于stack exchange，提问作者Lukelele