插件: 修饰文本
上一篇教程，我们已经开发了一个插件。下面我们来看看我们还能做什么。这篇文章会教你如何用一个简单的命令来替换选中的字符串内容。当你选中命令"cool" 时，下面的字符会替换选中的文字。
o888ooooooooooooooooooooo 888888888 888888 888888 888888 888888 888888 88888ooo888 88ooo8888ooo88 o888o
这将说明怎样去修改文本，同时怎样去处理选中的字符串缓存。
完整代码请详见:/atom/ascii-art.
基本的文本插入
首先, 按下Ctrl+Shift+P调出Command Palette. 输入"generate package" 并选择 "Package Generator: Generate Package" ,输入ascii-art作为插件的名字.
由于这个插件不需要UI,我们可以删除所有和UI有关的代码，并删除lib/ascii-art-view.coffee,spec/ascii-art-view-spec.coffee, 和styles/.
下一步，打开lib/ascii-art.coffee并移除所有View有关的代码，然后它是这样的：
{CompositeDisposable} = require 'atom'module.exports =subscriptions: nullactivate: ->@subscriptions = new CompositeDisposable@subscriptions.add mands.add 'atom-workspace','ascii-art:convert': => @convert()deactivate: ->@subscriptions.dispose()convert: ->console.log 'Convert text!'
创建一个命令
现在让我们添加一个命令。 命名的方法是：用插件名加一个:，然后输入命令名.如你在代码中所见，我们的命令名是ascii-art:convert且我们定义它被执行时，去调用convert()函数。
到此为止,现在仅仅是打印了一行日志。下面，我们来插入一些文字。
convert: ->if editor = atom.workspace.getActiveTextEditor()editor.insertText('Hello, World!')
在上一篇教程中，我们使用atom.workspace.getActiveTextEditor()来获得当前文档编辑窗口的对象指针. 如果调用convert()时，没有当前窗口，那什么都不会发生。
下一步，我们用insertText()来插入一些文本。如果光标在文本框里，将在光标处插入文本；如果有选中的文本，则会替换选中的文本。
重新加载插件
在我们激活之前ascii-art:convert, 我们需要重新加载插件，运行命令 "Window: Reload" 在Command Palette 或按下Alt+Ctrl+R
激活命令
现在打开 Command Palette 并搜索 "Ascii Art: Convert" 命令。但没有发现，是吗？打开package.json查看属性activationCommands. 不预先加载不必要的插件会让Atom启动的更快，移除现有的命令插入ascii-art:convert到activationCommands: 如下图所示
"activationCommands": {"atom-workspace": "ascii-art:convert"}
再次重启窗口，应该好用了吧？
绑定快捷键
现在，我们来给ascii-art:convert绑定一个快捷键。 打开keymaps/ascii-art.cson并添加一个快捷键Alt+Ctrl+A链接ascii-art:convert命令。
代码如下:
'atom-text-editor':'ctrl-alt-a': 'ascii-art:convert'
重新加载窗口，试试快捷键是否好用吧。
警告:Atom快捷键是大小写敏感的。所以a和A是有区别的.a对应的快捷按键是A. 而A对应的是Shift+A. 你也可以用shift-a来绑定Shift+A.
强烈建议开发时，使用小写字母，而需要组合Shift时，用shift-
添加 ASCII Art
现在，我们要用 ASCII art来替换选中的文本。我们会用到npm的figlet模块. 打开package.json并引入最新版的 figlet
"dependencies": {"figlet": "1.0.8"}
使用在Command Palette上运行 "Update Package Dependencies: Update"。这样会自动安装节点依赖.
如果更新失败,你会看到一条信息 "Failed to update package dependencies" 在新建的npm-debug.log文件中，查看文件，能得到更多关于报错的信息。
修改代码如下：
convert: ->if editor = atom.workspace.getActiveTextEditor()selection = editor.getSelectedText()figlet = require 'figlet'font = "O8"figlet selection, {font: font}, (error, art) ->if errorconsole.error(error)elseeditor.insertText("\n#{art}\n")
重新加载并按下Alt+Ctrl+A.试试效果。
回顾一下要点：
editor.getSelectedText()能够获得当前选中的文本。
editor.insertText()插入文本
总结
在这个章节中，我们学习了无界面的插件开发，这对语法审查，代码补全等插件的开发很有帮助。
Package: Modifying Text
Now that we have our first package written, let's go through examples of other types of packages we can make. This section will guide you though creating a simple command that replaces the selected text withascii art. When you run our new command with the word "cool" selected, it will be replaced with:
o888ooooooooooooooooooooo 888888888 888888 888888 888888 888888 888888 88888ooo888 88ooo8888ooo88 o888o
This should demonstrate how to do basic text manipulation in the current text buffer and how to deal with selections.
The final package can be viewed at/atom/ascii-art.
Basic Text Insertion
To begin, pressCtrl+Shift+Pto bring up theCommand Palette. Type "generate package" and select the "Package Generator: Generate Package" command, just as we did inthe section on package generation. Enterascii-artas the name of the package.
Now let's edit the package files to make our ASCII Art package do something interesting. Since this package doesn't need any UI, we can remove all view-related code so go ahead and deletelib/ascii-art-view.coffee,spec/ascii-art-view-spec.coffee, andstyles/.
Next, open uplib/ascii-art.coffeeand remove all view code, so it looks like this:
{CompositeDisposable} = require 'atom'module.exports =subscriptions: nullactivate: ->@subscriptions = new CompositeDisposable@subscriptions.add mands.add 'atom-workspace','ascii-art:convert': => @convert()deactivate: ->@subscriptions.dispose()convert: ->console.log 'Convert text!'
Create a Command
Now let's add a command. You should namespace your commands with the package name followed by a:and then the name of the command. As you can see in the code, we called our commandascii-art:convertand we will define it to call theconvert()method when it's executed.
So far, that will simply log to the console. Let's start by making it insert something into the text buffer.
convert: ->if editor = atom.workspace.getActiveTextEditor()editor.insertText('Hello, World!')
As inCounting Words, we're usingatom.workspace.getActiveTextEditor()to get the object that represents the active text editor. If thisconvert()method is called when not focused on a text editor, nothing will happen.
Next we insert a string into the current text editor with theinsertText()method. This will insert the text wherever the cursor currently is in the current editor. If there are selections, it will replace all selections with the "Hello, World!" text.
Reload the Package
Before we can triggerascii-art:convert, we need to load the latest code for our package by reloading the window. Run the command "Window: Reload" from the Command Palette or by pressingAlt+Ctrl+R.
Trigger the Command
Now open the Command Palette and search for the "Ascii Art: Convert" command. But it's not there! To fix this, openpackage.jsonand find the property calledactivationCommands. Activation commands make Atom launch faster by allowing Atom to delay a package's activation until it's needed. So remove the existing command and useascii-art:convertinactivationCommands:
"activationCommands": {"atom-workspace": "ascii-art:convert"}
First, reload the window by running the command "Window: Reload" from the command palette. Now when you run the "Ascii Art: Convert" command it will insert "Hello, World!" into the active editor, if any.
Add a Key Binding
Now let's add a key binding to trigger theascii-art:convertcommand. Openkeymaps/ascii-art.csonand add a key binding linkingAlt+Ctrl+Ato theascii-art:convertcommand. You can delete the pre-existing key binding since you won't need it anymore.
When finished, the file should look like this:
'atom-text-editor':'ctrl-alt-a': 'ascii-art:convert'
Now reload the window and verify that the key binding works.
Warning:The Atom keymap system iscase-sensitive. This means that there is a distinction betweenaandAwhen creating keybindings.ameans that you want to trigger the keybinding when you pressA. ButAmeans that you want to trigger the keybinding when you pressShift+A. You can also writeshift-awhen you want to trigger the keybinding when you pressShift+A.
Westronglyrecommend always using lowercase and explicitly spelling out when you want to includeShiftin your keybindings.
Add the ASCII Art
Now we need to convert the selected text to ASCII art. To do this we will use thefigletNode module fromnpm. Openpackage.jsonand add the latest version of figlet to the dependencies:
"dependencies": {"figlet": "1.0.8"}
After saving the file, run the command "Update Package Dependencies: Update" from the Command Palette. This will install the package's node module dependencies, only figlet in this case. You will need to run "Update Package Dependencies: Update" whenever you update the dependencies field in yourpackage.jsonfile.
If for some reason this doesn't work, you'll see a message saying "Failed to update package dependencies" and you will find a newnpm-debug.logfile in your directory. That file should give you some idea as to what went wrong.
Now require the figlet node module inlib/ascii-art.coffeeand instead of inserting "Hello, World!", convert the selected text to ASCII art.
convert: ->if editor = atom.workspace.getActiveTextEditor()selection = editor.getSelectedText()figlet = require 'figlet'font = "O8"figlet selection, {font: font}, (error, art) ->if errorconsole.error(error)elseeditor.insertText("\n#{art}\n")
Now reload the editor, select some text in an editor window and pressAlt+Ctrl+A. It should be replaced with a ridiculous ASCII art version instead.
There are a couple of new things in this example we should look at quickly. The first is theeditor.getSelectedText()which, as you might guess, returns the text that is currently selected.
We then call the Figlet code to convert that into something else and replace the current selection with it with theeditor.insertText()call.
Summary
In this section, we've made a UI-less package that takes selected text and replaces it with a processed version. This could be helpful in creating linters or checkers for your code.
