` 内部的 `
` 元素内部的 `` 元素。
```
$('div.accepted-answer pre code').text()
> "print("Hello World!")"
```
`text` 函数提取并连接原本将由上一个查询返回的元素列表中的所有文本。这也从代码中去除了用来使语法高亮的元素。
### 介绍 Cheerio
我们的下一步涉及使用我们创建好的查询结合 [Cheerio][29]（一个服务器端实现的 jQuery）来实现扒页面的功能。
#### 安装 Cheerio
打开你的命令行工具，切换到你的软件包的根目录并执行：
```
npm install --save cheerio@0.20.0
apm install
```
#### 实现扒页面的功能
在 `lib/sourcefetch.js` 为 `cheerio` 添加一条引用语句：
```
import { CompositeDisposable } from 'atom'
import request from 'request'
import cheerio from 'cheerio'
```
现在创建一个新函数 `scrape`，它用来提取 StackOverflow HTML 里面的代码片段：
```
fetch() {
...
},
scrape(html) {
$ = cheerio.load(html)
return $('div.accepted-answer pre code').text()
},
download(url) {
...
}
```
最后，让我们更改 `fetch` 函数以传递下载好的 HTML 给 `scrape` 而不是将其插入到编辑器：
```
fetch() {
let editor
let self = this
if (editor = atom.workspace.getActiveTextEditor()) {
let selection = editor.getSelectedText()
this.download(selection).then((html) => {
let answer = self.scrape(html)
if (answer === '') {
atom.notifications.addWarning('No answer found :(')
} else {
editor.insertText(answer)
}
}).catch((error) => {
console.log(error)
atom.notifications.addWarning(error.reason)
})
}
},
```
我们扒取页面的功能仅仅用两行代码就实现了，因为 cheerio 已经替我们做好了所有的工作！我们通过调用 `load` 方法加载 HTML 字符串来创建一个 `$` 函数，然后用这个函数来执行 jQuery 语句并返回结果。你可以在官方 [开发者文档][30] 查看完整的 `Cheerio API`。
### 测试更新后的软件包
重新加载 Atom 并在一个选中的 StackOverflow URL 上运行 `soucefetch:fetch` 以查看到目前为止的进度。
如果我们在一个有采纳答案的页面上运行这条命令，代码片段将会被插入到编辑器中：
如果我们在一个没有采纳答案的页面上运行这条命令，将会弹出一个警告通知：
我们最新的 `fetch` 函数给我们提供了一个 StackOverflow 页面的代码片段而不再是整个 HTML 内容。要注意我们更新的 `fetch` 函数会检查有没有答案并显示通知以提醒用户。
在 [sourcefetch 教程仓库][11] 查看这一步所有的代码更改。
### 实现用来查找相关的 StackOverflow URL 的谷歌搜索功能
现在我们已经将 StackOverflow 的 URL 转化为代码片段了，让我们来实现最后一个函数——`search`，它应该要返回一个相关的 URL 并附加一些像“hello world”或者“快速排序”这样的描述。我们会通过一个非官方的 `google` npm 模块来使用谷歌搜索功能，这样可以让我们以编程的方式来搜索。
#### 安装这个 Google npm 模块
通过在软件包的根目录打开命令行工具并执行命令来安装 `google` 模块：
```
npm install --save google@2.0.0
apm install
```
#### 引入并配置模块
在 `lib/sourcefetch.js` 的顶部为 `google` 模块添加一条引用语句：
```
import google from "google"
```
我们将配置一下 `google` 以限制搜索期间返回的结果数。将下面这行代码添加到引用语句下面以限制搜索返回最热门的那个结果。
```
google.resultsPerPage = 1
```
#### 实现 search 函数
接下来让我们来实现我们的 `search` 函数：
```
fetch() {
...
},
search(query, language) {
return new Promise((resolve, reject) => {
let searchString = `${query} in ${language} site:stackoverflow.com`
google(searchString, (err, res) => {
if (err) {
reject({
reason: 'A search error has occured :('
})
} else if (res.links.length === 0) {
reject({
reason: 'No results found :('
})
} else {
resolve(res.links[0].href)
}
})
})
},
scrape() {
...
}
```
以上代码通过谷歌来搜索一个和指定的关键词以及编程语言相关的 StackOverflow 页面，并返回一个最热门的 URL。让我们看看这是怎样来实现的：
```
let searchString = `${query} in ${language} site:stackoverflow.com`
```
我们使用用户输入的查询和当前所选的语言来构造搜索字符串。比方说，当用户在写 Python 的时候输入“hello world”，查询语句就会变成 `hello world in python site:stackoverflow.com`。字符串的最后一部分是谷歌搜索提供的一个过滤器，它让我们可以将搜索结果的来源限制为 StackOverflow。
```
google(searchString, (err, res) => {
if (err) {
reject({
reason: 'A search error has occured :('
})
} else if (res.links.length === 0) {
reject({
reason: 'No results found :('
})
} else {
resolve(res.links[0].href)
}
})
```
我们将 `google` 方法放在一个 `Promise` 里面，这样我们可以异步地返回我们的 URL。我们会传递由 `google` 返回的所有错误并且会在没有可用的搜索结果的时候返回一个错误。否则我们将通过 `resolve` 来解析最热门结果的 URL。
### 更新 fetch 来使用 search
我们的最后一步是更新 `fetch` 函数来使用 `search` 函数：
```
fetch() {
let editor
let self = this
if (editor = atom.workspace.getActiveTextEditor()) {
let query = editor.getSelectedText()
let language = editor.getGrammar().name
self.search(query, language).then((url) => {
atom.notifications.addSuccess('Found google results!')
return self.download(url)
}).then((html) => {
let answer = self.scrape(html)
if (answer === '') {
atom.notifications.addWarning('No answer found :(')
} else {
atom.notifications.addSuccess('Found snippet!')
editor.insertText(answer)
}
}).catch((error) => {
atom.notifications.addWarning(error.reason)
})
}
}
```
让我们看看发生了什么变化：
- 我们选中的文本现在变成了用户输入的 `query`
- 我们使用 [TextEditor API][21] 来获取当前编辑器选项卡使用的 `language`
- 我们调用 `search` 方法来获取一个 URL，然后通过在得到的 Promise 上调用 `then` 方法来访问这个 URL
我们不在 `download` 返回的 Promise 上调用 `then` 方法，而是在前面 `search` 方法本身链式调用的另一个 `then` 方法返回的 Promise 上面接着调用 `then` 方法。这样可以帮助我们避免[回调地狱][31]
在 [sourcefetch 教程仓库][12] 查看这一步所有的代码更改。
### 测试最终的插件
大功告成了！重新加载 Atom，对一个“问题描述”运行软件包的命令来看看我们最终的插件是否工作，不要忘了在编辑器右下角选择一种语言。
### 下一步
现在你知道怎么去 “hack” Atom 的基本原理了，通过 [分叉 sourcefetch 这个仓库并添加你的特性][13] 来随心所欲地实践你所学到的知识。
--------------------------------------------------------------------------------
via: https://github.com/blog/2231-building-your-first-atom-plugin
作者：[NickTikhonov][a]
译者：[OneNewLife](https://github.com/OneNewLife)
校对：[wxy](https://github.com/wxy)
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
[a]: https://github.com/NickTikhonov
[1]: https://education.github.com/experts
[2]: https://github.com/NickTikhonov/sourcerer
[3]: https://github.com/NickTikhonov/sourcefetch-guide
[4]: https://github.com/NickTikhonov/sourcefetch-tutorial/commit/89e174ab6ec6e270938338b34905f75bb74dbede
[5]: https://atom.io/docs/api/latest/TextEditor
[6]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String
[7]: https://github.com/NickTikhonov/sourcefetch-tutorial/commit/aa3ec5585b0aa049393351a30be14590df09c29a
[8]: https://www.wikipedia.com/en/Document_Object_Model
[9]: https://github.com/NickTikhonov/sourcefetch-tutorial/commit/85992043e57c802ca71ff6e8a4f9c477fbfd13db
[10]: https://github.com/NickTikhonov/sourcefetch-tutorial/commit/896d160dca711f4a53ff5b182018b39cf78d2774
[11]: https://github.com/NickTikhonov/sourcefetch-tutorial/commit/039a1e1e976d029f7d6b061b4c0dac3eb4a3b5d2
[12]: https://github.com/NickTikhonov/sourcefetch-tutorial/commit/aa9d0b5fc4811a70292869730e0f60ddf0bcf2aa
[13]: https://github.com/NickTikhonov/sourcefetch-tutorial
[14]: https://developers.google.com/web/fundamentals/getting-started/primers/promises
[15]: https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol
[16]: https://atom.io/
[17]: https://en.wikipedia.org/wiki/%3F:
[18]: https://atom.io/docs/api/v1.9.4/Panel
[19]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
[20]: https://en.wikipedia.org/wiki/Event-driven_programming
[21]: https://atom.io/docs/api/v1.11.1/TextEditor
[22]: https://www.npmjs.com/
[23]: http://recurial.com/programming/understanding-callback-functions-in-javascript/
[24]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
[25]: https://atom.io/docs/api/v1.11.1/NotificationManager
[26]: https://www.google.com/chrome/
[27]: http://stackoverflow.com/questions/1077347/hello-world-in-python
[28]: http://stackoverflow.com/questions/3463426/in-c-how-should-i-read-a-text-file-and-print-all-strings
[29]: https://www.npmjs.com/package/cheerio
[30]: https://github.com/cheeriojs/cheerio
[31]: http://callbackhell.com/