zenCoding是一款快速编写HTML,XML,XSL(或其他格式化语言)的编辑器插件,这个插件的实现了用缩写方式完成大量重复的书写工作。
他的核心是一个强大的缩写引擎,掌握这些缩写技巧,给我们的编写代码带来极高的编写效率。
现在主流的IDE(如:IntelliJ IDEA、VSCode、HBuilderX等)都默认支持了zenCoding,即使有一些编辑器(如:sublime Text、Notepad++等)不支持,也可以通过安装插件的方式,使其支持。
例如:p、ul等标签元素
缩写:
p
在html中写入p,按下Tab键(vscode中为自动提示),结果为:
<p></p>
缩写:
a*3
结果为:
<a href=""></a>
<a href=""></a>
<a href=""></a>
缩写:
ul>li
结果:
<ul>
<li></li>
</ul>
缩写:
h1+h2+h3
结果:
<h1></h1>
<h2></h2>
<h3></h3>
缩写:
div>span^p
结果:
<div><span></span></div>
<p></p>
p元素会向上提升一级,与div持平,允许多个 ^
:
缩写:
div>p>span^^bq
结果:
<div>
<p><span></span></p>
</div>
<blockquote></blockquote>
缩写:
div>(p>span)*3
结果:
<div>
<p><span></span></p>
<p><span></span></p>
<p><span></span></p>
</div>
缩写:
div#demo
结果:
<div id="demo"></div>
缩写:
div.demo
结果:
<div class="demo"></div>
缩写:
.demo>#box$*3
结果:
<div class="demo">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</div>
允许同时使用多个
$
缩写:
ul>li.num$$$*3
结果:
<ul>
<li class="num001"></li>
<li class="num002"></li>
<li class="num003"></li>
</ul>
可以使用
@
定义初始值
缩写:
ul>li.num$@20*3
结果:
<ul>
<li class="num20"></li>
<li class="num21"></li>
<li class="num22"></li>
</ul>
缩写:
a[id='btn' class='qwq' href='github.com']
结果:
<a href="github.com" id="btn" class="qwq"></a>
缩写:
p{text$}*3
结果:
<p>text1</p>
<p>text2</p>
<p>text3</p>
缩写:
a:link
结果:
<a href="http://"></a>
引用功能大多不常用,更多方式可自行探索。
E之前无关联元素,E默认为div
缩写:
.qqq#ppp
结果:
<div class="qqq" id="ppp"></div>
E之前有关联元素,E默认匹配相应元素
缩写:
ul>.idx$*3
结果:
<ul>
<li class="idx1"></li>
<li class="idx2"></li>
<li class="idx3"></li>
</ul>
缩写:
table>.row*2>.col*3
结果:
<table>
<tr class="row">
<td class="col"></td>
<td class="col"></td>
<td class="col"></td>
</tr>
<tr class="row">
<td class="col"></td>
<td class="col"></td>
<td class="col"></td>
</tr>
</table>
感叹号
缩写:
!
结果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
缩写:
lorem
结果:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, voluptate amet. At possimus porro molestiae tenetur dignissimos dolores minima nihil. Enim qui quo similique ratione fugiat assumenda vero aut at?
后面添加数字,代表生成单词的个数
缩写:
p>lorem3
结果:
<p>Lorem, ipsum dolor.</p>
vscode中写法如下(其他编辑器自行使用相应快捷键):
缩写:
text1
text2
text3
选中文本,按下ctrl+shift+p
打开命令窗口输入ewrap
选择Emmet:使用缩写包围个别行(Wrap Individual Lines with Abbreviation)选项
输入:
ul>li*
结果:
<ul>
<li>text1</li>
<li>text2</li>
<li>text3</li>
</ul>
缩写:
.tx>h1#txt+(span{text-$@16})*4
结果:
<div class="tx">
<h1 id="txt"></h1>
<span>text-16</span>
<span>text-17</span>
<span>text-18</span>
<span>text-19</span>
</div>