如何开发插件

wanggit edited this page Feb 23, 2014 · 7 revisions

原文https://github.com/adobe/brackets/wiki/How-to-Write-Extensions

如何开发Brackets插件

开发一个插件需要三个步骤:

  1. 创建基本的插件模板。
  2. 开发插件并调试
  3. 打包并发布插件以供其他人使用。

通过以上链接阅读这些章节的详细内容!

创建插件

  • 点击Brackets的“帮助>显示插件目录”打开放置插件的文件夹。
  • 插件文件夹的“user”文件夹,并以“插件的名称”为文件夹名创建一个新的文件夹,再在新建的文件夹中新建main.js文件。
  • 为了快速开始,可以复制Simple “Hello World” extension已存在的插件,以开发相似的功能。
  • 如果你对Brackets有任何建议,可以发送到brackets-dev Google group#brackets IRC channel on freenode,Brackets会尽早给予反馈(可能其他人也会与你有相同的想法)。

*注意:因为通过Brackets的插件管理器很容易删除正在开发的插件,所以更安全的方式是把插件文件夹新建在Brackets安装目录下的src/extensions/dev目录下。可通过修改权限保证文件夹是可写的,or by cloning the Brackets source and using that copy.

测试或调试

  • 编辑main.js文件。
  • 保存文件并通过Brackets的"Debug>Reload Brackets"重启Brackets,以进行测试。
  • 通过Brackets的"Debug>Show Developer Tools"(依赖于Chrome浏览器),并可使用Chrome浏览器的控制台。
    • 在首次打开Developer Tools时,必须设置为禁用缓存,否则在Developer Tools打开的状态下重新加载Brackets,不能反映出插件修改之后的变化。

查看Debugging Brackets获取更完善描述。

还可以为插件编写单元测试

发布插件

  1. 向main.js所在的目录中添加package.json文件。
  2. 打包整个插件目录为ZIP格式(更快捷的使用GitHub的“Download ZIP”按钮下载ZIP包)或通过命令git archive --format zip -o yourextension.zip master生成ZIP包。
  3. 通过上传ZIP包到Brackets Extension Registry,以发布插件。

更多信息,参见Extension Registry Help

常见操作

使用模块

  • 从插件的文件夹树中加载模块,使用require()方法,传入相对于插件根目录的相对路径做为参数。
  • 加载Brackets的核心模块,使用brackets.getModule()方法,传入相对于Brackets的src目录的相对路径做为参数。
  • 不能到_其他_插件中加载模块(暂时还不支持)。

也可以插件中使用其他的文件,例如下文的“Load a CSS file”。

添加菜单项与键盘快捷键

查看Simple "Hello World" extension代码示例。

对于任何一个新的行为,都要通过CommandManager.resiger()方法注册一个Command以实现它。Command通过Command Id(字符串类型)映射到实现行为的函数。使用包命名的方式为Command Id命名(例如:myorg.myextendsion.mycommand)以避免与其他插件冲突。(参见:higher-level overview of command architecture)。

**添加菜单项:**通过Menus.getMenu()方法,传入Menus.AppMenuBar常量(当前包含FILE_MENUEDIT_MENU, VIEW_MENU, NAVIGATE_MENUHELP_MENU),获取顶级菜单。再通过theMenu.addMenuItem()方法,传入要执行的Command Id以添加菜单项。这样就把菜单项与Command关联起来,Command被创建后,它的名称将被显示为菜单项标签。

约定,调用addMenuItems()方法的同时为Command创建键盘快捷键。

// 获取顶级的菜单
var editorMenu = Menus.getMenu(Menus.AppMenuBar.EDIT_MENU);
// 以包命名风格命名Command Id
var commandId = "com.wanggit.commandId";
// 注册Command
CommandManager.register("Custom Command", commandId, customFunction);
// 添加菜单项,并指菜单项执行commandId的命令,快捷键为Ctrl-Shift-O
editorMenu.addMenuItem(commandId, "Ctrl-Shift-O");

**添加上下文菜单项:**通过Menus.getContextMenu()方法,传入Menus.ContextMenuIds常量(目前包含EDITOR_MENU, INLINE_EDITOR_MENU, PROJECT_MENUWORKING_SET_MENU),可获取上下文菜单。通过theContextMenu.addMenuItem()方法,传入要执行的Command Id以添加上下文菜单项,上下文菜单项标签的显示与菜单项相同。

// 获取编辑器的上下文菜单
var contextMenu = Menu.getContextMenu(Menus.ContextMenuIds.EDITOR_MENU);
// 省略Command的定义
// ...
// 添加上下文菜单,并指定要执行的Command,指定快捷键
contextMenu.addMenuItem(commandId, "Ctrl-Shift-L");

**添加菜单分隔线:**依据以上的说明获取顶级菜单或上下文菜单,再通过theMenu.addMenuDivider()添加菜单分隔线。这个方法总要把分隔线添加到菜单当前状态的最后一个位置。通过传入firstlast参数,指分隔线的位置。另外,还可以通过传入beforeafter与相对那个菜单的Command Id,以指定分隔线显示的某菜单项之前或之后。

// 添加一个分隔线到菜单当前状态的最后一个位置
menu.addMenuDivider();
// 添加到最前面,相关参数还有FIRST,LAST,BEFORE,AFTER
menu.addMenuDivider(Menus.FIRST);
// 在Commands.EDIT_FIND命令对应的菜单前添加分隔线
menu.addMenuDivider(Menus.before, Commands.EDIT_FIND);

**添加快捷键:**通过KeyBindingManager.addBinding()方法,传入快捷键要执行的Command Id与快捷键组合,可以在不关联菜单项的情况下新建快捷键。务必在Brackets Shortcuts页面查看那些快捷键是没被占用,并把自定义的快捷键添中到此页面列表中。

CommandManager.register("Handler Enter", commandId, handlerEnter);
KeyBindingManager.addBinding(commandId, "Ctrl-Enter", "linux");

通过拒绝(decline)键盘事件,并允许其他功能处理这个键盘事件,那么就一定要在Command的执行方法中返回一个已reject()$.Promise对象。(如果想要光标在某个位置时重写Enter的事件,那么这就非常有用处)(此功能在Sprint 18及以上的版本有效)。

var commandId = "wanggit.test";
// 捕捉Enter事件
function handlerEnter(){
    console.log("Handler Enter");
    // 创建Deferred对象
    var deferred = new $.Deferred();
    // 拒绝Enter事件,在调用reject方法之后,并返回$.Promise对象,那么此时Enter事件,还可以被其他功能捕捉。
    deferred.reject();
    // 返回$.Promise对象。如果不返回一个已调用过reject方法的$.Promise对象,那么其他功能就不能再捕捉到Enter事件了。
    return deferred.promise();
}
CommandManager.register("Handler Enter", commandId, handlerEnter);
// 绑定键盘事件
KeyBindingManager.addBinding(commandId, "Enter", "linux");

添加新UI元素

**向Edtior的下面添加Panel:**首先Panel要添加.bottom-panel,具体可以参见JSLint bottom-panel.html的例子。通过PanelManager.createBottomPanel("yourExtension.name", $(panelHtml))可以在状态栏之上新建一个Panel。You may see Resizer.makeResizable()and manual DOM insertion of panels in some extensions but this parctice is being phased out since the introduction of PanelManager.

非正规技术-

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.