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

solocoder 发布于2019-08-22 18:49 / 552人阅读

摘要：注意本文目的不在开发一个什么什么插件，只告诉你如何进行开发注下文并无太多代码，代码建议到你新建一个模版插件然后你就拥有了所有的代码，然后根据下文加深自己的理解，相信你会看懂它。开始开发入口文件有个方法释放资源的方法不要做其他事情。

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启动流程)

启动atom

加载paceage

atom read your package.json

atom loads styles menus keymaps main module

atom finishs loading package

在某个点,用户触发了你的toggle命令

atom执行你的激活方法(avtitave);

atom执行toggle方法.

在某个时候,用户有触发了你的toggle命令

atom又执行你的toggle方法

最后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(); 明显是获取到选择到的文本

云服务器 GPU云服务器从零开始android开发 android开发从零开始 eclipse插件开发 grunt插件开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96243.html

我是如何进行Spring MVC文档翻译项目的环境搭建、项目管理及自动化构建工作的

摘要：内容包括翻译环境搭建项目管理与自动化构建三部分。博客首页声明官方文档翻译稿发布托管在七牛上的翻译文档仓库环境搭建翻译与写作一样，首要之事均为专注于翻译写作本身，而不考虑样式等方面。安装完成后，运行即可在启动一个本地的。感兴趣的同学可以关注这个翻译项目、我的博客原文和我的Github showImg(/img/remote/1460000006776466); 前段时间翻译的S...

shevy 2019-08-14 14:14 评论0 收藏0
【用故事解读 MobX 源码（五）】 Observable

摘要：前言初衷以系列故事的方式展现源码逻辑，尽可能以易懂的方式讲解源码本系列文章用故事解读源码一用故事解读源码二用故事解读源码三用故事解读源码四装饰器和用故事解读源码五文章编排每篇文章分成两大段，第一大段以简单的侦探系列故事的形式讲解所涉及人物场 ================前言=================== 初衷：以系列故事的方式展现 MobX 源码逻辑，尽可能以易懂的方式...

leeon 2019-08-23 10:39 评论0 收藏0
Top 10 JavaScript编辑器，你在用哪个？

摘要：在这个编辑器中，和是其中排名靠前的两个。是一个免费的轻量级编辑器和，用于和开发。对于免费的代码编辑器来说，是一个很好的选择。可以安装两个命令行实用程序，用于从启动编辑器，用于管理的软件包。对于JavaScript程序员来说，目前有很多很棒的工具可供选择。本文将会讨论10个优秀的支持javascript，HTML5和CSS开发，并且可以使用Markdown进行文档编写的文本编辑器。为什...

zombieda 2019-08-21 11:45 评论0 收藏0
React Native 的开发工具:Nuclide

摘要：也没有一个比较好的方式运行的服务每次的时候都需要启动一个的服务，这样就会降低开发的效率。还好有是专门为开发的。拥有更好的语法补全，类型检查等其实是在的基础上的一系列的插件集，是打造的下一代编程开发利器，是一个完全用开发的编辑器。做React Native开发的时候,没有一个好用的IDE,Android Studio打开Android下的项目还可以,JS部分的代码打开并不方便,xcod...

happyfish 2019-08-19 17:40 评论0 收藏0