插件: 修饰文本

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

                                     o888ooooooo     ooooooo     ooooooo   888888     888 888     888 888     888 888888         888     888 888     888 88888ooo888    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.coffeespec/ascii-art-view-spec.coffee, 和 styles/.

下一步,打开 lib/ascii-art.coffee并移除所有View有关的代码,然后它是这样的:

{CompositeDisposable} = require 'atom'module.exports =subscriptions: nullactivate: ->@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 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 with ascii art. When you run our new command with the word "cool" selected, it will be replaced with:

                                     o888ooooooo     ooooooo     ooooooo   888888     888 888     888 888     888 888888         888     888 888     888 88888ooo888    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.coffeespec/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: nullactivate: ->@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 errorconsole.error(error)elseeditor.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.

Atom插件开发入门教程(四)相关推荐

  1. 【直播回顾】蚂蚁金服高级开发工程师萧恺:IDEA 插件开发入门教程

    主讲人:萧恺(蚂蚁金服-支付宝事业群-高级开发工程师) 本名:肖汉松 讲师介绍: 热爱阅读,喜欢挑战,热衷尝试新的技术,关注技术背后的原理. 关注领域:Java 服务端开发,分布式系统 关注语言:Ja ...

  2. 基于jquery插件开发入门教程

    鉴于最近要使用大量的jquery,所以总有一种捣鼓文字来抒发一下情绪的冲动.思前想后就来篇jquery插件开发入门教程吧,毕竟如果不想开发插件,那自己无论用别人的插件多牛逼,最多只是js的使用者,作为 ...

  3. LittleVGL (LVGL)干货入门教程四之制作和使用中文汉字字库

    LittleVGL (LVGL)干货入门教程四之制作和使用中文汉字字库 前言: 阅读前,请确保你至少拥有以下条件: 已实现显示API(教程一已实现, 链接:LittleVGL (LVGL)入门教程一之 ...

  4. virtualxposed使用教程_Xposed 插件开发入门教程(一)

    其实网上已经有很多 Xposed 插件开发的入门教程了,我写的这篇与其说是教程,不如说是参考,为了防止以后忘了开发步骤,这里就写篇博客记录一下. 要使用 Xposed 插件,首先要 root 手机并安 ...

  5. Python+Opencv图像处理新手入门教程(四):视频内容的读取与导出

    一步一步来吧 上一节: Python+Opencv图像处理新手入门教程(三):阈值与二值化 1.Intro 今天这节我们主要看怎么利用opencv读取并处理视频中的内容. 2.VideoCapture ...

  6. (原创)LEON3入门教程(四):基于AMBA APB总线的七段数码管IP核设计

    摘要:这一小节将介绍下如何设计用户自定义的APB IP,并将IP嵌入到SOPC中去.一个APB IP核的主要分为三个部分:逻辑单元.寄存器单元和接口单元.所设计的IP是一个简单的七段数码管显示IP,只 ...

  7. docker 镜像修改的配置文件自动还原_原创 | 全网最实在的docker入门教程四

    作者:潘吉祥 上一篇我们学习了如何使用Dockerfile制作自己的镜像,不过这种方式更像纯粹的运维方式,作为开发者来说,未免有些小繁琐,一个不小心写错些命令就执行失败,我们还不知道错误在哪,这着实有 ...

  8. python画图颜色表示大小变化_python画图(线条颜色、大小、类型:点、虚线等)(图文详细入门教程四)...

    初衷 本人由于平常写论文需要输出一些结果图,但是苦于在网上搜python画图时,详细的教程非常多,但是就是找不到能马上解决自己问题那一行代码,所以打算写一些适合需求简单的朋友应急用的教程,应急就必须方 ...

  9. SpringCloud 入门教程(四): 分布式环境下自动发现配置服务

    前一章, 我们的Hello world应用服务,通过配置服务器Config Server获取到了我们配置的hello信息"hello world". 但自己的配置文件中必须配置co ...

最新文章

  1. CSS中常用中文字体的Unicode编码
  2. 分享android开发过程中用到的一些开源框架
  3. UOS系统下FFmpeg源码编译安装及注意事项
  4. 运维利器:万能的 strace
  5. 从循环引用谈依赖倒置原则
  6. windows和linux命令行一样吗,微软改进Windows命令行 目的是和Linux命令行相抗衡
  7. udemy下载课程无法播放_最好的Udemy Web开发课程+热门免费课程
  8. python在函数外调用变量
  9. 自已开发完美的触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
  10. Webpack的代码分包Vue3中定义异步组件分包refs的使用
  11. flutter UiKitView 加载ios 原生view
  12. swift - 添加定时器
  13. 用python 打开qq自动输入账号密码登陆 (python3 案例1)
  14. Rust 有问有答之 crate 是什么
  15. 高效人士的七个好习惯
  16. 域名解析不生效,提示“未使用阿里云解析”如何解决?
  17. [直流有刷电机步进电机]驱动芯片AS4950完美替代A4950/DRV8870/AT8870/TMI8870/G2057
  18. 强化学习蒙特卡洛3.4 | Every-visit 和 First-visit MC
  19. openjudge-noi-2.6-1775:采药
  20. 计算机网络--自顶向下方法学习笔记

热门文章

  1. 惠普1139一体打印机如何联网打印_连接您的HP无线打印机 | 无线打印中心 | 惠普中国...
  2. android完美实现 拍照 选择图片 剪裁等代码分享
  3. 最新Java面试八股文,1000+面试题答案详解全面看完拿下大厂offer
  4. 【练习题】JAVA课后练习题总结
  5. Nature发布十大年度人物,“量子之父”潘建伟入选
  6. css下拉菜单出现下划线,超帅的CSS菜单导航(当前项带下划线)
  7. ecovrcs扫地机器人怎么升级_扫地机器人的智能化升级之路
  8. U盘连接电脑不显示怎么办?
  9. Vue实战狗尾草博客管理平台第四章
  10. 初学者快速学习Python编程语言指南