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,再按,即可生成:
 
 
 
   
    
 
 

 
 ```

---
#####基本规则:
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, 生成:

  • 输入h1{foo}, 生成:

    foo

  • 输入h1+h2, 生成:


              

  • 输入img^a, 生成:
              

  • 输入h1>h2, 生成:


                  


             

  • 输入(.foo>h1), 生成:


                    


               

  • 输入div.item, 生成:


                

    或者直接输入 .item, 生成:

                

  • 输入ul>li*3, 生成:


                      

    •                 

    •                 

    •              

  • 输入ul>li.item$*3, 生成:


                       

    •                   

    •                   

    •                

----
>使用F2+,修改默认的快捷键:
打开.vimrc, 输入```let g:user_emmet_leader_key = '' "设置快捷键为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.

你可能感兴趣的:(vim插件--emmet-vim)