开发 VS Code 插件可以让你扩展编辑器的功能,从简单的代码片段到复杂的语言支持都可以实现。
一、环境准备
-
安装工具
-
创建插件项目 运行
yo code
,选择插件类型(如New Extension (JavaScript)
或TypeScript
),填写项目信息(名称、描述、标识符等),生成基础项目结构。
二、核心项目结构
生成的项目包含以下关键文件:
bash
your-extension/
├── src/
│ └── extension.js # 插件入口逻辑
├── package.json # 插件配置(核心文件)
├── README.md # 插件说明
└── .vscode/ # 调试配置
- package.json:定义插件的激活事件、贡献点(命令、菜单等)、依赖等,是插件的「身份证」。
- extension.js :实现插件功能的代码,入口为
activate
函数(插件激活时执行)和deactivate
函数(插件销毁时执行)。
三、开发Hello World 功能
- 配置 package.json :在
contributes.commands
中注册命令,在activationEvents
中定义激活事件(如命令被调用时激活):
json
{
"activationEvents": ["onCommand:your-extension.helloWorld"],
"contributes": {
"commands": [
{
"command": "your-extension.helloWorld",
"title": "Hello World"
}
]
}
}
- 实现功能(extension.js) :在
activate
函数中注册命令的回调:
js
const vscode = require('vscode');
function activate(context) {
// 注册命令
let disposable = vscode.commands.registerCommand('your-extension.helloWorld', () => {
// 显示弹窗
vscode.window.showInformationMessage('Hello VS Code Extension!');
});
context.subscriptions.push(disposable);
}
function deactivate() {}
module.exports = { activate, deactivate };
四、调试插件
- 按
F5
启动「扩展开发宿主」窗口(一个新的 VS Code 窗口)。 - 在新窗口中按
Ctrl+Shift+P
(或Cmd+Shift+P
)打开命令面板,输入并运行Hello World
命令,即可看到弹窗。

五、核心概念
-
激活事件(Activation Events) 定义插件何时被激活(避免不必要的性能消耗),常见类型:
onCommand:命令名
:命令被调用时onStartupFinished
:VS Code 启动完成后onLanguage:语言名
:打开特定语言文件时(如onLanguage:javascript
)
-
贡献点(Contribution Points) 定义插件对 VS Code 的扩展点,常见类型:
commands
:注册命令keybindings
:绑定快捷键menus
:添加右键菜单或顶部菜单snippets
:添加代码片段themes
:自定义主题
-
API 调用 VS Code 提供了丰富的 API,例如:
vscode.window
:操作窗口(弹窗、状态栏等)vscode.workspace
:操作工作区(文件、配置等)vscode.editor
:操作编辑器(文本编辑、选中内容等)
六、打包与发布
-
打包成 VSIX:安装打包工具:
bashnpm install -g @vscode/vsce
在项目根目录运行:
bashvsce package
生成
your-extension-x.x.x.vsix
文件,可手动安装到 VS Code。 -
发布到市场 注册 Azure DevOps 账号,获取个人访问令牌(PAT),然后通过
vsce publish
发布到 VS Code 市场。