想擁有自己的 Atom 文本編輯器插件嗎?

這篇教程将會教你怎麼制作你的第一個 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 是否已經正确安裝好，安裝成功的話列印出來的工具版本和相關環境資訊應該是像這樣的：

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

生成骨架代碼

讓我們使用 Atom 提供的一個實用工具建立一個新的 package（軟體包）來開始這篇教程。

1. 啟動編輯器，按下 Cmd+Shift+P（MacOS）或者 Ctrl+Shift+P（Windows/Linux）來打開指令面闆。
2. 搜尋“Package Generator: Generate Package”并點選清單中正确的條目，你會看到一個輸入提示，輸入軟體包的名稱：“sourcefetch”。
3. 按下Enter鍵來生成這個骨架代碼包，它會自動在 Atom 中打開。

如果你在側邊欄沒有看到軟體包的檔案，依次按下 Cmd+K Cmd+B（MacOS）或者 Ctrl+K Ctrl+B（Windows/Linux）。

指令面闆可以讓你通過模糊搜尋來找到并運作軟體包。這是一個執行指令比較友善的途徑，你不用去找導航菜單，也不用刻意去記快捷鍵。我們将會在整篇教程中使用這個方法。

運作骨架代碼包

在開始程式設計前讓我們來試用一下這個骨架代碼包。我們首先需要重新開機 Atom，這樣它才可以識别我們新增的軟體包。再次打開指令面闆，執行 Window: Reload 指令。

重新加載目前視窗以確定 Atom 執行的是我們最新的源代碼。每當需要測試我們對軟體包的改動的時候，就需要運作這條指令。

通過導航到編輯器菜單的 Packages > sourcefetch > Toggle 或者在指令面闆執行 sourcefetch:toggle 來運作軟體包的 toggle 指令。你應該會看到螢幕的頂部出現了一個小黑窗。再次運作這條指令就可以隐藏它。

“toggle”指令

打開 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（一個由 Atom API 提供的 UI 元素） 的一個執行個體。我們需要在 export default 内部聲明 modalPanel 才可以讓我們通過一個執行個體變量 this 來通路它。

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

上面的語句讓 Atom 在使用者運作 sourcefetch:toggle 的時候執行 toggle 方法。我們指定了一個 匿名函數 () => this.toggle()，每次執行這條指令的時候都會執行這個函數。這是事件驅動程式設計（一種常用的 JavaScript 模式）的一個範例。

Atom 指令

指令隻是使用者觸發事件時使用的一些字元串辨別符，它定義在軟體包的命名空間内。我們已經用過的指令有：

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

軟體包對應到指令，以執行代碼來響應事件。

進行你的第一次代碼更改

讓我們來進行第一次代碼更改——我們将通過改變 toggle 函數來實作逆轉使用者選中文本的功能。

改變 “toggle” 函數

如下更改 toggle 函數。

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

測試你的改動

1. 通過在指令面闆運作 Window: Reload 來重新加載 Atom。
2. 通過導航到 File > New 來建立一個新檔案，随便寫點什麼并通過光标選中它。
3. 通過指令面闆、Atom 菜單或者右擊文本然後選中 Toggle sourcefetch 來運作 sourcefetch:toggle 指令。

更新後的指令将會改變選中文本的順序：

在 sourcefetch 教程倉庫 檢視這一步的全部代碼更改。

原文來自：https://linux.cn:443/article-7865-1.html

本文位址：https://www.linuxprobe.com/first-atom-editor.html編輯員：蘇西雲，稽核員：逄增寶

本文原創位址：https://www.linuxprobe.com/first-atom-editor.html