vs code 中的片段学习笔记

vs code 中的片段学习笔记

这几天一直再用vs code 编写javascript代码，突然间发现vscode中的片段功能支持Emmet。这个功能可真酷，只要写缩写后按Tab就可以完成一组代码。vscode因为继承自vsstudio，一些功能热键构被占用但基本的Emmet功能都还齐全，有兴趣的可以到Emmet官网学习

---

嵌套操作符

子级:>
缩写

div>ul>li

扩展为

<div>
    <ul>
        <li></li>
    </ul>
</div>

平级:+
缩写

div+p+bq

扩展为

<div></div>
<p></p>
<blockquote></blockquote>

上级:^
缩写

div+div>p>span+em^bq

扩展为

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

乘法:*
缩写

ul>li*5

扩展为

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

分组:()
缩写

div>(header>ul>li*2>a)+footer>p

扩展为

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

属性操作符

ID 和 CLASS
缩写

div#header+div.page+div#footer.class1.class2.class3

扩展为

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

自定义属性
缩写

td[title="Hello world!" colspan=3]

扩展为

<td title="Hello world!" colspan="3"></td>

项编号：$
缩写

ul>li.item$*5

扩展为

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

改变编号和排序
缩写

ul>li.item$@-*5

扩展为

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

内容文本：{}
缩写

a{Click me}

扩展为

<a href="">Click me</a>

假文本

缩写

ul.generic-list>lorem10.item*4

扩展为

<ul class="generic-list">
    <li class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam vero.</li>
    <li class="item">Laboriosam quaerat sapiente minima nam minus similique illum architecto et!</li>
    <li class="item">Incidunt vitae quae facere ducimus nostrum aliquid dolorum veritatis dicta!</li>
    <li class="item">Tenetur laborum quod cum excepturi recusandae porro sint quas soluta!</li>
</ul>

---

笔记就写到这了，虽然还有很多功能，就不一一列举了大家可以直接看Emmet官网文档，那里列举了所有扩展。