一起写atom插件（1）——写个简单的插件

前言

atom是个非常不错的编辑器，当然前提是你要会自己写插件，至少是可以fork一下别人的插件改成自己的，这是用atom的必备技能。

因为atom的开源性质，插件也参差不齐，很难找到完全符合自己的插件，比如非常好用的js-hyperclick插件，但在angularjs和es6的情况下就无能为力了，因为angularjs是AMD标准的，使用es6的话需要在构造器中注入，该插件在注入的情况下就实在无能为力了。

简介

为了改造这个插件的第一步就是自己先写一个简单的插件，效果如下：

插件实现了根据当前的编程语言去百度站内搜索传说中的StackOverflow上的已采用回答的代码。

主要使用到的包有：

const request = require('request');const cheerio = require('cheerio');const baidu = require('baidu-search');

生成

atom的插件生成方式还是非常方便的只需要在palette使用Package Generator: Generate Package ，输前几个字母就会出现了，palette是atom的利器啊。

你需要做的就是改下命令的名字或者增加新的命令。

    this.subscriptions = new CompositeDisposable();    // Register command that toggles this view    this.subscriptions.add(atom.commands.add('atom-workspace', {      'testatom:fetch': () => this.fetch()    }));

菜单什么的，快捷键什么的，基本一看就懂，也不需要细说了：

上下文菜单和标题栏菜单

{  "context-menu": {    "atom-text-editor": [      {        "label": "Fetch code",        "command": "testatom:fetch"      }    ]  },  "menu": [    {      "label": "Packages",      "submenu": [        {          "label": "testatom",          "submenu": [            {              "label": "fetch code",              "command": "testatom:fetch"            }          ]        }      ]    }  ]}

快捷键

{  "atom-workspace": {    "ctrl-alt-o": "testatom:fetch"  }}

样式什么的也不必说和css一样，因为atom本身就是一个web容器。

重点

剩下的就是写业务逻辑代码了，和写nodejs一样，唯一的区别就是对atom各种UI对象和业务对象的理解。

关键性的api都在这里atom api文档

还有遇到的坑就是对于这些api的调用是没有代码补全的，这个有点头疼，当然也有办法解决。

打开atom应用中的包，然后把找到包里的src内的js都拷出来，在nodejs下配置你拷贝到的目录

  "moduleRoots": [    "atomlib/"  ]

源码

源码都托管在github上 https://github.com/lastsweetop/testatom