VSCode 深度集成 ChatGPT：提升开发效率的实战解决方案

7次阅读

没有评论

共计 2624 个字符，预计需要花费 7 分钟才能阅读完成。

现代开发者在日常编码中经常面临这样的困扰：

需要频繁切换窗口查阅文档或搜索解决方案，打断编码思路
遇到复杂问题时往往需要花费大量时间在 Stack Overflow 等平台寻找答案
代码调试过程耗时且低效，特别是面对不熟悉的框架或语言时

这些问题严重影响了开发效率和体验。幸运的是，通过将 ChatGPT 集成到 VSCode 中，我们可以直接在编辑器内获得智能编码辅助，无需频繁切换工具。

在考虑 AI 辅助编码方案时，我们主要评估了以下几种选项：

OpenAI API
优势：响应质量高、支持长上下文、功能全面
劣势：API 调用有成本、响应时间受服务器负载影响
GitHub Copilot
优势：开箱即用、与 VSCode 深度集成
劣势：定制性较差、无法针对特定业务场景优化
自建模型
优势：数据完全可控、可针对特定领域优化
劣势：训练和维护成本高、效果难以达到商用水平

综合考虑开发效率、效果质量和实现成本，我们选择了 OpenAI API 作为基础解决方案。

确保已安装以下工具：

VSCode 最新版本
Node.js (建议 16.x 或以上)
OpenAI 账号并获取 API 密钥

安装 Yeoman 和 VSCode 扩展生成器
```
npm install -g yo generator-code
```
生成扩展项目骨架
```
yo code
```
选择 ”New Extension” 选项并按提示完成设置

在项目中添加 openai 依赖：

npm install openai

创建核心服务类：

// src/openaiService.js
const {Configuration, OpenAIApi} = require('openai');

class OpenAIService {constructor(apiKey) {
    const configuration = new Configuration({apiKey: apiKey});
    this.openai = new OpenAIApi(configuration);
  }

  async getCompletion(prompt, model = 'gpt-3.5-turbo') {
    try {
      const response = await this.openai.createChatCompletion({
        model: model,
        messages: [{role: 'user', content: prompt}],
        temperature: 0.7,
      });
      return response.data.choices[0].message.content;
    } catch (error) {console.error('OpenAI API Error:', error);
      return null;
    }
  }
}

module.exports = OpenAIService;

在 extension.js 中添加命令处理逻辑：

// extension.js
const vscode = require('vscode');
const OpenAIService = require('./openaiService');

let openaiService;

function activate(context) {
  // 初始化 OpenAI 服务
  const config = vscode.workspace.getConfiguration('vscode-chatgpt');
  const apiKey = config.get('apiKey');

  if (!apiKey) {vscode.window.showErrorMessage('Please set your OpenAI API key in settings');
    return;
  }

  openaiService = new OpenAIService(apiKey);

  // 注册代码补全命令
  context.subscriptions.push(vscode.commands.registerCommand('extension.codeCompletion', async () => {
      const editor = vscode.window.activeTextEditor;
      if (!editor) return;

      const selection = editor.selection;
      const selectedText = editor.document.getText(selection);

      const prompt = `Improve the following code:\n\n${selectedText}`;
      const response = await openaiService.getCompletion(prompt);

      if (response) {
        editor.edit(editBuilder => {editBuilder.replace(selection, response);
        });
      }
    })
  );
}

在 package.json 中配置命令和菜单项：

{
  "contributes": {
    "commands": [
      {
        "command": "extension.codeCompletion",
        "title": "Get Code Completion"
      }
    ],
    "menus": {
      "editor/context": [
        {
          "command": "extension.codeCompletion",
          "group": "navigation",
          "when": "editorHasSelection"
        }
      ]
    }
  }
}