概述
基于大模型的能力可以理解文本或代码的上下文,然后根据代码上下文实现代码注释、代码补全等功能,从而构建一个代码助手。
本文实现了一个简单的 VS Code 代码助手插件,通过该插件可以对代码进行补全。后台大模型服务是在本地 CPU 机器上搭建的,通过 Ollama 实现通过接口来访问大模型。
插件功能设计
插件实现的功能很简单:在 VS Code 中选择一段代码,然后发起一个命令(后续可优化为快捷键),根据代码上下文对代码进行补全。
设计考虑
设计分为两个层面:前端和后端服务。这个插件是一个简单的可用 Demo,包含两个端:一个前端,一个基于大模型的后端服务。 流程:前端 -> Ollama -> 大模型
环境准备
- 安装 Ollama:访问官网下载并安装 Ollama,启动服务。
- 拉取模型:使用命令行拉取模型,例如
ollama pull llama3.2。 - 开发环境:确保已安装 Node.js 和 TypeScript 环境。
- VS Code 扩展开发:安装 Yeoman Generator for VS Code 等工具。
前端开发
通过 TypeScript 开发 VS Code 插件。目前前端实现的功能非常简单:选择一段代码,然后发起 ask Ollama 的命令,此时就会把代码片段放到提示词模板中发送给后台大模型服务。并等待后台大模型的返回,然后使用返回的代码覆盖现有代码。
前端要实现的步骤和逻辑如下:
- 获取当前选择的代码片段;
- 根据获取到的代码片段,构建提示词请求;
- 发送补全代码的提示词请求;
- 获取大模型的返回代码;
- 覆盖现有代码。
根据目前实现的功能,还可以对功能进行继续扩展,比如实现:可以撤销返回的代码,获取光标所在的代码片段补全光标所在代码,基于代码实现智能聊天功能,等等。
代码实现
插件入口文件
import * as vscode from 'vscode';
import axios from 'axios';
export function activate(context: vscode.ExtensionContext) {
let disposable = vscode.commands.registerCommand('extension.askOllama', async () => {
const editor = vscode.window.activeTextEditor;
if (!editor) {
vscode.window.();
;
}
selection = editor.;
selectedText = editor..(selection);
(!selectedText) {
vscode..();
;
}
{
result = (selectedText);
.(, result);
vscode..();
editor.( {
editBuilder.(selection, result);
});
} (: ) {
vscode..();
}
});
context..(disposable);
}
() {}
(): <> {
url = ;
payload = {
: ,
: [
{
: ,
:
}
],
:
};
{
response = axios.(url, payload);
completion = response...;
(!completion) {
();
}
completion;
} (error) {
.(, error);
();
}
}


