摘要:注意本文目的不在開發(fā)一個(gè)什么什么插件,只告訴你如何進(jìn)行開發(fā)注下文并無太多代碼,代碼建議到你新建一個(gè)模版插件然后你就擁有了所有的代碼,然后根據(jù)下文加深自己的理解,相信你會(huì)看懂它。開始開發(fā)入口文件有個(gè)方法釋放資源的方法不要做其他事情。
atom高級(jí)用法???除了自定義功能基本沒啥好玩,抱著裝逼的想法,搜了一波atom插件入門,發(fā)現(xiàn)說得太迷糊(可能是我太菜),然后打開了官網(wǎng)的插件文檔,細(xì)細(xì)的閱讀起來,憑著蹩腳的英語水平也算看懂了大概,索性就翻譯下來(因?yàn)樗训降闹形腶tom飛行手冊(cè),插件篇是空的),希望憑著自己的理解,能寫得更通俗。讓有心人能看懂官方模版代碼。(注意:本文目的不在開發(fā)一個(gè)什么什么插件,只告訴你如何進(jìn)行開發(fā))
注:下文并無太多代碼,代碼建議到你新建一個(gè)模版插件(然后你就擁有了所有的代碼),然后根據(jù)下文加深自己的理解,相信你會(huì)看懂它。
Atom插件編寫指南(官方文檔翻譯)使用package-generator
ctrl-shift-p 打開命令輸入框輸入package-generator就可以找到該命令
插件中的package.json文件基本和 node 的package.json相同.
atom獨(dú)有的屬性:
main:你的package的入口js文件路徑,如果沒有,默認(rèn)使用index.coffe或者index.js
styles: 一個(gè)字符串?dāng)?shù)組,決定樣式加載的順序,默認(rèn)字母順序
keymaps: 一個(gè)字符串?dāng)?shù)組,鍵盤映射的加載順序,默認(rèn)字母
menus: 一個(gè)字符串?dāng)?shù)組,菜單映射順序,默認(rèn)字母
snippet : 字符串?dāng)?shù)組,默認(rèn)字母
activationCommands : 一個(gè)對(duì)象,可以辨別觸發(fā)激活你的包的命令,鍵是css選擇器,值是一個(gè)字符串命令數(shù)組,只有其中一個(gè)命令在規(guī)定的css范圍內(nèi)觸發(fā),atom才會(huì)加載你的包,如果不指定,你的入口文件的activate()方法會(huì)在包加載后調(diào)用,
activationHooks: 不是很懂,大概是使用什么語法去解釋腳本(推薦到觀看英文版本)
源代碼如果你想繼承atom的行為,你的package應(yīng)該包含一個(gè)單一的[top-level]頂級(jí)模塊(就是你package.json里面 main 指定的模塊),你的代碼應(yīng)該寫在lib目錄下,然后requiredmain 指定的文件(用官方插件生成的模版中 mian 指定的就是頂級(jí)模塊) 如果你再package.json 里面沒有配置,就會(huì)默認(rèn)認(rèn)為是 index.js 是主入口;
頂級(jí)模塊是一個(gè)管理你的插件的生命周期的單一對(duì)象,無論你的插件創(chuàng)建了多少個(gè)視圖,添加到哪個(gè)位置,這全部都有頂級(jí)模塊管理
頂級(jí)模塊可以實(shí)現(xiàn)下面的方法
- activate(state): 插件激活時(shí)被調(diào)用。如果你實(shí)現(xiàn)了 serialize() 接口,它會(huì)傳遞窗口上次的state. 一般用這個(gè)接口來初始化插件。 - initialize(state): (Atom 1.14以后的版本支持) 與activate() 功能類似,不過被調(diào)用的更早,可以說在所有操作之前被調(diào)用。 如果你想等環(huán)境運(yùn)行完畢了再初始化,請(qǐng)用 activate() 。如果需要在畫面構(gòu)造前執(zhí)行什么,請(qǐng)用initialize() 。 - serialize(): 在窗口被關(guān)閉的時(shí)候,允許你返回 JSON 序列,來保存當(dāng)前的狀態(tài)。你保存的信息,可以傳遞給activate() 接口,來在下次啟動(dòng)時(shí)恢復(fù)你的窗口狀態(tài)。 - deactivate(): 窗口關(guān)閉時(shí)會(huì)調(diào)用這個(gè)接口,如果你的插件正在使用某些資源,或關(guān)聯(lián)著某些文件,請(qǐng)?jiān)谶@里釋放他們。style-sheels
你的樣式應(yīng)該寫在styles里,當(dāng)你的包激活的時(shí)候,在這個(gè)目錄的任何樣式都會(huì)被加載,你可以查看atom的ui組件執(zhí)行styleguide命令.如果你不需要樣式文件保留就好,如果你要指定顏色和大小,請(qǐng)使用主題提供的變量(這里有點(diǎn)麻煩,還要去查看其它的文檔).
keymaps指定快捷鍵,會(huì)coffeeScript 或者 json 語法,一看就懂.
menus
context-menu 定義右鍵菜單,一看就懂
"context-menu": { "atom-text-editor": [ { "label": "Toggle your-name-word-count", "command": "your-name-word-count:toggle" } ] }
menu 定義導(dǎo)航菜單,同上,有json基礎(chǔ)的基本一看就懂。
開始開發(fā)
入口js文件有4個(gè)方法,activate(),deactivate(),serialize(),toggle();
deactivate(); 釋放資源的方法,不要做其他事情。
serialize(); 序列化方法,做一些狀態(tài)保存的工作,不要做其他事情.
activate(); 唯一需要激活的方法,在atom加載后會(huì)自動(dòng)執(zhí)行
主方法的toggle方法不會(huì)自動(dòng)執(zhí)行,需要手動(dòng)執(zhí)行.
CompositeDisposable class 注冊(cè)插件中可以被調(diào)用的命令.
本例子中toggle方法只是簡單的顯示畫面與隱藏畫面.
the flow (atom啟動(dòng)流程)啟動(dòng)atom
加載paceage
atom read your package.json
atom loads styles menus keymaps main module
atom finishs loading package
在某個(gè)點(diǎn),用戶觸發(fā)了你的toggle命令
atom執(zhí)行你的激活方法(avtitave);
atom執(zhí)行toggle方法.
在某個(gè)時(shí)候,用戶有觸發(fā)了你的toggle命令
atom又執(zhí)行你的toggle方法
最后atom會(huì)關(guān)閉任何你定義的序列化
當(dāng)你不使用actitaveCommand這個(gè)屬性時(shí) 執(zhí)行的順序會(huì)有所不同
開始修改
繼承atomUI 即繪制自己的ui addModalPanel();
this.modalPanel = atom.workspace.addModalPanel({ item: this.commentHighlightView.getElement(), visible: false });
繼承ui方法2:你還可以把上面的item 添加到workspace上去;
tree view, console debugger, outline view 等等面板都是用這個(gè)實(shí)現(xiàn)的;
const edit = atom.workspace.getActiveTextEditor(); 獲取當(dāng)前編輯器對(duì)象
edit.getText(); 獲取所有文本
edit.insertText(); 如果選中了文本這個(gè)方法會(huì)替換文本,如果沒有則在光標(biāo)處添加文本;
edit.getSelectedText(); 明顯是獲取到選擇到的文本
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/96243.html
摘要:內(nèi)容包括翻譯環(huán)境搭建項(xiàng)目管理與自動(dòng)化構(gòu)建三部分。博客首頁聲明官方文檔翻譯稿發(fā)布托管在七牛上的翻譯文檔倉庫環(huán)境搭建翻譯與寫作一樣,首要之事均為專注于翻譯寫作本身,而不考慮樣式等方面。安裝完成后,運(yùn)行即可在啟動(dòng)一個(gè)本地的。 感興趣的同學(xué)可以關(guān)注這個(gè)翻譯項(xiàng)目 、 我的博客原文 和 我的Github showImg(/img/remote/1460000006776466); 前段時(shí)間翻譯的S...
摘要:前言初衷以系列故事的方式展現(xiàn)源碼邏輯,盡可能以易懂的方式講解源碼本系列文章用故事解讀源碼一用故事解讀源碼二用故事解讀源碼三用故事解讀源碼四裝飾器和用故事解讀源碼五文章編排每篇文章分成兩大段,第一大段以簡單的偵探系列故事的形式講解所涉及人物場 ================前言=================== 初衷:以系列故事的方式展現(xiàn) MobX 源碼邏輯,盡可能以易懂的方式...
摘要:在這個(gè)編輯器中,和是其中排名靠前的兩個(gè)。是一個(gè)免費(fèi)的輕量級(jí)編輯器和,用于和開發(fā)。對(duì)于免費(fèi)的代碼編輯器來說,是一個(gè)很好的選擇。可以安裝兩個(gè)命令行實(shí)用程序,用于從啟動(dòng)編輯器,用于管理的軟件包。 對(duì)于JavaScript程序員來說,目前有很多很棒的工具可供選擇。本文將會(huì)討論10個(gè)優(yōu)秀的支持javascript,HTML5和CSS開發(fā),并且可以使用Markdown進(jìn)行文檔編寫的文本編輯器。為什...
摘要:也沒有一個(gè)比較好的方式運(yùn)行的服務(wù)每次的時(shí)候都需要啟動(dòng)一個(gè)的服務(wù),這樣就會(huì)降低開發(fā)的效率。還好有是專門為開發(fā)的。擁有更好的語法補(bǔ)全,類型檢查等其實(shí)是在的基礎(chǔ)上的一系列的插件集,是打造的下一代編程開發(fā)利器,是一個(gè)完全用開發(fā)的編輯器。 做React Native開發(fā)的時(shí)候,沒有一個(gè)好用的IDE,Android Studio打開Android下的項(xiàng)目還可以,JS部分的代碼打開并不方便,xcod...
閱讀 2472·2021-11-24 09:39
閱讀 3518·2019-08-30 15:53
閱讀 594·2019-08-29 15:15
閱讀 2903·2019-08-26 13:23
閱讀 3212·2019-08-26 10:48
閱讀 643·2019-08-26 10:31
閱讀 748·2019-08-26 10:30
閱讀 2359·2019-08-23 18:32