用 GPT-4 创建 VSCode 插件，我遇到的六个问题！

让 GPT-4 从头开发一个扩展，会有什么情况发生？它的代码真的可以安装、编译、运行吗？一位开发者 KEVIN LIN 进行了一次测试。

原文链接：https://bit.kevinslin.com/p/leveraging-gpt-4-to-automate-the

声明：本文为 CSDN 翻译，未经允许，禁止转载。

作者 | KEVIN LIN

编译 | ChatGPT   责编 | 苏宓

出品 | CSDN（ID：CSDNnews）

最近，我一直在尝试使用语言模型（LLM）来编写代码。我发现它们非常擅长生成小而完整的代码片段。不幸的是，如果需要生成更多的代码，就需要人类评估 LLM 的输出，并提供适当的后续提示，进行优化，之后才可以使用。

目前，大部分“GPT 写了 X”的案例都是如此——人类充当 LLM 的 REPL（Read-Eval-Print Loop，读取-求值-输出循环），仔细引导大模型产生功能性的结果。这并不是贬低这个过程的意思——它的可行性实则令人惊叹。但我们能否进一步呢？我们能否使用 LLM 一次性生成复杂程序的所有代码，而无需任何人类介入呢？

编写一个 VSCode 扩展

为了测试 GPT-4 生成复杂程序的能力，我让它创建一个 VSCode 扩展，允许用户能够调整选定的 Markdown 文本的标题级别。这个任务需要：

• 针对如何搭建和将程序公开给 VSCode 的领域特定知识

• 混合使用多种语言和平台：VSCode 扩展是使用 TypeScript 编写的，需要编写TypeScript、Node.js 和 VSCode 的配置

• 生成多个文件

• 生成用于调试、构建和运行代码的脚手架

设置

在这个实验中，我使用 GPT-4 进行所有的生成任务。我发现 GPT-4 在当今的模型中效果最好。

此外，我使用了开源的 smol-ai 框架（https://github.com/smol-ai/developer）来生成代码。

smol-ai 在 README 中的描述如下：

这是一个“初级开发人员”代理（也称为 smol dev）的原型，一旦你给它一个产品规范，它就能为你搭建整个代码库，但它并不会过度承诺通用人工智能（AGI）。与创建特定、固定、一次性的启动器（如 create-react-app 或 create-nextjs-app）不同，这基本上是一个创建任何应用的框架，你可以与 smol dev 紧密循环开发。

我喜欢 smol-ai 的简洁性。整个代码生成逻辑都在一个包含三个主要函数的单个 Python 文件中：

1. 生成执行提示所需的文件列表（例如 package.json、index.js 等）。

2. 生成执行提示所需的共享依赖列表（例如 axios、react 等）。

3. 对于生成的文件列表中的每个文件，生成应该放入文件中的代码，如果适用的话，使用共享依赖。

需要注意的是，smol-ai 还提供其他功能，比如能够调试错误和根据当前代码库生成提示。这些在本文中没有展开来讲。

Prompt

我先基于给出一段提示语，来描述我的问题：

python main_no_modal.py "a vscode extension that lets the user adjust the heading level of the selected text. it should have three commands: increase heading level, decrease heading level, and set heading level"

请注意，这个提示是简短且概述问题有些笼统。我想看看 GPT 在没有输入任何额外的细节或超出训练集中特定领域知识的情况下，能做得多好。

输出

系统花费几分钟生成代码后，smol-ai 创建了以下文件：

.
├── extension
│   ├── package.json
│   ├── src
│   │   ├── commands
│   │   │   ├── decreaseHeadingLevel.ts
│   │   │   ├── increaseHeadingLevel.ts
│   │   │   └── setHeadingLevel.ts
│   │   └── extension.ts
└── shared_dependencies.md

请注意，shared_dependencies.md 的创建是作为对共同依赖的最佳猜测。在我们的例子中，它创建了一个文件，内容如下：

the app is: a vscode extension that lets the user adjust the heading level of the selected text. it should have three commands: increase heading level, decrease heading level, and set heading level
 
the files we have decided to generate are: tsconfig.json, package.json, utils.ts, extension.ts
 
Shared dependencies:
 
1. Exported variables:
   - adjustHeadingLevel (from utils.ts)
 
2. Data schemas:
   - None
 
3. ID names of DOM elements:
   - None
 
4. Message names:
   - None
 
5. Function names:
   - increaseHeadingLevel
   - decreaseHeadingLevel
   - setHeadingLevel
 
6. Dependencies:
    - None

代码

extension.ts 是开发一个 VSCode 扩展的入口点。在这份文件中，我们定义了指定的三个命令。

import * as vscode from 'vscode';
import { increaseHeadingLevel } from './commands/increaseHeadingLevel';
import { decreaseHeadingLevel } from './commands/decreaseHeadingLevel';
import { setHeadingLevel } from './commands/setHeadingLevel';
 
