前提:
使用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
主要代码存放处
默认会生成两个文件:
- package.js
- package.view.js
入口文件的表现方式为一个JSON对象,可以实现如下几个函数:
- activate:
当Package被激活时会执行该方法,函数的签名表示会接受一个state参数,该参数是通过serialize方法传递过来的(如果有实现它的话)
- deactivate:
当Package失效时会出发的方法,这两个方法可以理解为React中的componentWillMount和componentWillUnmount
- serialize:
也就是上边说到的那个方法,可以返回一个JSON对象供下次激活后使用
- 自定义快捷键对应的事件名:
每次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里面的时候。
- Package.json 中 需要添加cativatinCommands
- 在 lib/xx.js中 添加对应的方法到activate中
- 在menus/xx.json menu中 submenu/submenu添加一个自己定义的
这些都是最基础的 想聊的并不是这些 后面会有其他讨论