最近啊,我投奔了网页的开发,看了一本《head first HTML and CSS》的书,感受很是不错,而后又配置了一些vim里面用到的插件,如今我把学习到的东西记录下来!html
首先,我不会在这里写emmet 的具体操做方法,你能够去官方本身看教程,若是英语很差的话,那么看这个朋友的博文,他把用到的教程都翻译成了中文http://www.cnblogs.com/matchless/tag/emmet/html5
若是你试过在一个html文件中插入一个html5的模板,你就发现他的格式以下git
ps: 在插入模式输入 html:5 按下默认的快捷键,github
是否是感受很是蛋疼,这个模板出现后,光标默认出如今body 标签之间,看到了吗?json
后来我改了一下,变成了以下这个样子vim
ps:你会发现,上面那个模板是没有给出标题的(title元素里面没有内容,可是光标又在body里面,因此你每次都要把光标移动到title这里,是否是很蛋疼)app
我改了一下, 你能够按照我改后的模式输入 html:5{这个填写的是title的内容}less
如图所示编辑器
按下默认的快捷键后,当当当当....................函数
看到了把,这就是我修改的成果,接下来,给出方法
提醒一下,我我的是不会用vimscript的,可是我看过一点,因此我能多多少少理解用vimscript写成的函数的功能是什么。
并且,若是你想本身动手修改的话,请把emmet相关的文档教程看完,否则你不懂得为何这样作
官方上给出了一个订制的简单教程,说是用到 xxx.json 之类的文件,在这里我要提醒你,vim是不须要下载这类文件来订制的,他说的估计是sublime text之类的编辑器
那么咱们该怎么修改呢?
其实,他的配置文件放在了emmet-vim/autoload/emmet.vim 这个文件里面,用编辑器打开 emmet.vim这个文件,在1420左右看到了 默认的html5模板
注意,因为个人默认模板被我改了,因此我去github给出了默认的模板
下图是个人修改
你修改的时候要出去 最左边的 符号 ”\“ 不能去掉,去掉会出错,而后说一下怎么配置, 符号 ”|“ 这个表示插入模板后光标出现的位置,${child} 这个的意思是 放入相关的内容,
例如 a{xxxx} ${child} =xxx html:{xxxxxx} ${child}=xxxx ,因此你只要在模板里面调整一下${child}的位置,就能很方便的插入标题的名字
ps:原来默认的是插入html5模板只能这么用,并且不是自动插入标题
html:5
个人能够这么用
html:5{标题}
是否是很方便,
最后说一下快捷键的设置
在默认设置中,大部分命令都用到的快捷键是这个
<c-y> , 他的意思是 按下ctrl 键 和 y键 和 ,键(逗号)
可是我以为每次都输入那么多很麻烦,因此我写了一个mapping,把<c-y>改为了 F2,放在.vimrc文件里面
let g:user_emmet_leader_key = '<F2>' "设置一下快捷键
为何是这样设置呢?我在这里就不说了 ,请看一下文档就懂了,
我接下来的目标是学会了vimscript后,就开始写一个函数,让vim检测到文件名是.html的时候自动插入html5模板~!
好了 加油了