用emmet快速产生html片段

Question

我希望快速产生下面的html片段。

<ul>
    <li class="home">home</li>
    <li class="intro">intro</li>
    <li class="other">other</li>
    <li class="contact">contact</li>
</ul>

用emmet来做。
1.生成4行
home
intro
other
contact
2。进入visual模式，并选定这四行
3。ctrl+y+,  进入tag
4。输入  ul>li*
产生了

<ul>
    <li class="">home</li>
    <li class="">intro</li>
    <li class="">other</li>
    <li class="">contact</li>
</ul>

然后，再一个一个地将 home intro other contact 粘帖到class="" 里面，有无更加快速的方法？

Answer 1

可以用zencoding来快速实现，webstorm中已经集成了zencoding，可以直接使用：
http://tc9011.com/2017/01/16/...

第一种方法是这样

ul>li.home{home}+li.intro{intro}+li.other{other}+li.contact{contact}

然后按tab键就行。

第二种方法是：

ul>li*4

然后按tab后把home这些文字复制进去

Answer 2

这个直接用emmet写应该是

ul>li.home{home}+li.intro{intro}+li.other{other}+li.contact{contact}

但是这种，我在平时还是喜欢先写个简单的ul>li.x*4，然后再用多选分别选中“x”和内容（我是VSCode，就是按住Alt分别class里边和内容的位置下光标）打出四个单词。