天天看點

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

作者:IT小英雄
這篇教程将會教你怎麼制作你的第一個 Atom 文本編輯器的插件。我們将會制作一個山寨版的 Sourcerer,這是一個從 StackOverflow 查詢并使用代碼片段的插件。到教程結束時,你将會制作好一個将程式設計問題(用英語描述的)轉換成擷取自 StackOverflow 的代碼片段的插件,像這樣:
想擁有自己的 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. 按下Enter鍵來生成這個骨架代碼包,它會自動在 Atom 中打開。

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

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

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

運作骨架代碼包

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

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

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

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

“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 指令。

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

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

在 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

繼續閱讀