cloud9 ide 扩展插件 一个简单的小插件

简单说明

  cloud9 有插件开发的官方bolg, 地址是https://cloud9-sdk.readme.io/blog,上面有完整的api 和一些关键的设置说明。

若是再开发过程中遇到问题,还可以查看c9再git 上的issues ,可以向开发者提问 https://github.com/c9/core/issues.

    现在我们开始做第一个弹出信息的小插件,cloud9提供的工具使开发非常简单。

    进入c9 的ide 后,点击menu上的Tools/Developer/Start in Debug Mode , 会打开一个新的调试的c9的窗口。

在这种模式下,可以新建,编辑 plugins ,并且可以自动化的将插件安装来进行调试,非常方便。

   进入Debug Mode 后,menu 下的 File 会多出new plugin 这个菜单,下级菜单有四种插件模式可以选择,

     Empty Plugin ;空插件,自动生成一个包含插件基本配置及方法的文件包。

     Full  Plugin : 实例插件,会生成一个点击弹出图片的一个插件。

     Installer Plugin :已安装插件: 在正常模式下,插件安装后会将文件压缩并生成install.js,这里就显示了一个已经安装好的插件的文件。

Cloud9 Bundle: c9插件束, 只生成一个配置文件和一个说明文件。

编写插件

    第一步:

            这里我们选择Empty Plugin ,生成了一个plugin.simple的文件夹,按官方的说明首先要更改文件夹的名称,因为在C9 的plugin list中已经有此名的插件,可以在Terminal 或者虚拟DOS窗口中输入命令:C9  list 就可以看到一些简单的插件的列表。若是没装c9  可以先npm  install  c9 进行安装。

        文件夹下面有四个文件:

package.json :里面包含了插件的版本,哪些插件可用,需要装载的插件配置等,相关信息可以查看https://docs.npmjs.com/files/package.json  , 里面介绍了package.json的所以参数及配置说明。

 plugin.js:  包含插件的核心内容。

plugin_test.js: 包含插件的测试方法。

README.MD: 插件的介绍说明等。

第二步:

打开plugin.js ,会发现已经帮你写好了插件的整体框架,只需要添加内容就可以了。

引用资源:

define(function(require, exports, module) {
    //调用c9 的核心接口,Plugin插件开发必要插件 ,menus菜单的相关操作,terminal终端机的相关操作,
    //需要开发什么部分的就调用相关的核心插件,可在api中查看。https://docs.c9.io/api
     main.consumes = ["Plugin","commands","tabManager","terminal","menus","ui"];
     //输出插件 
    main.provides = ["myplugin"];
    return main;

main

  function main(options, imports, register) {
      //定义插件的基本组件
        var Plugin = imports.Plugin;
        var commands=imports.commands;
        var menus = imports.menus;
        var ui = imports.ui;
        /***** Initialization *****/
        // 插件初始化
        var plugin = new Plugin("Ajax.org", main.consumes);
        var emit = plugin.getEmitter();

   load()方法,启动时自动加载。

  function load() {
              //新建一个命令,命名为test ,
              // bindKey:绑定按键,mac系统command+Alt+J ,win系统 Ctrl-Alt-J ,
              //exec 执行内容是弹出一个success 的显示,
              //isAvailable:方法是否可用,可以自定义些限制条件,这里返回一个true
                commands.addCommand({
                name:"test",
                bindKey:{ mac: "Command-Alt-J", win: "Ctrl-Alt-J" },
                exec:function () {
                    alert("success!");
                },
                  isAvailable: function(){ return true; }
            },plugin);
            
            //添加工具栏 在menu /tools下会多出一个Item01的菜单。
             menus.addItemByPath("Tools/Item01", new ui.item({
                command: "test"
            }), 300, plugin);
        }

插件的生命周期有两个事件,加载和加载结束,这里将load()绑定到load的生命周期内。

     plugin.on("load", function() {
     //调用上面的load()方法:
            load();
        });
        plugin.on("unload", function() {
        
        });

注册和定义插件。

 /***** Register and define API *****/     
        plugin.freezePublicAPI({ 
        });
        register(null, {
            "myplugin": plugin
        });
    }
});

这样一个最简单的插件就完成了,在菜单cloud9/Restart Cloud9 或者ctrl+R 重启后,就可在debug Mode 内使用新写的插件,win系统按 ctrl+alt+J 或者按menu/Tools/Item01,就可看到弹出的success 信息了。

以后会将一些关键的api 和 发布你的plugin。

你可能感兴趣的:(cloud9 ide 扩展插件 一个简单的小插件)