初识vscode插件开发(一)-工程搭建、命令运行及调试

开发环境：nodejs和vscode；先确保安装了nodejs环境和vscode编辑器；编辑器用其他也可以

也是第一次尝试；中间肯定会有坑，所以就记录下；

1 全局安装官方脚手架

打开命令终端，执行 npm install -g yo generator-code；等待几分钟

npm install -g yo generator-code

2 配置工程

新建工程目录，在目录打开命令终端，执行 yo code；如下

设置参数如下:

 稍等片刻，我们的工程就初始化完成了

 工程目录如下:

 以上工程目录文件的具体含义和package.json内部配置项后面会解释下；现在咱优先跑起来一个程序呗；

 3 编译运行

3.1 运行工程

        按F5编译运行；正常的话，会新弹出一个vsc窗口，即扩展宿主环境；这里遇到第一个坑；如下所示，一直处于"正在生成"，并没有弹出宿主环境窗口；

 经过排查，上述问题因为vsc版本过低导致，更新到最新版本即可解决；然后按F5，新弹出一个宿主环境窗口

 3.2 调用扩展

ctrl+shift+p 输入helloworld，进行测试；右下角出现插件弹窗算是成功了

 4 调试扩展

如下所示，在20行打个断点；然后运行F5

如下所示，会在断点处定下，这样便于我们调试变量 ；如下的错误暂且不管；

 如下所示，也可在调试控制台中输入变量，查看变量值

5 自定义命令

5.1 如下代码所示，添加一个命令

	
	context.subscriptions.push(
		vscode.commands.registerCommand("GeoJsonViewer.askQuestion",  () => { 
			vscode.window.showInformationMessage("How was your day ?", "good", "bad")	
		})
	)

registerCommand方法用来注册一个命令；

showInformationMessage方法是显示弹窗；

subscriptions将注册的命令添加到订阅数组；每个命令都必须添加到订阅订阅器中

5.2 配置package.json

需要配置两个地方:如下

activationEvents配置命令在vscode启动的时候激活；

contributes配置名称和命令，就是我们在ctrl+shift+p后展示在列表中的信息

F5运行看下效果：

在新窗口中ctrl+shift+p，然后选择我们新创建的命令

 右下角会弹出信息

 5.3 修改一下上面添加的命令

showInformationMessage方法返回值其实是promise对象，所以我们可以用await 关键词来接受返回结果；

 拿到结果后，我们可以做一些条件判断之类的操作:

	context.subscriptions.push(
		vscode.commands.registerCommand("GeoJsonViewer.askQuestion", async () => {
			let answer = await vscode.window.showInformationMessage("How was your day ?", "good", "bad",)
			if (answer === "bad") {
				vscode.window.showInformationMessage("sorry to hear it")
			} else {
				console.log({ answer })
			}
		})
	)

F5运行查看:

点击bad选项后，弹出如下信息