15621857753

webstorm中emmet/ZenCoding的安装方法和快捷键命令

来源:齐鲁CMS 栏目:其他 阅读: 日期:2020-09-23

webstorm中emmet ZenCoding的安装方法和快捷键命令

PS:ZenCoding为emmet的前身。

emmet,emmet快捷键

webstorm中emmet的安装方法:

1)打开【文件】,进入【设置】

2)找到【插件】,在里面搜索emmet,然后点击右边的【安装】就可以了。

PS:小编截图时已经安装过了,所以没有显示【安装】按钮。

webstorm中emmet的快捷键命令:tab

使用方法举例:

! + tab = 生成html5结构(或者是html:5+ tab)
 
.abc$*3 + tab =  (id等同理,将.改成#)
 
<div class="abc1"></div>
<div class="abc2"></div>
<div class="abc3"></div>
 
ul.myclass>(li>a[href="#"]{我是链接$})*5 +tab =
 
<ul class="myclass">
      <li><a href="#">我是链接1</a></li>
      <li><a href="#">我是链接2</a></li>
      <li><a href="#">我是链接3</a></li>
      <li><a href="#">我是链接4</a></li>
      <li><a href="#">我是链接5</a></li>
 </ul>
其中[]为设置属性。
 
h200 + tab = 
 
height: 200px;
 
tac + tab = 
 
text-align: center;
 
bd+ +  tab = 
 
border: 1px solid #000;