vscode插件开发-引入AI大模型实现代码补全

实习日记：

接到个完全不懂得任务，开发一个vscode插件 ，大概功能：引入AI模型辅助编程（实现，ai聊天对话，代码插入与补全等等功能，）,经过摸索，从一点不懂到现在有所小得了；

下面讲解，模拟AI 代码自动补全代码的简单例子

一.创建vscode项目

可以看vscode插件开发官网--您的第一个扩展 |Visual Studio Code 扩展 应用程序接口

执行以下命令即可

npx --package yo --package generator-code -- yo code

创建好之后，你会获得以下目录，extension.ts是主文件

二.模拟AI补全

我们可以想想，Ai代码补全的初略步骤:

1.获取用户输入的代码以及上下文，准备发送给AI

2.向AI发送请求,获取Ai生成的建议代码

3.对当前 编辑器代码 和 Ai生成的建议代码 进行处理，实现代码补全

vscode编辑器扩展了很多Api，我们可以借助它们来实现功能

第一步：获取用户输入的上下文代码并向AI模型发送请求

	const aiCompletionProvider = vscode.languages.registerCompletionItemProvider(
		[{ language: 'javascript', scheme: 'file' }, { language: 'typescript', scheme: 'file' }],
		{
			async provideCompletionItems(document: vscode.TextDocument, position: vscode.Position, token: vscode.CancellationToken) {
				const line = document.lineAt(position).text.substring(0, position.character);
				// 简单示例：取当前单词作为上下文
				const match = line.match(/([\w$]+)$/);
				const prefix = match ? match[1] : '';

				// 如果被取消，立即返回
				if (token.isCancellationRequested) {
					return [];
				}

				// 这里放置对 AI 服务的异步调用；示例用本地模拟函数
				const suggestions = await simulateAiSuggestions(prefix, token);

				// 把字符串转成 CompletionItem
				return suggestions.map(s => {
					const item = new vscode.CompletionItem(s, vscode.CompletionItemKind.Snippet);
					item.detail = 'AI suggestion (simulated)';
					item.insertText = s;
					return item;
				});
			},
			// 可选的 resolve，用于延迟获取更多信息
			resolveCompletionItem(item: vscode.CompletionItem, token: vscode.CancellationToken) {
				item.documentation = new vscode.MarkdownString('Resolved by simulated AI');
				return item;
			}
		},
		'.' // 触发字符
	);

第二步：模拟AI大模型处理请求

这里我们通过模拟向AI大模型发送请求，来实现代码补全，

可以看到，我们接收参数 prefix(用户输入的代码),来进行一个匹配，最后提出建议代码

	function simulateAiSuggestions(prefix: string, token: vscode.CancellationToken): Promise<string[]> {

        console.log(prefix,'prefix');//打印获取的关键字

		return new Promise((resolve) => {
			// 快速模拟延迟	
			const t = setTimeout(() => {
				const base = ['console.log("123123")', 'console.error("error")'];
				const filtered = prefix ? base.filter(s => s.includes(prefix) || s.startsWith(prefix)) : base;
				resolve(filtered);
			}, 120);

			// 响应取消
			if (token) {
				token.onCancellationRequested(() => {
					clearTimeout(t);
					resolve([]);
				});
			}
		});
	}

还有很重要的一步，将你的函数加入到上下文中，这一段代码的作用是：

• 当扩展激活时，aiCompletionProvider 会正常工作（提供补全服务）。
• 当扩展被停用（如用户禁用扩展、关闭 VS Code）时，VS Code 会自动调用 aiCompletionProvider 的 dispose() 方法，取消其与编辑器的关联，释放相关资源（避免内存泄漏或无效监听）。

	context.subscriptions.push(aiCompletionProvider);

这样，我们通过模拟就实现了，简单的代码提示功能

效果如图：我们输入内容时，触发模拟搜索，经过处理获得AI建议的代码，这个样式是可以调整的，但是代码篇幅会太长，这里就不调整了

控制台也输出了  我们 获取的用户的输入

这个小例子，帮助我们学习了 vscode的Api  以及  代码补全的大概思路