atom编辑器 想拥有自己的 Atom 文本编辑器插件吗?

这篇教程将会教你怎么制作你的第一个 Atom 文本编辑器的插件。我们将会制作一个山寨版的 Sourcerer，这是一个从 StackOverflow 查询并使用代码片段的插件。到教程结束时，你将会制作好一个将编程问题（用英语描述的）转换成获取自 StackOverflow 的代码片段的插件，像这样：

准备

教程笔记

Atom文本编辑器是由web技术创建的。我们将使用Java的Ecma 6规范来制作插件。您需要熟悉以下内容:

· 使用命令行· Java 编程· Promises· HTTP

教程库

你可以按照教程一步一步来，或者看看GitHub上的存储库，插件的源代码就在那里。这个仓库的历史提交记录包含了这里的每一个标题。

开始

安装Atom

按照Atom官网的说明下载Atom。我们还需要安装APM(Atom包管理器的命令行工具)。您可以打开atom并导航到Atom >:安装外壳命令进行安装。打开命令行终端，运行apm -v，检查apm是否安装正确。如果安装成功，打印的工具版本和相关环境信息应该如下所示:

apm -v > apm 1.9.2 > npm 2.13.3 > node 0.10.40 > python 2.7.10 > git 2.7.4

生成框架代码

让我们从用Atom提供的实用程序创建一个新包开始本教程。

启动编辑器，按下 Cmd+Shift+P（MacOS）或者 Ctrl+Shift+P（Windows/Linux）来打开命令面板。搜索“Package Generator: Generate Package”并点击列表中正确的条目，你会看到一个输入提示，输入软件包的名称：“sourcefetch”。按下回车键来生成这个骨架代码包，它会自动在 Atom 中打开。

如果在边栏没有看到包文件，依次按Cmd+K Cmd+B(MacOS)或Ctrl+K Ctrl+B(Windows/Linux)。

命令面板允许你通过模糊搜索找到并运行软件包。这是一种执行命令的便捷方式。您不需要找到导航菜单或记住快捷方式。我们将在整个教程中使用这种方法。

运行框架代码包

在开始编程之前，让我们先试试这个框架代码包。我们需要先重启Atom，这样它才能识别我们的新软件包。再次打开命令面板并执行窗口:重新加载命令。

重新加载当前窗口，以确保Atom正在执行我们最新的源代码。每当我们需要测试对软件包的更改时，我们都需要运行这个命令。

通过导航到编辑器菜单中的包:sourcefetch。切换或执行sourcefetch:在命令面板中切换，运行软件包的切换命令。你应该会在屏幕顶部看到一个黑色的小窗口。再次运行此命令将其隐藏。

“切换”命令

Open lib/sourcefetch.js，里面包含了软件包的逻辑和toggle命令的定义。

toggle() { console.log('Sourcefetch was toggled!'); return ( this.modalPanel.isVisible() ? this.modalPanel.hide() : this.modalPanel.show() ); }

Toggle是这个模块导出的一个函数。根据模态面板的可见性，它通过一个三眼操作符调用show和hide方法。ModalPanel是Panel的一个实例，Panel是Atom API提供的UI元素。我们需要在导出默认值中声明modalPanel，然后才能通过实例变量访问它。

this.subions.add(atom.commands.add('atom-workspace', { 'sourcefetch:toggle': () => this.toggle() }));

上面的语句让Atom在用户运行sourcefetch:toggle时执行toggle方法。我们指定了一个匿名函数()= >；This.toggle()，每次执行此命令时都会执行此函数。这是一个事件驱动编程的例子(一种常见的Java模式)。

Atom命令

命令只是用户触发事件时使用的一些字符串标识符，在软件包的命名空中定义。我们使用的命令是:

· package-generator:generate-package· Window:reload· sourcefetch:toggle

软件包对应于响应事件执行代码的命令。

进行第一次代码更改

让我们进行第一个代码更改——我们将更改切换功能来反转用户选择的文本。

更改切换功能

按如下方式更改切换功能。

toggle() { let editor if (editor = atom.workspace.getActiveTextEditor()) { let selection = editor.getSelectedText() let reversed = selection.split('').reverse().join('') editor.insertText(reversed) } }

测试您的更改

通过在命令面板运行 Window: Reload 来重新加载 Atom。通过导航到 File > New 来创建一个新文件，随便写点什么并通过光标选中它。通过命令面板、Atom 菜单或者右击文本然后选中 Toggle sourcefetch 来运行 sourcefetch:toggle 命令。

更新后的命令将改变选定文本的顺序:

在sourcefetch教程仓库中检查此步骤中的所有代码更改。

原文来自:http://www.linuxprobe.com/first-atom-editor.html