emmet-vim
最近啊,我投奔了網(wǎng)頁的開發(fā),看了一本《head first HTML and CSS》的書,感覺非常不錯,然后又配置了一些vim里面用到的插件,現(xiàn)在我把學習到的東西記錄下來!
首先,我不會在這里寫emmet 的具體操作方法,你可以去官方自己看教程,如果英語不好的話,那么看這個朋友的博文,他把用到的教程都翻譯成了中文http://www.cnblogs.com/matchless/tag/emmet/
如果你試過在一個html文件中插入一個html5的模板,你就發(fā)現(xiàn)他的格式如下
ps: 在插入模式輸入 html:5? 按下默認的快捷鍵,
是不是感覺非常蛋疼,這個模板出現(xiàn)后,光標默認出現(xiàn)在body 標簽之間,看到了嗎?
后來我改了一下,變成了如下這個樣子
ps:你會發(fā)現(xiàn),上面那個模板是沒有給出標題的(title元素里面沒有內(nèi)容,但是光標又在body里面,所以你每次都要把光標移動到title這里,是不是很蛋疼)
我改了一下, 你可以按照我改后的模式輸入 html:5{這個填寫的是title的內(nèi)容}
如圖所示
按下默認的快捷鍵后,當當當當....................
看到了把,這就是我修改的成果,接下來,給出方法
提醒一下,我個人是不會用vimscript的,但是我看過一點,所以我能多多少少理解用vimscript寫成的函數(shù)的功能是什么。
而且,如果你想自己動手修改的話,請把emmet相關(guān)的文檔教程看完,不然你不懂得為什么這樣做
官方上給出了一個訂制的簡單教程,說是用到? xxx.json 之類的文件,在這里我要提醒你,vim是不需要下載這類文件來訂制的,他說的估計是sublime text之類的編輯器
那么我們該怎么修改呢?
其實,他的配置文件放在了emmet-vim/autoload/emmet.vim 這個文件里面,用編輯器打開 emmet.vim這個文件,在1420左右看到了 默認的html5模板
注意,由于我的默認模板被我改了,所以我去github給出了默認的模板
下圖是我的修改
你修改的時候要出去 最左邊的 符號 ”\“? 不能去掉,去掉會出錯,然后說一下怎么配置, 符號 ”|“ 這個表示插入模板后光標出現(xiàn)的位置,${child} 這個的意思是 放入相關(guān)的內(nèi)容,
例如 a{xxxx} ? ${child} =xxx? html:{xxxxxx}? ${child}=xxxx ,所以你只要在模板里面調(diào)整一下${child}的位置,就能很方便的插入標題的名字
ps:原來默認的是插入html5模板只能這么用,而且不是自動插入標題
html:5
我的可以這么用
html:5{標題}
是不是很方便,
最后說一下快捷鍵的設(shè)置
在默認設(shè)置中,大部分命令都用到的快捷鍵是這個
<c-y> ,????????? 他的意思是 按下ctrl 鍵 和 y鍵? 和? ,鍵(逗號)
但是我覺得每次都輸入那么多很麻煩,所以我寫了一個mapping,把<c-y>改成了 F2,放在.vimrc文件里面
let g:user_emmet_leader_key = '<F2>' "設(shè)置一下快捷鍵
為什么是這樣設(shè)置呢?我在這里就不說了 ,請看一下文檔就懂了,
我接下來的目標是學會了vimscript后,就開始寫一個函數(shù),讓vim檢測到文件名是.html的時候自動插入html5模板~!
好了 加油了
轉(zhuǎn)載于:https://www.cnblogs.com/tcstory/p/3403811.html
總結(jié)
- 上一篇: 【u238】暴力摩托
- 下一篇: 百度epoll