HBuilderX 插件开发指南（二）：插件开发细节及代码演示-Toy模板网

这篇具有很好参考价值的文章主要介绍了HBuilderX 插件开发指南（二）：插件开发细节及代码演示。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

文章正在逐步完善中。。。。

我们在 HBuilderX 插件开发指南（一）中已经了解了插件从开发到发布的细节，本期文章重点将具体学习 插件开发需要注意的细节

项目结构

├── README.md  // 插件文档
├── changelog.md // 插件更新日志
├── extension.js // 插件入口文件
├── node_modules
├── package.json //  插件配置文件
└── src
    ├── html.js // 界面
    ├── main.js // 主要逻辑
    └── static // 依赖的静态资源

package.json (摘取官方文档)

所有的插件在根目录都要有一个package.json文件，该文件继承npm规范，并扩展了部分字段，以下列出各个字段的含义：

字段名称	类型	是否必须	描述
name	String	是	插件名称
displayName	String	是	用于展示在插件列表中的名称
version	String	是	插件版本号，检查升级时会用到
engines	Object	是	该Object的属性至少要包含HBuilderX，属性值为兼容的主版本号，如果HBuilderX的版本低于该版本，将会提示用户升级HBuilderX。例如:{“HBuilderX”:“^2.7.0”}。
description	String	是	简短的插件描述，不要超过30个字
main	String	否	插件代码入口文件，配置型插件可不填
activationEvents	Array	否	激活事件的列表，如为空，则表示该插件不会懒加载
contributes	Object	否	插件的配置扩展点
extensionDependencies	Array	否	该插件依赖的其他插件id

创建插件项目，默认会有activationEvents 字段，如果你开发的 使用度很高，个人建议不要懒加载机制，删除此字段即可。

package.json 示例

这是一个文章（一）中用到的一个简单示例，在 编辑器右键菜单 注册了一个 demo新命令，点击此选项将在窗口右下角弹窗一个消息通知框文章来源地址https://www.toymoban.com/news/detail-825763.html

// package.json

{
	"id": "ide-demo",
	"name": "ide-demo",
	"description": "针对HBuilderX 开发的demo",
	"displayName": "ide-demo",
	"version": "2.0.0",
	"publisher": "your name",
	"keywords":[
        "ide"
    ],
	"engines": {
		"HBuilderX": "^3.6.2"
	},
	"categories": [
		"Other"
	],
	"main": "./extension",
	"activationEvents": [
		"onCommand:extension.helloWorld"
	],
	"contributes": {
		"commands": [{
			"command": "extension.helloWorld",
			"title": "demo新命令"
		}],
		"menus": {
			"editor/context": [{
					"command": "extension.helloWorld",
					"group": "z_commands",
					"when": "editorTextFocus"
				},
				{
					"group": "z_commands"
				}
			]
		}
	},
	"extensionDependencies": [
		"plugin-manager"
	],
	"dependencies": {}
}

配置扩展点 contributes

{
	....
	
	"main": "./extension",
	"contributes": {
		"commands": [{
			"command": "extension.helloWorld",
			"title": "demo新命令"
		}],
		"menus": {
			"editor/context": [{
					"command": "extension.helloWorld",
					"group": "z_commands",
					"when": "editorTextFocus"
				},
				{
					"group": "z_commands"
				}
			]
		}
	}

 ....
}