atom 插件开发实战
in 工匠篇九木侃 with 0 comment and 3493 views

atom 插件开发实战

in 工匠篇九木侃 with 0 comment

我从来没有遇到过一款编辑器,可以将高颜值、高扩展性和低开发门槛三者做到如 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 官方插件库中。

  1. 在 github 上面新建一个 repo 并把代码上传上去;
  2. 把 package.json 中的各种字段填写完整,version 保持默认的“0.0.0”即可, atom 会自动更新这个字段;
  3. 去 atom 官网搜索下是否已经存在和你的插件同名的插件,如果有,那么给你的插件换个更好听的名字;
  4. 在插件的根目录下运行 apm publish minor发布你的插件;

上面那条命令会将你的插件提交到官方插件库中,同时自动更新配置文件中的 version 字段,然后创建一个新的 git tag 并将更新后的插件代码提交上去。关于这条命令的更多资料,可以运行 apm help publish 获取。

这时,你的插件已经发布成功,其他 atom 用户就可以在编辑器的插件安装页面直接搜索你的插件名,然后选择安装了。

0x04. 大功告成

大功告成?你以为敲下回车的那一刻就是你大功告成疯狂 dota 的时候?

笑而不语 :)

从这一刻起,你将从四面八方收到各种让你抓耳挠腮磕头撞墙的 bug 反馈和 feature 建议,于是你陷入了无穷无尽的查漏补缺、迭代升级中。

你以为你成功的给自己续了一秒?

Too young, too naive.

「一键投喂 肥宅快乐水🥤!」

Xiaolei.Tech

谢谢老板,老板大气~

使用微信扫描二维码完成支付

Responses