10分钟atom插件开发速成

关于atom

atom是github近期出品的一个非常特殊的轻量级的编辑器,其架构非常有特色,基于nodejs和web前端技术打造而成,所以其对web开发的友好性也是非常强的。

而本文主要探讨的是atom插件,这是其非常重要的特色之一,因为atom的插件是用nodejs来构建的,可以随意使用第三方模块,这使得其插件开发起来非常简单。

而且atom的api非常简洁,配置也很简单,一个功能简单的小插件分分钟搞定。

而我对其最大的期待是,把我们目前的基于nodejs的一套自动化工具集成到atom插件中,感觉会是一种非常好的体验。

下面我们就来一个10分钟构建插件的过程。不会非常深入,只讲流程,具体的可以去看官方文档。

下载atom

如果你有邀请码,应该有官方的下载渠道,其实网上有很多直接下载atom的方法,可以去搜一下,不过注意:目前只有mac能用atom。

我当时是这样下载的,不过好像版本比较老。

curl -L  https://www.atom.io/api/updates/download  -A "Atom/0.1 CFNetwork/1.5" > atom.zip

创建一个插件

安装atom后,第三方插件是放在这里的:/Users/你的用户名/.atom/packages/

在这个路径下新建一个文件 mkdir example

然后我们最基本的文件:

package.json 插件描述文件

有了这个文件,其实一个插件就已经产生了,只是没有功能而已。

PS:每次修改插件内容之后,可以通过快捷键 ctrl+alt+command+l来重新载入所有插件。

主脚本

接下来,我们给插件添加一点功能吧。

其实atom插件的理念跟sublime之类的编辑器的插件的理念有些类似,都是通过命令来执行功能的。

你可以定义一个命令,其包含一些操作,然后通过配置项把命令配置到界面或者快捷键上,通过某些操作来触发这些命令,从而达到执行功能的目的。

说到这里,我们创建一个文件夹吧,叫做 /lib/

里面放一个example.coffee文件:

在其内,我们创建一个命令:

module.exports =
  activate: ->
    atom.workspaceView.command "example:console", => @console()

  console: ->
    console.log 'hello world'

本文都是以coffeescript为语言的,应该也支持js的,不过我对coffee比较熟,没研究过支不支持原生js。。。

上述的代码就创建了一个命令,叫做:example:console

记住这个命令,后面我们要把这个命令配置到触发条件中。

PS:在这个脚本中,可以直接使用各种nodejs的npm类库,直接require即可,但是需要在package.json中定义好dependences。

atom的api

atom内部提供了很多js对象和方法(API),可以在插件脚本中直接调用来获取编辑器的各种信息和操作。

api太多了就不挨个说了,具体去看文档吧。

配置package.json

package.json是一个类似于npm模块配置的文件,基本上一模一样。

不过需要添加这些东西:

1.告诉atom我们定义了什么命令:

"activationEvents": ["example:console"]

2.记得添加你使用的第三方库的dependences:

3.定义engine

"engines": {
  "atom": ">0.39.0"},

4.定义入口脚本

"main": "./lib/example",

配置快捷键或者菜单或者右键菜单

插件有了,命令有了,我如何触发插件的功能呢?

三个方法:快捷键,菜单,右键菜单。

首先是快捷键: 新建一个keymaps的文件夹,里面写上example.cson cson是一个类似于json的结构化表示,具体可以去google了解下。

内容这样写:

# https://www.atom.io/docs/latest/advanced/keymaps'.editor':
  'cmd-alt-u': 'example:console'

其中’.editor’是一个css选择器,这是atom的特色,就是你可以用选择器来执行事件的作用范围,因为整个编辑器就是一个浏览器,你可以直接按command+alt+i来调出chromedevtools来调试代码。

然后再是菜单:

新建一个文件夹 menus ,里面放一个example.cson 。

里面可以同时定义菜单和右键菜单。

这里给个右键菜单的例子:

'context-menu':
  '.workspace':
    '这是demo': 'example:console'

大概能理解吧,不能理解的可以去看一下官方文档,相信很快就可以理解。

到了这里,按一下 ctrl+command+alt+l 。重载一下插件,你的插件已经可以用了,打开dev tool 邮件点击这是demo,可以看到console里输出 ‘hello world’。

具体大家也可以参考下官方的入门文档:

https://atom.io/docs/v0.76.0/your-first-package

这里是官方的api文档:

https://atom.io/docs/api/v0.76.0/api/

本文使用乱炖的Atom编辑器插件直接发送,详见:https://github.com/xinyu198736/htmljs-publish-atom


标签:<a href="/?tag=atom">atom</a>