【保姆级VSCode 插件开发之第一个插件项目调试】

保姆级VSCode 插件开发

第一章 VSCode 插件开发入门之第一个插件项目展示

---

---

前言

基于上一篇文章中创建的HelloWorld插件项目，本篇文章主要介绍VSCode插件开发代码编写，调试。并说明常见的问题和解决方法。

---

一、HelloWorld 插件项目代码展示

1.编写代码

1.1 项目目录结构：

项目文件目录如上图所示，具体文件的作用请参考创建的HelloWorld插件项目

在这里，我们只需要关心两个文件即可：extension.ts和package.json

1.2 src/extension.ts代码如下：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	console.log('Congratulations, your extension "helloworld" is now active!');
	let disposable = vscode.commands.registerCommand('helloworld.helloWorld', () => {
		vscode.window.showInformationMessage('Hello World from HelloWorld!');
	});
	context.subscriptions.push(disposable);
}

export function deactivate() {}

这里面有两个函数：active() 和deactive()，我们目前只需要关心active()函数，因为deactive()是在去激活插件的时候需要考虑调用的。

• active()函数：这是插件被激活的时候的入口函数即我们通过Ctrl + Shift + P输入插件命令时候的入口
• console.log是在调试命令的debug 终端打印输出的日志，对于errors (console.error)。只有第一次激活的时候打印一次，后面再输入命令，也不会重复打印。
• vscode.commands.registerCommand('helloworld.helloWorld')：是注册一个命令，必须与package.json文件（如下图所示）中”contributes"的command一致。这里是插件功能的实现，每次输入插件命令都会执行一次。这里的实现是右下角显示一条’Hello World from HelloWorld!'的消息。每次执行Hello World都会显示一次。

package.json文件如下图所示：

2. 编译调试：

这个时候我们的插件因为还没有安装，在代码编辑窗口的命令行是调取不到我们新创建的Hello World插件的。只能在调试窗口调取和调试。

2.1 开始调试

• 在 VSCode 中打开插件项目文件夹，启动调试模式（Run -> Start Debugging)，如下图。
  

• 将启动一个带有插件加载的 VSCode 开发者版实例的新窗口。我们通过Ctrl + Shift + P，就可以看到新注册的Hello World命令了。
  

• 执行命令就能再右下角看到消息输出了，如下图所示：
  

如果能够顺利走到这一步，显示出相应的消息，恭喜你，第一个插件项目就开发调试好了，可以进入下一个打包发布流程。没有问题是意外，有问题才是常态。针对常见问题，我们下篇文章将会详细介绍具体解决方法。

---

总结

今天的主要内容是VSCode插件开发中Hello World 插件程序的效果展示。如果一切顺利请浏览你的项目目录和代码，然后进行下面的小练习：

• 为命令面板中的Hello World换一个名字。
• 配置一个新的命令：打开一个提示弹窗，显示当前时间。
• 用显示警告信息的VS Code API替换原本的vscode.window.showInformationMessage。