Atom插件篇

前提：

使用atom的人很多很多，但是开发atom的人寥寥无几，官方给的api有点难受。

---

创建一个自己的插件：

全局快捷键 ctrl shift P

Generate Package 创建新的插件  后面勾选的名字就是插件名。

 

新建的目录结构 （项目名 first-package）：

 

 

Keymaps

是监听快捷键  按下ctrl alt o  调用XX包:下XX方法   atom-workspace 代表在atom全局使用

{

  "atom-workspace": {

    "ctrl-alt-o": "first-package:toggle"

  }

}

我们可以添加各种自定义的快捷键在这里。

Value的定义为：包名:触发的事件名

 

需要注意的是：

这里配置的快捷键还有一个作用域的概念。也就是JSON外边的那个key。

atom-workspace表示在Atom中生效

atom-text-editor表示只在文本编辑器范围内生效。

 

 

Lib

主要代码存放处

默认会生成两个文件：

1. package.js
2. package.view.js

 

入口文件的表现方式为一个JSON对象，可以实现如下几个函数：

 

1. activate:

当Package被激活时会执行该方法，函数的签名表示会接受一个state参数，该参数是通过serialize方法传递过来的（如果有实现它的话）

 

1. deactivate:

当Package失效时会出发的方法，这两个方法可以理解为React中的componentWillMount和componentWillUnmount

 

1. serialize:

也就是上边说到的那个方法，可以返回一个JSON对象供下次激活后使用

 

1. 自定义快捷键对应的事件名:

每次Package被触发对应快捷键时都会执行的方法

 

 

 

 

 

默认的插件生成的主入口文件

 

 

 

 

 

Menus

这里存放的是在应用菜单和编辑区域菜单栏的配置文件

packages 下面的menu列表也是在这里配置的

{

  "context-menu": {

    "atom-text-editor": [

      {

        "label": "Toggle first-package",

        "command": "first-package:toggle"

      }

    ]

  },

  "menu": [

    {

      "label": "Packages",

      "submenu": [

        {

          "label": "first-package",

          "submenu": [

            {

              "label": "Toggle",

              "command": "first-package:toggle"

            }

          ]

        }

      ]

    }

  ]

}

 

同样的，context-menu会区分两个环境，text-editor和workspace。

Context-menu 对应的元素会在对应的区域内右键触发时显示

Menu则是出现在Atom主菜单栏上

Spec

这里存放的是一些测试用例 创建Package会有一些默认的断言

记得时常写测试

 

 

Styles

如果Package有很多View需要展示 需要在这里编写  使用less语法可更改

没该方面任务，不做深追。

 

 

添加一个menu到atom里面的时候。

1. Package.json 中 需要添加cativatinCommands
2. 在 lib/xx.js中 添加对应的方法到activate中
3. 在menus/xx.json menu中 submenu/submenu添加一个自己定义的

 

这些都是最基础的 想聊的并不是这些 后面会有其他讨论