强迫劳动！今天逼着豆包写了个VSCode插件

<< 返回目录

1 今天逼着豆包写了个VSCode插件

1.1 背景

  这几天在学习python，做练习时本来在用EverEdit写代码，且在EverEdit上已经做了插件，可以快速新建文件，但无奈EverEdit毕竟只是文本编辑器，语法提示并不能到很深，比如：函数的参数提示等。想了想还是觉得用VS Code去写代码会方便点，但大量做练习时，需要频繁的新建.py文件，VS Code中频繁的新建+保存也让人不胜其烦，所以，还是要在VS Code中搞个插件，节省我的精力。

插件要求：

1. 在当前打开的文件相同目录下创建文件
2. 新文件名以当前文件名为基础，并进行编号递增
3. 新建文件时弹出对话框，填入第2点提到的文件名做默认值
4. 用户如果不修改，直接回车，就按默认文件名新建
5. VS Code打开新创建的文件并切到前台，方便用户直接工作
6. 提供快捷键Ctrl + Shift + Alt + N来调用功能(为避免快捷键冲突，后面加了Shift)

1.2 下面是逼豆包干活的过程

1.2.1 提问

写一个VSCode的插件，按Ctrl+Alt+N后，在当前文件所在目录新建一个与当前文件类型相同的文件，且弹出输入框让用户输入新文件名(不带扩展名)，输入框中的默认值为：当前文件名基础上增加编号

1.2.2 豆包的输出

要在VSCode中创建这样一个插件，我们可以使用VSCode的扩展API，通过TypeScript来开发。下面是一个基本的实现思路和代码示例：

1. 初始化VSCode扩展项目。
2. 注册一个命令，该命令在用户按下Ctrl+Alt+N时触发。
3. 在命令执行时，获取当前文件的目录和文件类型。
4. 弹出输入框让用户输入新文件名（不带扩展名），并提供默认值。
5. 根据用户输入创建新文件。

首先，确保你已经安装了Node.js和VSCode，并且安装了VSCode的扩展开发工具Yeoman和vscode-generator-code：

npm install -g yo generator-code

然后，创建一个新的VSCode扩展项目：

yo code

按照提示选择New Extension (TypeScript)，并输入扩展名称等信息。

接下来，编辑src/extension.ts文件，代码如下：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    let disposable = vscode.commands.registerCommand('your-extension-name.createSimilarFile', async () => {
        const editor = vscode.window.activeTextEditor;
        if (!editor) {
            vscode.window.showErrorMessage('No active text editor');
            return;
        }

        const currentFilePath = editor.document.uri.fsPath;
        const currentDir = vscode.Uri.file(currentFilePath).fsPath.replace(/\/[^/]*$/, '');
        const currentFileName = editor.document.fileName;
        const fileExtension = currentFileName.split('.').pop();

        let newFileName = currentFileName.split('.')[0];
        let count = 1;
        while (true) {
            const newFilePath = `${currentDir}/${newFileName}${count}.${fileExtension}`;
            const fileExists = await vscode.workspace.fs.stat(vscode.Uri.file(newFilePath)).then(() => true, () => false);
            if (!fileExists) {
                break;
            }
            count++;
        }
        newFileName += count;

        const input = await vscode.window.showInputBox({
            value: newFileName,
            prompt: 'Enter new file name (without extension)'
        });

        if (!input) {
            return;
        }

        const newFilePath = `${currentDir}/${input}.${fileExtension}`;
        try {
            await vscode.workspace.fs.createFile(vscode.Uri.file(newFilePath));
            vscode.window.showInformationMessage(`File ${input}.${fileExtension} created successfully`);
        } catch (error) {
            vscode.window.showErrorMessage(`Error creating file: ${error}`);
        }
    });

    context.subscriptions.push(disposable);
}

export function deactivate() {}

在上述代码中：

