vscode关于前端的一些技巧

学习视频链接：【前端经典】vscode标签快捷操作，vscode快捷键，vscode教程，网页设计与制作，前端

添加open in browser （在vscode中打开浏览器，快捷键“Alt+B”）

直接写类名或者id名生成元素

• .yas+回车得到：<div class="yas"></div>
• #myid+回车得到<div id="myid"></div>

元素名+类名/id名生成对应元素

ul.ys得到   <ul class="ys"></ul>

ul#myid得到 <ul id="id"></ul>

button#mybtn得到<button id="mybtn"></button>

加号生成多个同级元素

• .yas+.ybs+.ycs+回车得到：

<div class="yas"></div>

<div class="ybs"></div>

<div class="ycs"></div>

生成多个嵌套元素

.ysa>.ysb得到

    <div class="ysa">

        <div class="ysb"></div>

    </div>

.ysa>.ysb>ul>li得到

<div class="ysa">

    <div class="ysb">

        <ul>

            <li></li>

        </ul>

    </div>

</div>

生成多个同类型元素

.ysa*5得到

<div class="ysa"></div>

<div class="ysa"></div>

<div class="ysa"></div>

<div class="ysa"></div>

<div class="ysa"></div>

ul>li*5得到

<ul>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

</ul>

括号成元素组，实现多个组的生成

ul>(li>a)*3

效果是：

    <ul>

        <li><a href=""></a></li>

        <li><a href=""></a></li>

        <li><a href=""></a></li>

    </ul>

同级与嵌套元素的混合

div+(div>ul>li*3）+button

效果：

<div></div>

<div>

    <ul>

        <li></li>

        <li></li>

        <li></li>

    </ul>

</div>

<button></button>

选中多行同时编辑内容：ctrl+alt+方向键

但是要先生成多个标签，再选中多个标签

shift+alt+方向键，可以复制光标当前行

ctrl+x删除光标当前行（当同时使用即删除）

ctrl+回车是向下加空行，ctrl+shift+回车是向上加空行

• 多行同时缩进，鼠标选中内容，tab或者tab+shift

未完待续......