环境准备与依赖安装

确保已安装最新版 VSCode(≥1.85)和 Node.js(≥18.x)。通过终端执行以下命令安装必要依赖:

npm install @vscode/vsce @vscode/extension-telemetry axios

创建自定义扩展骨架

使用 Yeoman 生成器初始化扩展项目:

npx -p yo -p generator-code yo code

选择 New Extension (TypeScript) 模板,在生成的 package.json 中添加以下配置:

"activationEvents": ["onCommand:extension.invokeGLM"],
"contributes": {
  "commands": [{
    "command": "extension.invokeGLM",
    "title": "Invoke GLM-4.6"
  }]
}

核心代理模块开发

src/extension.ts 中实现 GLM-4.6 的 API 调用模块:

import * as vscode from 'vscode';
import axios from 'axios';

const GLM_API_ENDPOINT = 'https://open.bigmodel.cn/api/paas/v3/model-api/chat/completions';

async function callGLM4(prompt: string, apiKey: string) {
  const response = await axios.post(GLM_API_ENDPOINT, {
    model: "GLM-4",
    messages: [{ role: "user", content: prompt }]
  }, {
    headers: { 'Authorization': `Bearer ${apiKey}` }
  });
  return response.data.choices[0].message.content;
}

上下文注入机制

修改 activate 函数实现编辑器集成:

export function activate(context: vscode.ExtensionContext) {
  const disposable = vscode.commands.registerCommand('extension.invokeGLM', async () => {
    const editor = vscode.window.activeTextEditor;
    if (!editor) return;

    const selection = editor.document.getText(editor.selection);
    const config = vscode.workspace.getConfiguration('glmCopilot');
    const apiKey = config.get<string>('apiKey') || '';

    const response = await callGLM4(selection, apiKey);
    editor.edit(editBuilder => {
      editBuilder.insert(editor.selection.end, `\n/* GLM-4.6 Suggestion:\n${response}\n*/\n`);
    });
  });

  context.subscriptions.push(disposable);
}

配置热更新系统

package.json 中添加配置项声明:

"configuration": {
  "title": "GLM Copilot",
  "properties": {
    "glmCopilot.apiKey": {
      "type": "string",
      "default": "",
      "description": "Zhipu AI API Key"
    },
    "glmCopilot.temperature": {
      "type": "number",
      "default": 0.7,
      "minimum": 0,
      "maximum": 1,
      "description": "Model creativity level"
    }
  }
}

调试与打包发布

使用 VSCode 内置调试器(F5)启动扩展开发主机。测试通过后执行打包命令:

vsce package --yarn

生成的 .vsix 文件可通过 Extensions: Install from VSIX 手动安装,或发布到私有市场。

高级优化技巧

为实现类 Copilot 的实时建议效果,需注册 InlineCompletionItemProvider

vscode.languages.registerInlineCompletionItemProvider({ scheme: 'file' }, {
  provideInlineCompletionItems: async (document, position) => {
    const textBeforeCursor = document.getText(new vscode.Range(
      new vscode.Position(0, 0),
      position
    ));
    
    const suggestion = await callGLM4(textBeforeCursor, apiKey);
    return [{
      insertText: suggestion,
      range: new vscode.Range(position, position)
    }];
  }
});

注意需要处理速率限制和上下文截断问题,建议实现本地缓存机制和代码分块算法。

Logo

火山引擎开发者社区是火山引擎打造的AI技术生态平台,聚焦Agent与大模型开发,提供豆包系列模型(图像/视频/视觉)、智能分析与会话工具,并配套评测集、动手实验室及行业案例库。社区通过技术沙龙、挑战赛等活动促进开发者成长,新用户可领50万Tokens权益,助力构建智能应用。

更多推荐