保姆级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。