export function activate(context: vscode.ExtensionContext) {
    context.subscriptions.push(
        vscode.commands.registerCommand('extension.increaseHeadingLevel', increaseHeadingLevel),
        vscode.commands.registerCommand('extension.decreaseHeadingLevel', decreaseHeadingLevel),
        vscode.commands.registerCommand('extension.setHeadingLevel', setHeadingLevel)
    );
}
 
export function deactivate() {}

下面是 decreaseHeadingLevel.ts 中的逻辑：

import * as vscode from 'vscode';
 
export async function decreaseHeadingLevel() {
    const editor = vscode.window.activeTextEditor;
    if (!editor) {
        return;
    }
 
    const document = editor.document;
    const selection = editor.selection;
    const selectedText = document.getText(selection);
 
    const headingRegex = /^(#+)\s(.*)$/;
    const match = selectedText.match(headingRegex);
 
    if (!match) {
        vscode.window.showErrorMessage('Invalid selection. Please select a heading to decrease its level.');
        return;
    }
 
    const currentLevel = match[1].length;
    if (currentLevel === 1) {
        vscode.window.showErrorMessage('Cannot decrease heading level. Already at the lowest level.');
        return;
    }
 
    const newLevel = currentLevel - 1;
    const newHeading = '#'.repeat(newLevel) + ' ' + match[2];
 
    await editor.edit((editBuilder) => {
        editBuilder.replace(selection, newHeading);
    });
}

这段代码检查一个活动的编辑器，如果存在的话，就会获取选定的文本并通过正则表达式寻找一个 markdown 标题。如果找到一个标题，并且当前的标题级别还没有达到最低级别，它就会降低标题级别。

乍一看，这个逻辑没有什么不妥。它执行命令并检查边缘情况。它甚至提供了有用的错误信息，这已经使它领先于大多数人工生成的程序......

测试扩展

为了测试这个扩展，我们需要成功执行以下步骤：

1. 安装依赖项

2. 编译代码

3. 运行扩展

第一步：安装

我们在尝试安装依赖项时遇到了第一个问题：

$ yarn
 
Couldn't find any versions for "vscode-test" that matches "^1.6.2"
? Please choose a version of "vscode-test" from this list: (Use arrow keys)
❯ 1.6.1

问题 1--找不到 vscode-test

检查 package.json 的结果如下：

{
  "name": "adjust-heading-level",
  ...
  "engines": {
    "vscode": "^1.62.0"
  },
  "devDependencies": {
    "@types/node": "^14.17.0",
    "@types/vscode": "^1.62.0",
    "typescript": "^4.4.2",
    "vscode": "^1.1.37",
    "vscode-test": "^1.6.2"
  },
}

vscode 引擎决定了 vscode 的最低版本。现在的（截至 2023-05-23）引擎版本是 1.78。1.62.0 版本是在 2021 年 10 月 21 日发布的。

这与 GPT-4 的知识截止日期相吻合：

GPT-4 通常缺乏对其绝大部分数据截止日期（2021年9月）之后发生的事件的知识。

1.6.2 的 vscode-test 版本与 1.62 在数字上相差了一个点，这表明 GPT 很可能对这些数字产生了幻觉，出现了错误。

在任何情况下，这很容易解决，只要指定正确的版本号，并重新安装，就可以修复：

-   "vscode-test": "^1.6.2"
+   "vscode-test": "^1.6.1"

所以，重新运行安装过程，第二次就成功了。

$ yarn
 
...
[3/5] 
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/40005
推荐阅读
article【Copilot】登录报错 Extension activation failed: “No aut...
当尝试在 Visual Studio Code 中登录 GitHub Copilot 插件时，会出现报错的情况，如下图所...
                
                    赞
踩
articleVScode 中 Python 代码不高亮显示怎么办？_vscode的python语法不高亮...
VScode 中 Python 代码不高亮显示怎么办？_vscode的python语法不高亮vscode的python语...
                
                    赞
踩
article【实战】手把手教你在 vscode 中写 markdown_vscode使用markdown...
默认文件会保存到与 md 文件同级目录下，并以相对路径方式引用。就可以把图片粘贴到Markdown文档里了。我按自己习惯...
                
                    赞
踩
articleChatgpt团队研发的idea、vscode免费无需外网的AI插件Bito 保姆级安装教程_bit...
程序员福音 - Chatgpt团队研发的idea、vscode免费无需外网的AI插件Bito 保姆级教程_bito vs...
                
                    赞
踩
articleVsCode SSH远程连接服务器【内网穿透公网连接】_vscode内网穿透...
VsCode SSH远程连接服务器，有点东西。。。_vscode内网穿透vscode内网穿透              ...
                
                    赞
踩
article在 VsCode 上编写和调试 C 语言程序_vscode调试c语言...
萌新向教程_vscode调试c语言vscode调试c语言                             准备材...
                
                    赞
踩
相关标签
copilot
vscode
ide
VScode
高亮
代码
Python
Pylance
github
chatgpt
intellij-idea
服务器
ssh
c语言
c#
c++
visual studio code