大模型VS Code插件开发:零基础跑通第一个自定义命令
想在 VS Code 里接入大模型能力,最直接的方式就是自己写一个插件。
这篇教程带你从零跑通一个大模型VS Code插件开发的最小闭环:环境装好、项目建好、命令能触发、调试能断点、打包能安装。
全程不需要你先懂插件架构,照着做即可。
先确认环境和适用前提
开始前你需要一台能正常联网的电脑,装上 VS Code 和 Node.js。
插件开发依赖 Node 环境,建议使用当前 LTS 版本,用下面命令确认:
node -v
npm -v
code -v
三个命令都能输出版本号即可。
如果 code 命令不存在,在 VS Code 里按 Ctrl+Shift+P,执行 Shell Command: Install 'code' command in PATH 即可。
本文的插件只做本地命令演示,不涉及真实大模型 API 调用,避免把密钥和网络问题混进来。
等你跑通流程后,再往命令里填自己的模型接口。
初始化插件项目
VS Code 官方推荐用 Yeoman 生成器创建扩展项目。
全局安装生成器:
npm install -g yo generator-code
然后在你想放代码的目录执行:
yo code
交互选项按下面选:
- 类型选择
New Extension (TypeScript) - 插件名称填
hello-llm - 标识符保持默认或填
hello-llm - 描述随便写一句
- 是否启用 Git 选
No即可 - 包管理器选
npm
生成完成后进入目录并安装依赖:
cd hello-llm
npm install
此时项目里最关键的两个文件是 package.json 和 src/extension.ts。
前者负责声明插件信息和命令,后者写具体逻辑。
注册命令并写激活逻辑
打开 package.json,找到 contributes.commands 字段,确认命令已经声明。
一个可用的最小配置类似这样:
"contributes": {
"commands": [
{
"command": "hello-llm.helloWorld",
"title": "Hello LLM"
}
]
}
command 是插件内部调用的唯一标识,title 是命令面板里显示的名字。
两者不要写混。
接着打开 src/extension.ts,把 activate 函数里的注册逻辑改成你自己的命令:
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
const disposable = vscode.commands.registerCommand('hello-llm.helloWorld', () => {
vscode.window.showInformationMessage('大模型插件命令已触发');
});
context.subscriptions.push(disposable);
}
export function deactivate() {}
这里的 registerCommand 第一个参数必须和 package.json 里的 command 完全一致,大小写和点号都不能错。
调试运行与效果验证
在 VS Code 里打开项目根目录,按 F5 启动扩展开发宿主窗口。
新窗口打开后,按 Ctrl+Shift+P 打开命令面板,输入 Hello LLM,回车执行。
如果右下角弹出“大模型插件命令已触发”,说明最小闭环已经跑通。
若命令面板里搜不到该命令,按以下顺序排查:
- 检查
package.json的contributes.commands是否在正确的 JSON 层级,逗号是否合法。 - 检查
src/extension.ts里注册的命令标识是否和声明完全一致。 - 查看调试窗口的“调试控制台”是否有 TypeScript 编译报错。
- 修改代码后需要重新按
F5,旧窗口不会自动加载新逻辑。
想验证打包安装,可安装 vsce 后执行打包:
npm install -g @vscode/vsce
vsce package
生成 .vsix 文件后,在 VS Code 扩展面板右上角选择“从 VSIX 安装”,选中该文件即可。
安装后命令应能正常出现。
容易踩的几个坑
命令标识不一致是最常见的失败原因,
声明和注册必须逐字对齐。忘记 context.subscriptions.push 会导致命令在插件停用后没有正确释放,
虽然小 demo 不明显,
但养成习惯更好。直接在旧窗口测试也是高频问题,
代码改动后一定要重新启动调试宿主。
另外,如果你后续要接入大模型 API,不要把密钥硬编码进 extension.ts。
更稳妥的做法是使用 VS Code 的配置项或系统环境变量读取,并注意插件在用户机器上运行时网络请求的权限和超时处理。
下一步可以扩展什么
跑通命令后,你可以把 showInformationMessage 换成读取当前选中文本、调用大模型接口、再把结果写回编辑器。
大模型VS Code插件开发的核心流程不变:声明命令、注册处理函数、处理输入输出、调试验证。
先把这条链路走稳,再逐步加功能,比一上来堆复杂逻辑更容易定位问题。