vim外掛--emmet-vim
寫html頁面,使用外掛是免不了的,純手寫html的感覺誰寫誰知道 : ) .
這裡有一個非常好用的vim外掛:emmet-vim
推薦使用pathogen.vim安裝:
cd ~/.vim/bundle
git clone https://github.com/mattn/emmet-vim.git
簡易說明:
- 新建一個html檔案後,輸入html:5,然後按control+y,再按,即可生成:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>``` --- #####基本規則: 1. E 代表HTML標籤 2. E#id 代表標籤E有id屬性 3. E.class 代表E有class屬性 4. E[attr=foo] 代表某個特定屬性 5. E{info} 代表標籤E包含的內容是info 6. E>N 代表N是E的子元素 7. E+N 代表N是E的同級元素 8. E^N 代表N是E的上級元素
舉例:
輸入p.class#id， 生成：<p id="id" class="class"></p>
輸入h1{foo}， 生成：<h1>foo</h1>
輸入h1+h2, 生成： <h1></h1>
<h2></h2>輸入img^a, 生成： <img src="">
<a href="" alt=""></a>輸入h1>h2, 生成： <h1>
<h2></h2>
</h1>輸入(.foo>h1)， 生成：<div class="foo">
<h1></h1>
</div>輸入div.item， 生成： <div class="item">
</div>
或者直接輸入 .item， 生成： <div class="item">
</div>輸入ul>li*3， 生成： <ul>
<li></li>
<li></li>
<li></li>
</ul>輸入ul>li.item$*3， 生成： <ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
----
>使用F2+,修改預設的快捷鍵:
開啟.vimrc, 輸入```let g:user_emmet_leader_key = '<F2>' "設定快捷鍵為F2+, 使用 emmet```
---
如果要限制只對html,css檔案使用的話:
```let g:user_emmet_install_global = 0
autocmd FileType html,css EmmetInstall```
---
對於vim的不同模式,可以在.vimrc有不同配置:
```let g:user_emmet_mode='n' "only enable normal mode functions.
let g:user_emmet_mode='inv' "enable all functions, which is equal to
let g:user_emmet_mode='a' "enable all function in all mode.