刚做完一个atom插件项目，通过这个插件下载一些上传在服务器上的react代码应用，以帮助react的初学者快速上手。趁现在都记得，把遇到的问题及解决问题的方法都总结下，希望对后面开发atom插件的童靴给个参考。
一. 新建一个插件
启动atom编辑器，按下 cmd+shift+p(mac)或者 ctrl+shift+p（Windows/Linux）来打开命令面板
搜索“Package Generator: Generate Package”并点击列表中正确的条目，你会看到一个输入提示，将 “my-package" 改成你自己插件的名称：“react-template”。
按下回车键来生成这个插件的骨架代码，它会自动在 Atom 中打开。
基本的文档结构如图所示：
二.运行插件
第一种方式：快捷键启动
打开keymaps中的react-template.json文件，里面标识了启动这个插件的默认快捷键：“ctrl-alt-o",这可以更改，不与你系统中存在的快捷键冲突即可。
启动插件，按“ctrl-alt-o"，出现这样一个弹窗，证明你新建的插件是好用的.要是没有效果，就先刷新下，执行Window: Reload，或者使用快捷键ctrl-shift-F5(win),ctrl-alt-cmd-l(mac)
出现这个弹窗后点击弹窗是没法关闭它的，必须使用ctrl-alt-o,或者刷新才可以。
第二种方式：在菜单里启动
找到packages里你的插件名称react-template,点击Toggle即可启动，关闭也是同样操作。
.
三.插件里文件的基本介绍
1.keymaps
定义了插件的快捷键，可以自己设置。atom-workspace 是设置快捷键起作用范围，只要在工作区域按快捷键就可以触发弹窗命令。如果定义 atom-text-editor，那么就只能在编辑区域触发命令
2.lib
react-template-view.js
react-template.js
lib里面有两个文件，是实现插件功能的代码。主入口文件为react-template.js,这个会在package.json的main中指定。react-template-view.js这个文件是视图模板，我们的插件的外观需要在这里设置。
activate(state)：在插件激活的时候触发，这时候工作区已经准备就绪了。如果你的包实现了 serialize() 方法，那么将会传递上次窗口序列化的 state 数据给该方法，常用于执行初始化，例如绑定事件等等。
initialize(state)：与上个方法类似, 但在它之前调用。initialize（）在你的发序列化器或视图构建之前调用，activate() 是在工作区环境都已经准备后调用。如果你想执行更多初始化控制，可以使用该方法。
serialize()：在窗口关闭的时候，如果你的插件需要保存某些状态信息，可以使用该函数。当窗口再次打开的时候，状态信息会传递给activate(state)。
deactivate()：该方法在窗口关闭的时候执行，在这里需要解绑事件绑定、清理插件需要的资源。
3.menus
目录包括一个cson文件，用于设置插件的菜单项。默认的文件如下，其中context-menu设置上下文菜单，也就是右键打开的菜单；menu设置菜单项中打开的菜单。
{
"context-menu": {
"atom-text-editor": [
{
"label": "Toggle react-template",
"command": "react-template:toggle"
}
]
},
"menu": [
{
"label": "Packages",
"submenu": [
{
"label": "react-template",
"submenu": [ {"label": "Toggle",
"command": "react-template:toggle" }]}]
}
]
}
4.spec
测试代码
5.styles
styles 目录下存放的是插件的样式文件。可以使用 CSS 或 LESS 编写
6.package.json
{
"name": "react-template",
"main": "./lib/react-template",
"version": "0.0.0",
"description": "A short description of your package",
"keywords": [
],
"activationCommands": {
"atom-workspace": "react-template:toggle"
},
"repository": "https://github.com/atom/react-template",
"license": "MIT",
"engines": {
"atom": ">=1.0.0 <2.0.0"
},
"dependencies": {
}
}
package.json跟npm类似， 涉及一些发布和各种配置，他自己的独特之处如下：
- main ： 这个是你执行命令后进入的主文件，也就是入口文件，默认是寻找index的，同时atom支持 coffee 和 js
- styles ：一个字符串数组声明来让atom加载样式文件顺序，如果没有，就顺序的读取styles文件夹里面的文件
- keymaps ： 一个字符串数组声明package需要加载的key map文件顺序，如果没有，按顺序读取keymaps文件夹的文件
- activationCommands ：一个对象来声明触发你的package的行为，key是css选择器形式，value是一个字符串数组声明命令。知道规定的css 选择器中一个触发了，才会载入你的package
