我从来没有遇到过一款编辑器，可以将高颜值、高扩展性和低开发门槛三者做到如 atom 般完美。虽说这三个特性并非衡量一款编辑器的主要指标，但无论如何我推荐你试用一下，并且，务必根据自己的切实需求，安装或开发符合自己使用习惯的插件，毕竟这才是它的精髓所在。
下面我将从0开始，展示 atom 简易插件的开发流程。
0x00. 需求分析
之前的文章都是发表在博客上的，而不管是基于 WordPress 这样的重型 CMS，还是基于 hexo/jekyll 这样的静态页面，都有成熟的脚本可以做到一键生成并发表。可是当我准备长期且认真的在微信公众平台上更新文章时，那个简陋的网页编辑器简直让我痛不欲生。为此，我特意写了一个页面，原理和 Markdown here（一款可以将 Markdown 格式文本转化为 html 的浏览器插件）类似，只不过我自己加了一些自定义的脚本；网上也有很多类似的方法。但这些方法都有个共同的缺点，就是没有办法处理图片，即使排版排到再完美，一涉及到图，就还是要乖乖切换到公众号平台一张一张上传。在这个时期，我想上传一张代码截图到文章里的步骤是：使用截图工具截图 -> 保存图片到本地 -> 把保存在本地的图片上传到微信平台 -> 从微信平台将图片插入到文章中。而如果我要在一篇文章中插入十几张图，这个工作量和重复性简直会把人逼疯。这也直接导致我在文章里尽量多写文字少用图。
后来我发现，如果文章中的图是可以被外链访问的（也就是说公网上有一个链接可以单独请求到这张图），那么在页面上直接选中图片然后复制，可以直接粘贴到微信公众号的编辑器里，接下来微信会自动上传。
所以，如果有一个小插件，可以将上面四步合并实现自动化，那我就又成功给自己续了 1s。:)
0x01. 框架搭建
在 atom 中，点击 ctrl + shift + p，在弹出的命令输入框中输入 generate package，选中然后按回车， atom 就会在本地帮你新建好一个插件所需的所有基本文件。如下所示是一个以 testpackage 命名的插件的目录树：
testpackage ├ keymaps/ │ └ testpackage.json //定义该插件功能所对应的快捷键 ├ lib/ //这个目录放置实现该插件所有功能的代码 │ ├ testpackage-view.js //一个和用户交互页面的生成示例 │ └ testpackage.js //该插件的入口文件，相当于 main 函数 ├ menus/ │ └ testpackage.json //定义菜单栏显示内容 ├ spec/ //保存插件的测试代码（非必须） ├ styles/ │ └ testpackage.less //定义插件加载css样式（非必须） ├ .gitignore //版本管理配置文件 ├ CHANGELOG.md //升级日志记录文件（提交到官方插件库后，该文件会在每次升级时自动更新） ├ LICENSE.md //协议 ├ package.json //插件的配置文件，包括插件名、版本号、关键词、依赖包等 └ README.md //写给用户的说明手册，包括如何安装、如何使用等
这个插件默认实现了一个功能，就是在编辑窗口弹出一句欢迎语。
0x02. 功能实现
首先我们知道，每次用截图工具截图后都有两个选择，一个是点保存，然后选择一个位置把刚才的截图存下来；另一个就是点确定，然后在聊天窗口中直接粘贴。这个时候，系统的内存中其实是保存有刚才的截图的，所以我们要做的就是读取系统粘贴板中的内容，然后在本地指定文件夹下将其保存成文件。
atom 原生支持 node，所以这也意味着 node.js 的所有官方库我们都可以直接调用。要实现0x01中提到的功能，需要用到 qiniu 这个库，帮我们完成上传到七牛云空间上。
只要满足以上两点，就可以做到截图后直接在 atom 中粘贴，即可自动插入符合 Markdown 格式的存储在七牛云上的图片引用。
这里就不进行太深入的代码分析，毕竟代码都是开源在 gayhub 上，你可以随时下载、查看、提交Bug或建议。
gayhub 地址： https://github.com/Cubernet/insert-img
0x03. 测试发布
如果你觉得自己的插件已经通过了测试，达到可以发布的水准，那就可以按照下面的步骤将它提交到 atom 官方插件库中。
- 在 github 上面新建一个 repo 并把代码上传上去；
- 把 package.json 中的各种字段填写完整，version 保持默认的“0.0.0”即可， atom 会自动更新这个字段；
- 去 atom 官网搜索下是否已经存在和你的插件同名的插件，如果有，那么给你的插件换个更好听的名字；
- 在插件的根目录下运行
apm publish minor发布你的插件；
上面那条命令会将你的插件提交到官方插件库中，同时自动更新配置文件中的 version 字段，然后创建一个新的 git tag 并将更新后的插件代码提交上去。关于这条命令的更多资料，可以运行 apm help publish 获取。
这时，你的插件已经发布成功，其他 atom 用户就可以在编辑器的插件安装页面直接搜索你的插件名，然后选择安装了。
0x04. 大功告成
大功告成？你以为敲下回车的那一刻就是你大功告成疯狂 dota 的时候？
笑而不语 :)
从这一刻起，你将从四面八方收到各种让你抓耳挠腮磕头撞墙的 bug 反馈和 feature 建议，于是你陷入了无穷无尽的查漏补缺、迭代升级中。
你以为你成功的给自己续了一秒？
Too young, too naive.
「一键投喂 肥宅快乐水🥤！」
谢谢老板，老板大气~
使用微信扫描二维码完成支付
本文由 Cubernet 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Dec 22, 2016 at 06:34 am