• your-extension-name需要替换为你实际的扩展名称。
• createSimilarFile是命令的名称，可以根据需要修改。
• 代码获取当前活动编辑器的文件路径，提取目录和文件扩展名。
• 生成一个默认的新文件名，通过循环确保文件名不重复。
• 使用vscode.window.showInputBox弹出输入框让用户输入新文件名。
• 根据用户输入和文件扩展名创建新文件。

最后，在VSCode中按下F5进行调试，或者通过Ctrl+Shift+P打开命令面板，选择Extensions: Pack Extension打包扩展并发布。

1.2.3 继续提问(1)

上面生成的VSCode插件，没有看到在哪里设置快捷键关联

1.2.4 豆包输出

在之前生成的 VSCode 插件代码里，只定义了命令逻辑，还未设置快捷键关联。要设置快捷键关联，你需要在 package.json 文件里进行配置。

下面是详细步骤与示例代码：

1.2.4.1 步骤

1. 找到 package.json 文件：此文件位于 VSCode 扩展项目的根目录下。
2. 添加 contributes 部分：在 package.json 文件中，要保证有 contributes 字段，并且在该字段下添加 commands 和 keybindings 子字段。
3. 定义命令：在 commands 里定义你所创建的命令。
4. 设置快捷键：在 keybindings 中为命令设置快捷键。

1.2.4.2 示例代码

以下是修改后的 package.json 文件示例：

{
    "name": "your-extension-name",
    "displayName": "Your Extension Name",
    "description": "Create a similar file with a specified shortcut",
    "version": "0.0.1",
    "engines": {
        "vscode": "^1.60.0"
    },
    "categories": [
        "Other"
    ],
    "activationEvents": [
        "onCommand:your-extension-name.createSimilarFile"
    ],
    "main": "./out/extension.js",
    "contributes": {
        "commands": [
            {
                "command": "your-extension-name.createSimilarFile",
                "title": "Create Similar File"
            }
        ],
        "keybindings": [
            {
                "command": "your-extension-name.createSimilarFile",
                "key": "ctrl+alt+n",
                "mac": "cmd+alt+n",
                "when": "editorTextFocus"
            }
        ]
    },
    "scripts": {
        "vscode:prepublish": "npm run compile",
        "compile": "tsc -p ./",
        "watch": "tsc -watch -p ./",
        "pretest": "npm run compile && npm run lint",
        "lint": "eslint src --ext ts",
        "test": "node ./out/test/runTest.js"
    },
    "devDependencies": {
        "@types/vscode": "^1.60.0",
        "@types/glob": "^7.1.4",
        "@types/mocha": "^9.1.1",
        "@types/node": "14.x",
        "eslint": "^8.2.0",
        "@typescript-eslint/eslint-plugin": "^5.30.0",
        "@typescript-eslint/parser": "^5.30.0",
        "glob": "^7.2.0",
        "mocha": "^10.0.0",
        "typescript": "^4.7.4",
        "@vscode/test-electron": "^2.1.3"
    }
}

1.2.4.3 代码解释

• commands 部分：
  • command：这是命令的标识符，要和 src/extension.ts 里注册的命令名称保持一致。
  • title：此为命令在命令面板中显示的标题。
• keybindings 部分：
  • command：同样是命令的标识符，要和 commands 中的 command 一致。
  • key：这是 Windows 和 Linux 系统下的快捷键。
  • mac：这是 macOS 系统下的快捷键。
  • when：该条件表示在什么情况下快捷键才会生效，editorTextFocus 表示当编辑器处于聚焦状态时快捷键有效。

完成上述修改后，重新打包并加载扩展，按下 Ctrl + Alt + N（Windows/Linux）或者 Cmd + Alt + N（macOS）就能触发创建新文件的命令了。

1.2.5 继续提问(2)

如何打包

1.2.6 豆包输出

在开发 VSCode 插件后，你可以通过以下步骤对其进行打包：

