查看详情

使用 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 完成。 今天我们简单实现一个插件,通过菜单按钮,呼出对话框,然后完成输入字符串,并将字符串插入到我们的当前代码中。 创建项目 详情 »

如何 Build 一个 Thera

Thera 是一款针对移动混合应用开发的编辑器,它适用于通过weex, Luaview,React Native编写的应用,支持调试,语法高亮,代码片段等常用编辑器功能,同时还可以实现真机模拟和调试。实际上它的底层参考了Atom的设计,基于 Electron ,可以通过JS 和 Html + Css来实现编辑器的基本的功能。由于 thera 是经过深度改造,和 atom相差较大,因此我们可以直接修改源码来build 一个自己的浏览器。 首先我们克隆项目: git clone https://github.com/alibaba/thera 然后进入项目,我们执行 npm install。 安装完成后,我们需要 script下面去执行 npm 包的安装,用于我们 build的依赖 cd script && npm install 接下来,我们需要手动去进行 apm 包管理器的代码下载,因为 Thera 有实现自己的 详情 »

查看详情

Atom 插件开发知识整理(持续更新)

Atom是Github推出的一款代码编辑器,抛开对于编辑器基本功能的实现,Atom的架构体系也值得大家学习,Atom是通过前端的HTML + JS + CSS借助 Electron来实现构建客户端程序的架构,同样这样的实现也有利于自己扩展更多的插件,很多开发者可以通过JS去实现插件的基本开发,这里梳理下插件开发的基本要点。 快速开始 apm 是 Atom 的一款命令行工具。我们开发插件需要用到它。我们先确保我们安装了 apm. 可以点击左上角的 Atom -> Install Shell Commands 来进行安装。完成之后我们可以输入 apm -v: apm 1.15.3 npm 3.10.5 node 4.4.5 x64 python 2.7.10 git 2.11.0 我们开发插件通过 Package Generator 命令来实现快速创建一个插件开发的基本文件。通过快捷键 输入 详情 »