如何开发一个 VSCode 扩展

2025-10-24 54 阅读1分钟

背景：

用了各种扩展，想定制，如何开发呢？

文档

code.visualstudio.com/api/get-sta…

步骤 1：

首先需要使用 vscode 最新版本，不是最新，自己更新

步骤 2:

yo code

步骤 3:

点击 src/extension.ts
修改弹窗代码

const disposable = vscode.commands.registerCommand('haoflow.helloWorld', () => {
    // The code you place here will be executed every time your command is executed
    // Display a message box to the user
    vscode.window.showInformationMessage('Hello vscode 123');
});

编译代码

pnpm run watch //compile and watch for rebuilding

F5 启动调试，会打开新窗口
CMD+SHIFT+P: Reload windows
CMD+SHIFT+P: Hello World

注意，命令必须在 package 中也声明，与代码保持一致。package中的命令，可以让 CMD+SHIFT+P 搜索到

在各类基于 VS Code 的IDE 安装插件

npm install -g @vscode/vsce // 首次

cd HaoFlow
vsce package // 产出 hao-flow-0.0.1.vsix
code --install-extension hao-flow-0.0.1.vsix
# cursor --install-extension hao-flow-0.0.1.vsix
# qoder --install-extension hao-flow-0.0.1.vsix
# trae --install-extension hao-flow-0.0.1.vsix
# flick --install-extension hao-flow-0.0.1.vsix

效果如图