1.2.6.1 安装 vsce 工具

vsce（Visual Studio Code Extensions）是官方提供的用于打包和发布 VSCode 扩展的命令行工具。你可以使用 npm（Node.js 包管理器）来安装它，打开终端并执行以下命令：

npm install -g vsce

上述命令中的 -g 表示全局安装，安装完成后，你就可以在任何目录下使用 vsce 命令。

1.2.6.2 检查项目配置

在打包之前，需要确保 package.json 文件中的配置正确。这个文件包含了插件的元数据，如名称、版本、描述等信息。重点检查以下字段：

• name：插件的名称，在 VSCode 市场中必须是唯一的。
• version：插件的版本号，遵循语义化版本规范（如 1.0.0）。每次发布新版本时，需要更新该版本号。
• publisher：发布者的名称，你需要在 VSCode 市场上注册一个发布者账号。

1.2.6.3 生成 .vsix 文件

在项目的根目录下（即包含 package.json 文件的目录），打开终端并执行以下命令：

vsce package

执行该命令后，vsce 会读取 package.json 文件中的配置信息，并将项目中的代码和资源打包成一个 .vsix 文件。打包过程中，vsce 会检查项目的依赖项、图标等配置是否正确，如果有问题会给出相应的错误提示。

1.2.6.4 验证打包结果

打包完成后，在项目根目录下会生成一个以 .vsix 为扩展名的文件，文件名通常为 {name}-{version}.vsix，其中 {name} 是 package.json 中定义的插件名称，{version} 是版本号。你可以将这个 .vsix 文件分发给其他人进行测试，或者在自己的 VSCode 中进行本地安装测试。

1.2.6.5 本地安装测试

如果你想在自己的 VSCode 中测试打包好的插件，可以按照以下步骤进行：

1. 打开 VSCode，点击左侧的扩展图标（四个方块组成的图标）。
2. 在扩展面板的右上角，点击三个点的菜单按钮，选择“从 VSIX 安装”。
3. 在弹出的文件选择对话框中，找到并选择刚才生成的 .vsix 文件，然后点击“打开”。
4. VSCode 会自动安装该插件，并在扩展列表中显示已安装的插件。

1.2.6.6 注意事项

• 依赖项处理：确保项目中的所有依赖项都正确配置在 package.json 的 dependencies 或 devDependencies 字段中。vsce 会根据这些配置来打包插件所需的依赖。
• 图标和资源：如果插件使用了图标或其他资源文件，确保这些文件的路径在 package.json 中正确配置，并且文件存在于项目中。
• 发布者信息：如果要将插件发布到 VSCode 市场，需要在 package.json 中配置正确的 publisher 信息，并且使用该发布者账号登录到 VSCode 市场。

通过以上步骤，你就可以成功打包一个 VSCode 插件，并进行本地测试了。如果需要将插件发布到 VSCode 市场，可以使用 vsce publish 命令。

1.2.7 其他工作

  后面的事主要是就调试和将错误发给豆包，豆包生成的代码并不完美，比如：在获取文件路径、文件名(无路径)等变量时，豆包生成的代码都是错的，给它指出来错误之后，生成的代码仍然还是错的，最后只能自己来写，所以，并不是有了AI，人就啥都不用做了。

1.3 总结

  作者并没有从0到1写过一个VS Code插件， 但在AI的加持下，生成一个从未涉足过的领域的作品也只花了不到两小时，并且功能完全达到了本人的预期！

1.4 附录

1.4.1 使用效果

1.4.2 插件下载地址(含源码)

NewSimilarFile(点击下载)

---

作者声明：本文用于记录和分享作者的学习心得，可能有部分文字或示例来自AI平台，如：豆包、DeepSeek(硅基流动)(注册链接)等，由于本人水平有限，难免存在表达错误，欢迎留言交流和指教！
Copyright © 2022~2025 All rights reserved.

<< 返回目录