vscode插件篇:编写自己第一个vscode插件

193 阅读1分钟

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!。效果如下: image.png

image.png

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!');
});