vscode插件开发（一） - 入手Hello World

想入手开发vscode插件，官网文档全英文且繁琐复杂，会觉得无从下手？
今天我们就从最简单友好的Hello World示例插件入手，一起来看看vscode插件如何开发调试的
然后我会在实践后稍微说明vscode加载插件的原理，以及最核心的一些配置项

环境准备

需要安装nodejs（最好版本>=16）

vscode示例插件github仓库地址
https://github.com/microsoft/vscode-extension-samples

# clone一份示例插件代码到本地
git clone https://github.com/microsoft/vscode-extension-samples.git
# cd到helloworld-sample实例工程中
cd vscode-extension-samples\helloworld-sample

调试

建议用vscode打开该工程
然后我们在vscode中打开一个终端，输入npm install命令安装依赖

完成后我们先打开src/extension.ts文件，这就是插件加载的入口文件了，里面有一个activate方法，这个就是插件加载的入口方法

然后我们直接点击Debug面板，然后点击"Run Extension"旁边的绿色按钮就可以直接调试了

这个时候你会发现弹出一个新的vscode窗口，标题中带有[Extension Development Host]，另外你会发现我们调试插件的窗口中并没有进入断点，先不要着急！

这个时候我们在[Extension Development Host]的窗口中按F1（或者ctrl+alt+p）打开命令面板，输入hello world，然后回车，就可以看到断点命中了


我们按F5 Continue，然后你就能看到效果，窗口右下角弹出了hello world的弹窗

知识解析

vscode加载插件，其实就是一个正在运行的nodejs进程（vscode的插件进程），去调用插件配置中指定的入口文件中的activate方法，然后逐一执行方法中的代码，这一过程插件可以调用相关接口注册命令（例如上面的hello world），之后用户就可以使用命令，来使用插件的相关功能了。

我们上面extension.ts是加载插件的入口文件，这个并不准确，准确而言是定义在项目根目录package.json文件main字段中的js文件（因为示例插件工程是typescript语言编写的，需要编译为js后才能运行，所以你会发现编译后工程中多了out目录，那个是实际被执行的代码文件）

然后入口文件中，必须实现activate方法，因为之后vscode插件进程激活插件时候，一定是调用插件的activate方法

另外提一下为什么我们点击调试后，为什么没有直接运行activate方法进入断点呢？你可以看到package.json中有一个activationEvent方法， 这个方法说明了插件什么时候被激活（因为并不是所有场景下都要去激活插件，会消耗资源），然后你可以看到示例插件中激活的条件是onCommand:extension.helloWorld也就是我们运行命令的时候，才去激活