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

前言

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

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

简介

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

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

主要使用到的包有：

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