Atom插件开发入门教程(四)

插件: 修饰文本

上一篇教程，我们已经开发了一个插件。下面我们来看看我们还能做什么。这篇文章会教你如何用一个简单的命令来替换选中的字符串内容。当你选中命令"cool" 时，下面的字符会替换选中的文字。

                                     o888
    ooooooo     ooooooo     ooooooo   888
  888     888 888     888 888     888 888
  888         888     888 888     888 888
    88ooo888    88ooo88     88ooo88  o888o

这将说明怎样去修改文本，同时怎样去处理选中的字符串缓存。

完整代码请详见: https://github.com/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: null

  activate: ->
    @subscriptions = new CompositeDisposable
    @subscriptions.add atom.commands.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 error
        console.error(error)
      else
        editor.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 with ascii art. When you run our new command with the word "cool" selected, it will be replaced with:

                                     o888
    ooooooo     ooooooo     ooooooo   888
  888     888 888     888 888     888 888
  888         888     888 888     888 888
    88ooo888    88ooo88     88ooo88  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 https://github.com/atom/ascii-art.

Basic Text Insertion

To begin, press Ctrl+Shift+P to bring up the Command Palette. Type "generate package" and select the "Package Generator: Generate Package" command, just as we did in the section on package generation. Enter ascii-art as 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, and styles/.

Next, open up lib/ascii-art.coffee and remove all view code, so it looks like this:

{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!'

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 command ascii-art:convert and we will define it to call the convert() 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 in Counting Words, we're using atom.workspace.getActiveTextEditor() to get the object that represents the active text editor. If this convert() method is called when not focused on a text editor, nothing will happen.

Next we insert a string into the current text editor with the insertText() 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 trigger ascii-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 pressing Alt+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, open package.json and find the property called activationCommands. 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 use ascii-art:convert inactivationCommands:

"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 the ascii-art:convert command. Open keymaps/ascii-art.cson and add a key binding linking Alt+Ctrl+A to the ascii-art:convert command. 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 is case-sensitive. This means that there is a distinction between a and A when creating keybindings. a means that you want to trigger the keybinding when you press A. But A means that you want to trigger the keybinding when you press Shift+A. You can also write shift-a when you want to trigger the keybinding when you press Shift+A.

We strongly recommend always using lowercase and explicitly spelling out when you want to include Shift in your keybindings.

Add the ASCII Art

Now we need to convert the selected text to ASCII art. To do this we will use the figlet Node module from npm. Open package.json and 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 your package.json file.

If for some reason this doesn't work, you'll see a message saying "Failed to update package dependencies" and you will find a new npm-debug.log file in your directory. That file should give you some idea as to what went wrong.

Now require the figlet node module in lib/ascii-art.coffee and 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 error
        console.error(error)
      else
        editor.insertText("\n#{art}\n")

Now reload the editor, select some text in an editor window and press Alt+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 the editor.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.