VSCODE快速生成代码 和一些简单操作

技术文章 1年前 (2020) 完美者
726 0

标签:自动   link   form   网上   class   width   代码块   mode   idt   

心血来潮想从网上看看大家分享的VSCODE快速生成代码的技巧  发现都不是特别全面 于是略微整理了一下

VSCODE快速生成代码

一、快速编辑HTML代码

1、添加类、id、文本和属性

(1)输入 .box

<div class="box"></div>

 

  (2)输入p#text

<p id="text"></p>

 

  (3)类和id一起输入 .box #text

<div id="box" class="text"></div>

 

  (4)元素和内容一块输出 p{你好}

<p>你好</p>

 

  (5)输出属性 a[href=#]

<a>href="#"></a>

 

(6) 给后代设置class1 ul>.calss

<ul>
    <li class="calss"></li>
</ul>

 

(7)给后代设置class2 table>.row>.col

<table>
    <tr class="row">
        <td class="col"></td>
    </tr>
</table>

 

  2、嵌套

  (1)输入div+p

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

 

 

  (2)输入ul>li*3>a

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

 

   (3) >:子元素符号,表示嵌套的元素

+:同级标签符号

3、*分组*

可以通过嵌套和括号来快速生成一些代码块(.foo>h1)+(.bar>h2)

<div class="foo">
    <h1></h1>
</div>
<div class="bar">
    <h2></h2>
</div>

  **4、定义多个带属性的元素

**

   1.输入ul>li.item$*3,代码输出

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

 

 

2.自增符$ div.class>div.class1_$*5

<div class="class">
    <div class="class1_1"></div>
    <div class="class1_2"></div>
    <div class="class1_3"></div>
    <div class="class1_4"></div>
    <div class="class1_5"></div>
</div>

 

3.自增 从某数开始 div.class>div.class1_$@3*4

<div class="class">
    <div class="class1_3"></div>
    <div class="class1_4"></div>
    <div class="class1_5"></div>
    <div class="class1_6"></div>
</div>

 

 

二、CSS缩写**

  1. 值

    比如要定义元素的宽度,只需输入w100,即可生成  

width: 100px; 

  注:除了px,也可以生成其他单位

  • p 表示%

  • e 表示 em

  • x 表示 ex


 

  2. 模糊匹配

    如果有些缩写你拿不准,Emmet会根据你的输入内容匹配最接近的语法,比如输入ov:h、ov-h、ovh和oh,生成的代码是相同的:

 

  3、供应商前缀

    如果输入非W3C标准的CSS属性,Emmet会自动加上供应商前缀,比如输入trs,则会生成:(未实现)

1` `-webkit-transform: ; ``2` `-moz-transform: ; ``3` `-ms-transform: ; ``4` `-o-transform: ; ``5` `transform: ; 

    你也可以在任意属性前加上“-”符号,也可以为该属性加上前缀。比如输入-super-foo:

1` `-webkit-super-foo: ; ``2` `-moz-super-foo: ; ``3` `-ms-super-foo: ; ``4` `-o-super-foo: ; ``5` `super-foo: ; 

如果不希望加上所有前缀,可以使用缩写来指定,比如-wm-trf表示只加上-webkit和-moz前缀:  

-webkit-transform: ; ``-moz-transform: ; ``transform: ;

  前缀缩写如下:

    w 表示 -webkit-     m 表示 -moz-     s 表示 -ms-     o 表示 -o-

文献参考:https://segmentfault.com/a/1190000018615760

https://www.cnblogs.com/ling-nl/p/10867510.html 如有侵权请私信我 立刻删除

VSCODE快速生成代码 和一些简单操作

标签:自动   link   form   网上   class   width   代码块   mode   idt   

原文地址:https://www.cnblogs.com/letfly/p/13649234.html

版权声明:完美者 发表于 2020-09-17 21:29:13。
转载请注明:VSCODE快速生成代码 和一些简单操作 | 完美导航

暂无评论

暂无评论...