使用 React 开发 Atom 插件

使用 React 开发 Atom 插件
Atom 是目前非常流行的编辑器，除了好用小巧的特点，它丰富的插件也给开发者提供了很多的便利性。

Atom 是基于 Electron 开发的，也就是说我们可以通过写 HTML + CSS + JavaScript 的方式来构建我们的桌面应用。而一个典型的Electron App 的架构如图:

其实我们在完成实际的插件的部分，也就是工作的最上层，使用我们前端最基本的知识去实现基本的需求。当然这一层的实现，可以有很多方式，你可以使用简单的JS 去创建视图窗口，你也可以使用一些框架，比如 Vue.js 以及今天提及的 React。React 最核心的一个目标:

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

React 的发展很迅速，现在不仅可以完成普通网站的开发，也能能够开发原生的App(React-Native)，也可以开发 VR 相关的内容 (React-VR), 当然桌面应用现在也是可以借助于 Electron 完成。
今天我们简单实现一个插件，通过菜单按钮，呼出对话框，然后完成输入字符串，并将字符串插入到我们的当前代码中。
我的博客：：；业余草：www.xttblog.com；：或。

创建项目

首先我们创建一个基本的插件包，打开 Atom 然后通过 Package Generator 提供的命令来创建一个基本的文件结构。我们通过快捷键 Cmd+shift+P 或者 Ctrl+shift+P 输入 “Package Generator” ，输入你的项目名称(我的暂时叫atom-plugin-test)，然后进入项目目录，可以看到一个基本的结构:

+ keymaps // 存放快捷键配置

+ lib   // 主要业务的实现

+ menus // 设置菜单的配置

+ spec  // 添加测试

+ styles // 存放样式的目录

  .gitignore

  package.json

  RADEME.md

我们可以按照自己的需求修改 pacakge.json 和 README.md。至于其他目录下面的内容，我们后面会提及到。

默认的插件包生成后，我们可以看到菜单栏的 Packages 里面的选项里有我们刚刚创建的插件包的选项。

安装依赖

首先我们先安装 我们插件环境所需要的一些依赖:

npm install --save react-dom react rxjs redux classnames 

其中有些类库 redux rxjs 等根据你个人的使用情况安装。 当然你也可以安装开始时候需要的一些诸如打包，语法检查和测试的一些依赖诸如 eslint flow-bin webpack等，这也完全取决于你个人的需求。

熟悉基本的Atom 插件开发

如果你之前没有开发过 Atom 插件，你可以阅读官方的 Building your first Atom plugin , 官方会比较详细的介绍开发插件的一个基本流程。当然后文也会在开发的过程中强调这些基本的概念。

首先我们进入 lib/atom-plugin-test.js 里面(不同的项目名称，自然lib下的文件名称也不一样)，它就是每个插件包的入口文件，每个插件包都需要指定这样的入口文件。我们先试着在 toggle 里面简单修改一行代码，来体验下修改的效果。 我们选择 View -> Developer -> Toggle Developers Tool 打开调试器，查看插件的输出。 每次修改完后代码，我们都需要重启编辑器，你可以 选择菜单栏 View -> Developers -> Reload Window 来实现，你也可以调用 Cmd+shift+P 或者 Ctrl+shift+P 输入 Window 然后选中 reload 命令来执行。

// ...

toggle() { 

    console.log('This is a new plugin');

    return (

      this.modalPanel.isVisible() ?

      this.modalPanel.hide() :

      this.modalPanel.show()

    );

  }

这个时候我们可以选择 Packages -> atom-plugin-test -> toggle 查看输出。

如果你想修改按钮的名称，这个时候你可以去 menus目录下的 atom-plugin-test.json进行修改，其中 context-menu 表示鼠标右键的菜单选项，而 menu 则是菜单栏的按钮选项。如果我们留心 我们的入口文件的话，我们可以看到这段代码:

// Events subscribed to in atom's system can be easily cleaned up with a CompositeDisposable

    this.subscriptions =