vs code ruby插件 vscode 插件开发教程

转载

ganmaobuhaowan 2024-01-30 12:08:45

文章标签 vs code ruby插件 visual studio code javascript node.js json 文章分类 Ruby 后端开发

VS Code插件开发-全部流程介绍（二）

目录
项目结构 package.json解读
extension.js解读
相关资料

项目结构

通过脚手架生成的项目，其结构非常简单，如下图：

vs code ruby插件 vscode 插件开发教程_visual studio code

其中在开发过程中，用到的主要包括三部分：

清单文件package.json：里面记录了项目的基本信息、自定义命令、菜单和依赖模块等信息。
入口文件extension.js：项目运行时，最先执行的是这个文件的代码。类似C/C++语言中包含main函数的源文件。
源文件：这里的src文件夹是笔者自己创建的，准备用来存放后续加入的源文件。此处没有要求，可以自定义其他目录，只要访问源文件时路径对应上就行了。

package.json解读

package.json的内容如下图：

vs code ruby插件 vscode 插件开发教程_vs code ruby插件_02

这是最简洁的package.json，结构很清晰，最开始的部分内容就是创建项目时设置的插件名等信息。其中，需要注意的有以下几部分：

engines：表明要运行该插件，VS Code版本的最低要求。笔者这里表示的是版本要大于1.41.0。如果后面出现插件运行不了或报错的情况，就可能是版本过低的原因。
activationEvents：激活事件，可同时包括多种事件，规定插件在什么情况下被激活使用。有以下9事件类型：

onLanguage:${language}
每当打开为某种语言的文件时，都会触发激活事件，例如”onLanguage:python“。
onCommand:${command}
每当调用命令时，都会触发激活事件，例如”omCommand:extension.helloWorld“。
onDebug
调试时触发激活事件，并且在启动调试会话之前激活插件。
workspaceContains:${glob schema file}
每当打开一个文件夹并且该文件夹包含至少一个与glob模式匹配的文件时，就会触发激活事件，例如”workspaceContains:**/.editorconfig“。
onFileSystem:${scheme}
每当读取特定scheme中的文件或文件夹时，都会触发激活事件，例如”onFileSystem:sftp“。通常是file-scheme，但对于自定义文件系统提供程序，可以使用更多方案，如ftp或ssh。
onView:${viewID}
每当在VS Code侧边栏中展开指定ID视图时（如：源码控制视图、扩展控制视图），就会触发激活事件，例如”onView:test“，test是笔者自定义的侧边栏选项ID，后续文章会介绍到。
onUri
每当打开该插件（扩展程序）的系统范围的Uri时，都会触发激活事件。Uri方案固定为vscode或vscode-insiders。官网里面给了说明例子，可通过相关资料进入查看。
onWebviewPanel:${viewType}
当VS Code需要使用viewType还原Web视图时，将触发激活事件，例如”onWebviewPanel:testView“，testView是笔者自定义的Web viewType，或许文章会介绍到。该viewType是在调用window.createWebviewPanel时设置的。这里需要另一个激活事件（如：onCommand）来初次激活插件并创建webView。
*
VS Code启动时，立即触发激活事件。仅在没有其他激活事件组合时使用该事件。
=>更多关于激活事件的内容，可以参考相关资料。

main：插件入口，用来指定插件启动时，最先执行的文件，默认为”./extension.js“，也就是上面提到的入口文件。
contributes：贡献点，用来配置各种自定义的数据。如：命令、菜单、侧边栏和快捷键绑定等。contributes有以下可配置项目：

configuration：配置
configurationDefaults：默认配置
commands：命令
menus：菜单
keybindings：快捷键绑定
languages：新语言支持
debuggers：调试器
breakpoints：断点
grammars：语法，和languages可配合使用
themes：主题
snippets：代码片段，和languages可配合使用
jsonValidation：json验证
views：视图，可理解为侧边栏内容
viewsContainers：视图容器，可理解为侧边栏选项
problemMatchers：问题匹配器
problemPatterns：问题模式，可用于问题匹配器的命名问题模式
taskDefinitions：任务定义
colors：颜色
typescriptServerPlugins：TypeScript服务器插件
resourceLabelFormatters：资源标签格式化
=>有关这一块的内容和细节较多，需要花时间去一一验证，后面笔者会尽量使用并进行详解。更多关于contributes的内容可以参考相关资料。

devDependencies：开发依赖，用来配置模块依赖列表，key是模块名，value是版本号。

笔者根据自己的经验，总结了一份比较详细package.json(含注释)免费下载，里面的内容已经验证过。

extension.js解读

以下是最简洁的extension.js代码，注释很清晰，这里不再赘述。

const vscode = require('vscode');
/**
 * 插件的激活事件被触发时，执行该函数
 * @param {vscode.ExtensionContext} context =>插件上下文
 */
function activate(context) {

	console.log('Congratulations, your extension "qianye-demo" is now active!');

	// 注册extension.helloworld命令，这里和package.json里面的commands需要对应上
	let disposable = vscode.commands.registerCommand('extension.helloWorld', function () {
		// command被调用时，执行的代码片段
		vscode.window.showInformationMessage('Hello World!');
	});

	context.subscriptions.push(disposable);
}
exports.activate = activate;

// 插件停用时，执行该函数
function deactivate() {
	console.log('your extension "qianye-demo" is deactivated.');
}

module.exports = {
	activate,
	deactivate
}