1、安装依赖
npm install -g yo generator-code
2、创建第一个vscode项目
yo code
# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? HelloWorld
### Press <Enter> to choose default for all options below ###
# ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? LEAVE BLANK
# ? Initialize a git repository? Yes
# ? Bundle the source code with webpack? No
# ? Which package manager to use? npm
# ? Do you want to open the new folder with Visual Studio Code? Open with `code`
3、调试项目
按F5打开调试窗口,并在调试窗口按ctrl+shift+P
打开命令输入框,输入package.json内配置的指令的title:hello world
,会在调试窗口底部弹出Hello World from Hello vscode!
。效果如下:
4、解析总结
上述操作中一共做了三件事:
1、在package.json中激活命令onCommand:helloworld.helloWorld
,因此当客户执行Hello World
命令时拓展才能被激活。
// 激活指令
"activationEvents": [
"onCommand:hello.helloworld"
]
2、在package.json中使用contributes.commands
配置Hello World
命令,使命令可以在命令面板中使用。
// 配置命令,使其可以在命令面版中显示
"contributes": {
"commands": [
{
"command": "hello.helloworld",
// title为命令面板中显示的命令全称
"title": "Hello world"
}
]
}
3、使用vscode API注册命令。
vscode.commands.registerCommand('hello.helloworld', () => {
vscode.window.showInformationMessage('Hello World from Hello vscode!');
});