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

準備

教程須知

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. 按下回車鍵來生成這個骨架代碼包，它會自動在 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 教程倉庫 查看這一步的所有代碼更改。

本文地址：http://www.linuxprobe.com/first-atom-editor.html