vim

首页 - Linux - Vim

Zen Coding使用小记

基本概况

Zen Coding是横扫各大小编辑器的快速编码插件，其使用类CSS选择器的语法实现扩展性编码，确实够酷、够快

Vim的编辑速度本就是其他编辑器望尘莫及的，常规情况下再加上snipMate，编辑网页时使用Zen Coding，有了这两大插件，可谓如虎添翼

尽管Zen Coding善于编辑网页，但其应用范围并不仅限于网页，你可以自行修改以适用于其他标记类语言

安装方法

安装非常简单，只需下载其Vim版本，解压后丢到vimfiles目录即可，这儿就不再赘述了

Zen Coding在Vim下的默认触发键是Ctrl + Y + ,（注意，最后还有一个逗号）

调用规则

1、单个元素：div

 

  

   

    view source
    

    print
    ?
   
  
  

   

    
1
<div></div>
   
  
 

2、带id的元素，使用#号：div#name

 

  

   

    view source
    

    print
    ?
   
  
  

   

    
1
<div id="name"></div>
   
  
 

3、带class的元素，使用点号（.）：div.header

 

  

   

    view source
    

    print
    ?
   
  
  

   

    
1
<div class="header"></div>
   
  
 

4、id与class是可以同时使用的，如果class名中含多个单词，可以使用点号（.）进行连接：div#name.header.one

 

  

   

    view source
    

    print
    ?
   
  
  

   

    
1
<div class="header one" id="name"></div>
   
  
 

5、子元素使用大于号（>），子元素的子元素可以连写：div>p>h1

 

  

   

    view source
    

    print
    ?
   
  
  

   

    
1
<div>
   
   

    
2
    <p>
   
   

    
3
        <h1></h1>
   
   

    
4
    </p>
   
   

    
5
</div>
   
  
 

6、同级兄弟元素使用加号（+），可以使用括号避免歧义：div>p>(h1+h2)

 

  

   

    view source
    

    print
    ?
   
  
  

   

    
1
<div>
   
   

    
2
    <p>
   
   

    
3
        <h1></h1>
   
   

    
4
        <h2></h2>
   
   

    
5
    </p>
   
   

    
6
</div>
   
  
 

7、多项相同的元素，使用星号（*）：ul>li*5

 

  

   

    view source
    

    print
    ?
   
  
  

   

    
1
<ul>
   
   

    
2
    <li></li>
   
   

    
3
    <li></li>
   
   

    
4
    <li></li>
   
   

    
5
    <li></li>
   
   

    
6
    <li></li>
   
   

    
7
</ul>
   
  
 

8、带有序号的元素，使用美元符（$），从1开始自动递增：div>p#id$*5

 

  

   

    view source
    

    print
    ?
   
  
  

   

    
1
<div>
   
   

    
2
    <p id="id1"></p>
   
   

    
3
    <p id="id2"></p>
   
   

    
4
    <p id="id3"></p>
   
   

    
5
    <p id="id4"></p>
   
   

    
6
    <p id="id5"></p>
   
   

    
7
</div>
   
  
 

9、如果需要指定序号的位数，只须多写几个美元符（$）即可：div>p#id$$$*5

 

  

   

    view source
    

    print
    ?
   
  
  

   

    
1
<div>
   
   

    
2
    <p id="id001"></p>
   
   

    
3
    <p id="id002"></p>
   
   

    
4
    <p id="id003"></p>
   
   

    
5
    <p id="id004"></p>
   
   

    
6
    <p id="id005"></p>
   
   

    
7
</div>
   
  
 

常用缩写

1. html:4t：传统的HTML4.01模板
2. html:5：HTML5模板
3. style：样式标签
4. script：脚本标签
5. link：link标签
6. a：链接标签

更多用法可以自行查看/vimfiles/autoload/zencoding.vim文件