开始开发atom插件（并无系列）

2019年8月24日 125次阅读 来源: les_lee

atom高级用法？？？除了自定义功能基本没啥好玩，抱着装逼的想法，搜了一波atom插件入门，发现说得太迷糊（可能是我太菜），然后打开了官网的插件文档，细细的阅读起来，凭着蹩脚的英语水平也算看懂了大概，索性就翻译下来（因为搜到的中文atom飞行手册，插件篇是空的），希望凭着自己的理解，能写得更通俗。让有心人能看懂官方模版代码。（注意：本文目的不在开发一个什么什么插件，只告诉你如何进行开发）

注：下文并无太多代码，代码建议到你新建一个模版插件（然后你就拥有了所有的代码），然后根据下文加深自己的理解，相信你会看懂它。

Atom插件编写指南(官方文档翻译)

  • 使用package-generator
  • ctrl-shift-p 打开命令输入框输入package-generator就可以找到该命令

插件中的package.json文件

  • 基本和 node 的package.json相同.

  • atom独有的属性:

    • main:你的package的入口js文件路径,如果没有,默认使用index.coffe或者index.js
    • styles: 一个字符串数组,决定样式加载的顺序,默认字母顺序
    • keymaps: 一个字符串数组,键盘映射的加载顺序,默认字母
    • menus: 一个字符串数组,菜单映射顺序,默认字母
    • snippet : 字符串数组,默认字母
    • activationCommands : 一个对象,可以辨别触发激活你的包的命令,键是css选择器,值是一个字符串命令数组,只有其中一个命令在规定的css范围内触发,atom才会加载你的包,如果不指定,你的入口文件的activate()方法会在包加载后调用,
    • activationHooks: 不是很懂,大概是使用什么语法去解释脚本(推荐到观看英文版本)

源代码

  • 如果你想继承atom的行为,你的package应该包含一个单一的[top-level]顶级模块（就是你package.json里面 main 指定的模块）,你的代码应该写在lib目录下,然后requiredmain 指定的文件(用官方插件生成的模版中 mian 指定的就是顶级模块) 如果你再package.json 里面没有配置，就会默认认为是 index.js 是主入口;
  • 顶级模块是一个管理你的插件的生命周期的单一对象,无论你的插件创建了多少个视图,添加到哪个位置,这全部都有顶级模块管理

  • 顶级模块可以实现下面的方法

    - activate(state): 插件激活时被调用。如果你实现了 serialize() 接口，它会传递窗口上次的state. 一般用这个接口来初始化插件。
- initialize(state): (Atom 1.14以后的版本支持) 与activate() 功能类似，不过被调用的更早，可以说在所有操作之前被调用。 如果你想等环境运行完毕了再初始化，请用 activate() 。如果需要在画面构造前执行什么，请用initialize() 。
- serialize(): 在窗口被关闭的时候，允许你返回 JSON 序列，来保存当前的状态。你保存的信息，可以传递给activate() 接口，来在下次启动时恢复你的窗口状态。
- deactivate(): 窗口关闭时会调用这个接口，如果你的插件正在使用某些资源，或关联着某些文件，请在这里释放他们。

style-sheels

  • 你的样式应该写在styles里,当你的包激活的时候,在这个目录的任何样式都会被加载,你可以查看atom的ui组件执行styleguide命令.如果你不需要样式文件保留就好,如果你要指定颜色和大小,请使用主题提供的变量（这里有点麻烦，还要去查看其它的文档）.

keymaps

  • 指定快捷键,会coffeeScript 或者 json 语法,一看就懂.

menus

  • context-menu 定义右键菜单,一看就懂

    "context-menu": {
"atom-text-editor": [
   {
     "label": "Toggle your-name-word-count",
     "command": "your-name-word-count:toggle"
   }
  ]
 }
  • menu 定义导航菜单,同上，有json基础的基本一看就懂。

开始开发

  • 入口js文件有4个方法,activate(),deactivate(),serialize(),toggle();

    • deactivate(); 释放资源的方法,不要做其他事情。
    • serialize(); 序列化方法,做一些状态保存的工作,不要做其他事情.
    • activate(); 唯一需要激活的方法,在atom加载后会自动执行
  • 主方法的toggle方法不会自动执行,需要手动执行.
  • CompositeDisposable class 注册插件中可以被调用的命令.
  • 本例子中toggle方法只是简单的显示画面与隐藏画面.

the flow (atom启动流程)

  1. 启动atom
  2. 加载paceage
  3. atom read your package.json
  4. atom loads styles menus keymaps main module
  5. atom finishs loading package
  6. 在某个点,用户触发了你的toggle命令
  7. atom执行你的激活方法(avtitave);
  8. atom执行toggle方法.
  9. 在某个时候,用户有触发了你的toggle命令
  10. atom又执行你的toggle方法
  11. 最后atom会关闭任何你定义的序列化

当你不使用actitaveCommand这个属性时 执行的顺序会有所不同

开始修改

  • 继承atomUI 即绘制自己的ui addModalPanel();

    this.modalPanel = atom.workspace.addModalPanel({
  item: this.commentHighlightView.getElement(),
  visible: false
});

  • 继承ui方法2:你还可以把上面的item 添加到workspace上去;

    • tree view， console debugger， outline view 等等面板都是用这个实现的;
  • const edit = atom.workspace.getActiveTextEditor(); 获取当前编辑器对象
  • edit.getText(); 获取所有文本
  • edit.insertText(); 如果选中了文本这个方法会替换文本,如果没有则在光标处添加文本;
  • edit.getSelectedText(); 明显是获取到选择到的文本
    原文作者：les_lee
    原文地址: https://segmentfault.com/a/1190000015679584
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