转载

atom 插件开发实战

我从来没有遇到过一款编辑器，可以将高颜值、高扩展性和低开发门槛三者做到如 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 //写给用户的说明手册，包括如何安装、如何使用等

这个插件默认实现了一个功能，就是在编辑窗口弹出一句欢迎语。