打code时如何减少手动挪光标的次数&&emmet增加自定义片段的方法。

写在前面:(可以直接看文未的方法)

web程序员应该都知道emmet有多好用。打code如飞,不知道的只可以去看看我的另一篇有emmet相关介绍的文档 .在使用一段时间后发现一个问题,诸如:<%%>,没有快捷的输入方法,这对符号,我细

数了一下,在先打头跟尾再把光标移动回中间的情况下要敲9个键。相信学ruby-on-rials的人都知道,这个符号是经常要作用的!所以我在想能否有快捷的输入,比如能:输入%+tab键自动补全这对符号,并把光标停留在中间,那就太完美了!于是我开始寻找答案……

探索过程:(可直接忽略)
配置atom:
  • 在atom内建的增加snippets的方法来实现,亲测有效,方法如下:(但:打开emmet后会被覆盖。)
    注意:不开emmet的时候完美使用,开了emmet后这个方法无效,会补emmet原生默认的定义给覆盖掉。

然后,我又开始找解决这种冲突的方法,最后我发现,最直接的方法就是直接在emmet上增加snippets.

解决问题之路:
  • google了一圈发现全网竟然没有一篇可行的确定的教程,最ok的教程也只是跟你说有这么一个方法可以增加snippets来实现,但是没有给出具体方法。只是给了官方文档的链接。

  • 官方文档只是跟你说了一堆杂七杂八的东西,然后关于怎么配置,一点儿也没有说。只是说这个东西需要自己来创建。后来算是找到了一个文件,但作者提供的路径我们根本找不到,(有可能是sublime的,但是我们用的是atom)自己创建一个文件加 路径后,无效!

  • 网上关于这个的99.9%的教程都不是mac下的atom下的emmet。大多不适用。
  • 能试的都试过了,甚至连下方中的正确方法都试过了,但是当时竟然没有成功,现在写这个教程的时候还在无限纳闷……

  • 就这样一直在网络上游荡……就像警察抓小偷一样,明明有一点线索了但就是找不到一个完整的可行的方法!试多了,错多了,时间也折腾多了,就崩溃了,是的,我崩溃了,那一刻我多么想,不要再为这个浪费时间了,事实上我已经疯狂地追踪了十个小时了!真想找个人过来,给他点钱,帮我做出来,可以有钱也没有用啊,去哪里找??

  • 最后, 我用google翻译,发邮件给emmet原作者,两天后竟然回复了,给了一些提示,我抱着试一试的态度,竟然成功了!
这个方法来得太不容易了……!

方法如下:

  1. 打开preferences,快捷键:+,
    点击进入emmet,
    代码在这里,请跟着复制粘贴:


"%": "<%| %>",

ok!保存,重启atom,实现你的打code如飞吧!

###### 重要提示:请在html里使用方法,在其他文件无效!

###### 重要提示:请在html里使用方法,在其他文件无效!

###### 重要提示:请在html里使用方法,在其他文件无效!

#### 演示:

展开后光标会停留在中间……

再补充几点:基本就不用怎么手动挪光标了……
(基本就可以很少去挪动光标了)
  1. 用上面的方法,再增加一个我们学ROR经常用的片段:"a": "<a href=\"|\" ></a>",(请用复制粘贴),这一次放在位置不一样:

  2. 多用+return,作用:无论你的光标在什么位置,快速在下面切入新的一行。
  3. 多用+shift+return,作用:无论光标位置,快速在上方切入新的一行。
  4. 多掌握一些emmet的内建功能:比如:(试着自己操作感受下,请用复制粘贴的,输完按tab键,看看展开的结果。)

写在后面:

  • 助教和老师都不赞成新手用这种偷懒的方式,新手请一个字一个字的打。李笑来老师甚至不太赞成新手用atom,sublime这种高级的编辑器!
  • 你也可以用这个方法增加你自己代码段!
comments powered by Disqus