開始開發atom插件（並沒有系列）

atom高級用法？？？除了自定義功能基本沒啥好玩，抱着裝逼的想法，搜了一波atom插件入門，發現說得太迷糊（多是我太菜），而後打開了官網的插件文檔，細細的閱讀起來，憑着蹩腳的英語水平也算看懂了大概，索性就翻譯下來（由於搜到的中文atom飛行手冊，插件篇是空的），但願憑着本身的理解，能寫得更通俗。讓有心人能看懂官方模版代碼。（注意：本文目的不在開發一個什麼什麼插件，只告訴你如何進行開發）

注：下文並沒有太多代碼，代碼建議到你新建一個模版插件（而後你就擁有了全部的代碼），而後根據下文加深本身的理解，相信你會看懂它。

---

Atom插件編寫指南(官方文檔翻譯)

• 使用package-generator
• ctrl-shift-p 打開命令輸入框輸入package-generator就能夠找到該命令

插件中的package.json文件

• 基本和 node 的package.json相同.

• atom獨有的屬性:

  • main:你的package的入口js文件路徑,若是沒有,默認使用index.coffe或者index.js
  • styles: 一個字符串數組,決定樣式加載的順序,默認字母順序
  • keymaps: 一個字符串數組,鍵盤映射的加載順序,默認字母
  • menus: 一個字符串數組,菜單映射順序,默認字母
  • snippet : 字符串數組,默認字母
  • activationCommands : 一個對象,能夠辨別觸發激活你的包的命令,鍵是css選擇器,值是一個字符串命令數組,只有其中一個命令在規定的css範圍內觸發,atom纔會加載你的包,若是不指定,你的入口文件的activate()方法會在包加載後調用,
  • activationHooks: 不是很懂,大概是使用什麼語法去解釋腳本(推薦到觀看英文版本)

源代碼

• 若是你想繼承atom的行爲,你的package應該包含一個單一的[top-level]頂級模塊（就是你package.json裏面 main 指定的模塊）,你的代碼應該寫在lib目錄下,而後requiredmain 指定的文件(用官方插件生成的模版中 mian 指定的就是頂級模塊) 若是你再package.json 裏面沒有配置，就會默認認爲是 index.js 是主入口;
• 頂級模塊是一個管理你的插件的生命週期的單一對象,不管你的插件建立了多少個視圖,添加到哪一個位置,這所有都有頂級模塊管理

• 頂級模塊能夠實現下面的方法

  - activate(state): 插件激活時被調用。若是你實現了 serialize() 接口，它會傳遞窗口上次的state. 通常用這個接口來初始化插件。
  - initialize(state): (Atom 1.14之後的版本支持) 與activate() 功能相似，不過被調用的更早，能夠說在全部操做以前被調用。 若是你想等環境運行完畢了再初始化，請用 activate() 。若是須要在畫面構造前執行什麼，請用initialize() 。
  - serialize(): 在窗口被關閉的時候，容許你返回 JSON 序列，來保存當前的狀態。你保存的信息，能夠傳遞給activate() 接口，來在下次啓動時恢復你的窗口狀態。
  - deactivate(): 窗口關閉時會調用這個接口，若是你的插件正在使用某些資源，或關聯着某些文件，請在這裏釋放他們。

style-sheels

• 你的樣式應該寫在styles裏,當你的包激活的時候,在這個目錄的任何樣式都會被加載,你能夠查看atom的ui組件執行styleguide命令.若是你不須要樣式文件保留就好,若是你要指定顏色和大小,請使用主題提供的變量（這裏有點麻煩，還要去查看其它的文檔）.

keymaps

• 指定快捷鍵,會coffeeScript 或者 json 語法,一看就懂.

menus

• context-menu 定義右鍵菜單,一看就懂

  "context-menu": {
  "atom-text-editor": [
     {
       "label": "Toggle your-name-word-count",
       "command": "your-name-word-count:toggle"
     }
    ]
   }

• menu 定義導航菜單,同上，有json基礎的基本一看就懂。

開始開發

• 入口js文件有4個方法,activate(),deactivate(),serialize(),toggle();

  • deactivate(); 釋放資源的方法,不要作其餘事情。
  • serialize(); 序列化方法,作一些狀態保存的工做,不要作其餘事情.
  • activate(); 惟一須要激活的方法,在atom加載後會自動執行
• 主方法的toggle方法不會自動執行,須要手動執行.
• CompositeDisposable class 註冊插件中能夠被調用的命令.
• 本例子中toggle方法只是簡單的顯示畫面與隱藏畫面.

the flow (atom啓動流程)

1. 啓動atom
2. 加載paceage
3. atom read your package.json
4. atom loads styles menus keymaps main module
5. atom finishs loading package
6. 在某個點,用戶觸發了你的toggle命令
7. atom執行你的激活方法(avtitave);
8. atom執行toggle方法.
9. 在某個時候,用戶有觸發了你的toggle命令
10. atom又執行你的toggle方法
11. 最後atom會關閉任何你定義的序列化

當你不使用actitaveCommand這個屬性時 執行的順序會有所不一樣

開始修改

• 繼承atomUI 即繪製本身的ui addModalPanel();

  this.modalPanel = atom.workspace.addModalPanel({
    item: this.commentHighlightView.getElement(),
    visible: false
  });

• 繼承ui方法2:你還能夠把上面的item 添加到workspace上去;

  • tree view， console debugger， outline view 等等面板都是用這個實現的;
• const edit = atom.workspace.getActiveTextEditor(); 獲取當前編輯器對象
• edit.getText(); 獲取全部文本
• edit.insertText(); 若是選中了文本這個方法會替換文本,若是沒有則在光標處添加文本;
• edit.getSelectedText(); 明顯是獲取到選擇到的文本