在我們寫完第一個(gè)包之后,讓我們看一看我們能寫出來的其它包的例子。這一節(jié)會(huì)引導(dǎo)你創(chuàng)建一個(gè)簡單的命令來將選中的文字替換為字符畫(ascii art)。在你在單詞“cool”選中的時(shí)候運(yùn)行我們的命令,它會(huì)被替換為:
o888
ooooooo ooooooo ooooooo 888
888 888 888 888 888 888 888
888 888 888 888 888 888
88ooo888 88ooo88 88ooo88 o888o
這個(gè)例子應(yīng)該展示了如何在當(dāng)前的文本緩沖區(qū)做基本的文字操作,以及如何處理選擇。
最后的包在 https://github.com/atom/ascii-art 中查看。
首先按下cmd-shift-P
來彈出命令面板。然后輸入“generate package”并且選擇“Package Generator: Generate Package”命令,就像我們在“包生成器”一節(jié)中做的那樣。輸入ascii-art
作為包的名字。
現(xiàn)在讓我們編輯包中的文件,來讓我們的字符畫包做一些有意思的事情。由于這個(gè)包并不需要任何UI,我們可以把所有視圖相關(guān)的移除,所以可以放心刪除lib/ascii-art-view.coffee
、spec/ascii-art-view-spec.coffee
和styles/
。
接下來,打開lib/ascii-art.coffee
并刪除所有視圖代碼,所以它看起來像這樣:
{CompositeDisposable} = require 'atom'
module.exports =
subscriptions: null
activate: ->
@subscriptions = new CompositeDisposable
@subscriptions.add atom.commands.add 'atom-workspace',
'ascii-art:convert': => @convert()
deactivate: ->
@subscriptions.dispose()
convert: ->
console.log 'Convert text!'
現(xiàn)在讓我們添加一個(gè)命令。強(qiáng)烈建議你為你的命令取一個(gè)命名空間,使用包名后面帶著一個(gè):
。所以你可以看到在代碼中,我們把命令叫做ascii-art:convert
,并且當(dāng)它調(diào)用時(shí)會(huì)調(diào)用convert()
方法。
到目前為止,它只會(huì)在控制臺(tái)中記錄。讓我們使它向文本緩沖區(qū)插入一些字符來開始。
convert: ->
if editor = atom.workspace.getActiveTextEditor()
editor.insertText('Hello, World!')
就像在“字?jǐn)?shù)統(tǒng)計(jì)”中那樣,我們使用atom.workspace.getActiveTextEditor()
來獲取表示當(dāng)前活動(dòng)編輯器的對象。如果convert()
方法在沒有編輯器獲取焦點(diǎn)時(shí)調(diào)用,它會(huì)簡單地返回一個(gè)空白的字符串,所以我們可以跳過下一行。
接下來我們使用insertText()
方法,向當(dāng)前的文本編輯器插入一個(gè)字符串。無論光標(biāo)當(dāng)前在編輯器的哪里,都會(huì)在光標(biāo)處插入文本。如果有文本被選中,會(huì)把選中文本替換成“Hello, World!”文本。
在我們能夠觸發(fā)ascii-art:convert
之前,我們需要通過重新加載窗口,來加載我們的包的最新代碼。從命令面板或按下ctrl-alt-cmd-l
來運(yùn)行“Window: Reload”命令。
現(xiàn)在可以打開命令面板并搜索“Ascii Art: Convert”命令了。但是根本找不到。要修正它,打開package.json
并找到activationCommands
屬性?;顒?dòng)命令通過在命令不使用時(shí)延遲它們的加載,來加快Atom的啟動(dòng)。所以把現(xiàn)有的命令移除,并在activationCommands
中添加ascii-art:convert
:
"activationCommands": {
"atom-workspace": "ascii-art:convert"
}
首先,通過命令面板中的“Window: Reload”命令重新加載窗口,現(xiàn)在你可以執(zhí)行“Ascii Art: Convert”命令了,它會(huì)輸出“Hello, World!”。
現(xiàn)在我們來添加用于觸發(fā)“ascii-art:convert”命令的快捷鍵。打開keymaps/ascii-art.cson
,添加一個(gè)鍵綁定來將ctrl-alt-a
鏈接到ascii-art:convert
命令上。由于你不需要預(yù)設(shè)的鍵綁定,你可以刪除它們。
完成之后它應(yīng)該像這樣:
'atom-text-editor':
'ctrl-alt-a': 'ascii-art:convert'
現(xiàn)在重新加載窗口,并驗(yàn)證快捷鍵是否工作。
現(xiàn)在我們需要將被選字符轉(zhuǎn)換為字符畫。為了完成它我們使用npm中的figlet
node模塊。打開package.json
,添加figlet的最新版本到dependencies
中:
"dependencies": {
"figlet": "1.0.8"
}
保存文件之后從命令面板運(yùn)行“Update Package Dependencies: Update”。這會(huì)自動(dòng)安裝包的node模塊依賴,在這個(gè)例子中只有figlet。無論什么時(shí)候你更新了package.json
文件中的dependencies
字段,你都要需要運(yùn)行“Update Package Dependencies: Update”命令。
如果由于某種原因沒有生效,你會(huì)看到“Failed to update package dependencies”這樣的消息,并且會(huì)找到一個(gè)你的目錄下有個(gè)新的npm-debug.log
文件。這個(gè)文件會(huì)告訴你具體哪里有錯(cuò)誤。
現(xiàn)在在lib/ascii-art.coffee
中請求(require)figlet
node模塊,并且將被選文本轉(zhuǎn)換成字符畫來代替插入“Hello, World!”。
convert: ->
if editor = atom.workspace.getActiveTextEditor()
selection = editor.getSelectedText()
figlet = require 'figlet'
font = "o8"
figlet selection, {font: font}, (error, art) ->
if error
console.error(error)
else
editor.insertText("\n#{art}\n")
重新加載編輯器,選擇編輯器窗口中的一些文本,并按下ctrl-alt-a
,取而代之的是,它會(huì)被替換成一個(gè)滑稽的字符畫版本。
在這個(gè)例子中,我們需要快速查看一些新的東西。首先是editor.getSelectedText()
,像你猜的那樣,返回當(dāng)前選中的文本。
之后我們調(diào)用Figlet的代碼,來將它轉(zhuǎn)換成別的東西,并使用editor.insertText()
用它替換當(dāng)前選中的文本。
在這一節(jié)中,我們編寫了一個(gè)無UI的包,用于獲取選中文本并替換為處理過的版本。它可能會(huì)對創(chuàng)建文本提示和檢查工具有幫助。
更多建議: