VS Code插件开发初步

2023-12-26 08:38:08

上手

欲善其事必先利其器,无论做什么开发,第一步肯定是下载工具链。VS Code开发主要用到两个东西,一个是项目的手脚架工具Yeoman,可通过yo来安装;另一个是VS Code的扩展时生成器generator-code,本文使用npm安装。

npm install -g yo generator-code

安装完成后,执行yo code指令,并根据提示,按部就班地生成项目,本文用的是js。

>yo code

其最后一个指令是,是否用VS Code打开项目,进入VS Code,点进左侧的运行和调试选项卡(快捷键Ctrl+Shift+D),然后点击侧栏的Run Extension的绿色三角号,这时会弹出一个新的VS Code,在这个新的VS Code中按下F1,输入命令Hello World,从而右下角就会弹出Hello World弹窗,这就是自动创建项目的默认功能。

在这里插入图片描述

此外,开启项目的VS Code,还会在控制台输出

Congratulations, your extension "firstcode" is now active!

入口函数

在脚手架生成的代码中,有三个文件值得注意,分别是

  • extension.js
  • package.json

前者毫无疑问实现了Hello World代码,而后者貌似更加关键,因其包含了一个键值对

"main": "./extension.js"

正是这个键值对,表明extension.js文件是main文件,包含了插件的入口函数。

接下来进入这个js文件,来仔细研读一下这寥寥数行的代码。

const vscode = require('vscode');

function activate(context) {
	console.log('Congratulations, your extension "firstcode" is now active!');

	let disposable = vscode.commands.registerCommand('firstcode.helloWorld', function () {
		vscode.window.showInformationMessage('Hello World from firstCode!');
	});

	context.subscriptions.push(disposable);
}

function deactivate() {}

module.exports = {
	activate,
	deactivate
}

结合弹出窗口的蛛丝马迹,可以基本确定此文件的功能,其中registerCommand用于注册命令,这个命令的名称是firstcode.helloworld,在调用此命令之后,则通过showInformationMessage,在左下角弹出一个对话框。最后,通过exports将activve函数暴露除去,从而可被调用。

contributes

从实际的使用经验来说,我们在指令输入框中输入的是hello world,而非firstcode.helloworld,为此,只需继续关注package.json,就会发现contributes键下同时出现了二者,

"contributes": {
  "commands": [{
    "command": "firstcode.helloWorld",
    "title": "Hello World"
  }]
},

由此,我们可以大胆猜测,package.json将Hello World暴露给我们,从而当我们在命令输入框中输入Hello World时,就会调用firstcode.helloWorld,进而触发extension.js中定义的函数,实现右下角的弹窗。

实际上,contributes中可供使用的功能不止于此,列表如下,这里面有些东西我也不知道是干嘛的,但仅就已经有了说明的条目而言,均能与日常操作相联系。

说明
breakpoints断点
colors主题颜色
commands命令
configuration配置
configurationDefaults默认的特定于语言的编辑器配置
customEditors自定义编辑器
debuggers调试
grammars
iconThemes
jsonValidation自定义JSON校验
keybindings快捷键绑定
languages新语言支持
menus菜单
problemMatchers
problemPatterns
productIconThemes
resourceLabelFormatters
snippets代码片段
submenus
taskDefinitions
themes颜色主题
typescriptServerPlugins
views左侧边栏
viewsContainers自定义activitybar
viewsWelcome
walkthroughs

文章来源:https://blog.csdn.net/m0_37816922/article/details/135006263
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。