如何开发一个vscode插件

「这是我参与2022首次更文挑战的第23天，活动详情查看：2022首次更文挑战」。

首先，你需要保证电脑上安装 node 和 git，然后通过 node 带的包管理工具 npm 安装 yeoman 和 generator-code，这俩工具。

 npm install -g yo generator-code

然后通过 yeoman 安装 vscode 插件模版项目，执行 yo code 后按要求填写内容即可。

用 vscode 运行了项目之后，按 f5 即可编译项目并打开加载这个插件的新的窗口，在这个新窗口就可以试验你写的功能了，非常方便。

默认的项目里注册了一个通知命令， commond+shift+p 输入 hello world, 就会展示 hello world 的通知。

如果你想改改代码，那么改完代码保存，然后执行 reload window 功能即可。调试非常的方便

可以看到这个功能是通过如下代码实现的

let disposable = vscode.commands.registerCommand('code-ui-extension.helloWorld', function () {
		// 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 World from code-ui-extension!');
	});

可以看到上面的代码主要做了以下几个事：

1. 首先注册个命令 hello world
2. 这个命令会执行以下内容，在 window 窗口里展示通知消息 Hello World from code-ui-extension!

需要注意的是，如果你想加个其它的命令，那么需要在packagejson文件里新增一下配置。比如这个命令就需要在contributes 的 commands 增加对应的 command 及 title。这样才能给这个命令分配一个 command id。

那么程序出问题如何 debug 呢，这个也非常容易，只需要在 vscode 对应的代码里打断点，那么执行到对应代码就会跳转到开发项目的断点上，非常方便！

开发 vscode 插件，有三个关键点需要特别注意：

1. activation events，就是你扩展生效时发生的事件
2. contributions points， 静态声明，写在 package.json 里，用来扩展可用的功能
3. vscode api，可调用的 api

你通过结合静态声明及 api，来实现你所需要的功能。