制作你的第一个 Atom 文本编辑器插件

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

序言

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

教程须知

Atom 文本编辑器是用 web 技术创造出来的。我们将完全使用 JavaScript 的 EcmaScript 6 规范来制作插件。你需要熟悉以下内容：

• 使用命令行
• JavaScript 编程
• Promises
• HTTP

教程的仓库

你可以跟着教程一步一步走，或者看看 放在 GitHub 上的仓库，这里有插件的源代码。这个仓库的历史提交记录包含了这里每一个标题。

开始

安装 Atom

根据 Atom 官网 的说明来下载 Atom。我们同时还要安装上 apm（Atom 包管理器的命令行工具）。你可以打开 Atom 并在应用菜单中导航到 Atom > Install Shell Commands 来安装。打开你的命令行终端，运行apm -v 来检查 apm 是否已经正确安装好，安装成功的话打印出来的工具版本和相关环境信息应该是像这样的：

1. apm -v
2. > apm 1.9.2
3. > npm 2.13.3
4. > node 0.10.40
5. > python 2.7.10
6. > git 2.7.4

生成骨架代码

让我们使用 Atom 提供的一个实用工具创建一个新的 package（软件包）来开始这篇教程。

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

如果你在侧边栏没有看到软件包的文件，依次按下 Cmd+K Cmd+B（MacOS）或者 Ctrl+KCtrl+B（Windows/Linux）。

命令面板Command Palette可以让你通过模糊搜索来找到并运行软件包。这是一个执行命令比较方便的途径，你不用去找导航菜单，也不用刻意去记快捷键。我们将会在整篇教程中使用这个方法。

运行骨架代码包

在开始编程前让我们来试用一下这个骨架代码包。我们首先需要重启 Atom，这样它才可以识别我们新增的软件包。再次打开命令面板，执行 Window: Reload 命令。

重新加载当前窗口以确保 Atom 执行的是我们最新的源代码。每当需要测试我们对软件包的改动的时候，就需要运行这条命令。

通过导航到编辑器菜单的 Packages > sourcefetch > Toggle 或者在命令面板执行 sourcefetch:toggle来运行软件包的 toggle 命令。你应该会看到屏幕的顶部出现了一个小黑窗。再次运行这条命令就可以隐藏它。

“toggle”命令

打开 lib/sourcefetch.js，这个文件包含有软件包的逻辑和 toggle 命令的定义。

转载于:https://my.oschina.net/u/3472227/blog/919318