在vim中使用zencoding/Emmet

zencoding在vim上的插件已經更名爲Emmet.vimphp

1. 安裝,推薦使用vundle插件管理器安裝,在~/.vimrc中,添加:Bundle ‘Emmet.vim’,輸入命令vim +BundleInstall +qall 便可完成安裝;git

    我的vim配置:https://www.github.com/lozybean/myVimConfig.gitgithub

2. 經常使用的縮略詞:vim

    # 添加一個id屬性;post

    . 添加一個class屬性;插件

    > 添加一個下級標籤;orm

    + 添加一個平行標籤;blog

    [] 添加屬性具體值;get

    {} 添加標籤中顯示的內容;input

    * 添加連續的相同標籤;

    $ 添加遞增的數字,$$表示兩位數字等;

    () 用來改變優先級順序,默認縮略詞組合優先級爲  +  比  > 高,經過()的做用就像四則運算改變優先級同樣。

3. 一個示例,《細說PHP》p313 的縮略詞組合:

form[method=post][action=viewthread.php][target=_blank]>h2[align=center]{發表文章演示}+(div[style="width:200;float:left"]>h5{選項}+(ul[style="list-style:none;margin:0px;padding:0px"]>li*9>input[type=checkbox][name="parse[]"][value=$$]))+div[style="width:300;float:left"]>(h5{標題}>input[type=text][name=subject][size=50])+(h5{內容}>textarea[rows=7][cols=50][name=message])+input[type=submit][name=replysubmit][value="發表帖子"]

NewImage

因爲屬性比較多,寫出來會比較長,可是裏面用到了很是多的縮略詞方法,將光標移動到最後(仍然在插入模式下),按下control+y,而後再按 , 按鍵,將縮略詞展開:

NewImage

4. 多行選取:vim中多行選取後再展開,會提示輸入縮略詞,而後將選中的多行展開,若是使用*(若是縮略詞比較複雜,包含屬性等,則將*放到最後),則會講每一行的內容分別放到標籤中,不然會把整個內容放到一個標籤中。

    多行選取貌似對input標籤無效,或者是對單標籤無效,求驗證。

5. 經常使用的編輯命令,用<c-y>表示control+y,命令實現的模式都是<c-y>,而後再按一個按鍵的方式實現:

    <c-y> + , : 展開縮略詞

    <c-y> + n : 移動光標到下一個編輯點

    <c-y> + N : 移動光標到上一個編輯點

    <c-y> + d : 選中整個標籤(visual模式)

    <c-y> + D : 選中標籤中的內容  (visual模式)

    <c-y> + / : 註釋一個標籤

    <c-y> + k : 移除一個標籤

相關文章
相關標籤/搜索