vscode生成代码图片_VSCODE快速生成代码 和一些简单操作

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

VSCODE快速生成代码

一、快速编辑HTML代码

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

(1)输入 .box

(2)输入p#text

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

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

你好

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

href="#">

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

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

2、嵌套

(1)输入div+p

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

(3) >：子元素符号，表示嵌套的元素

+：同级标签符号

3、*分组*

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

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

**

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

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

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

二、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-