页端 UI 开发提速 EMMET 的使用

环境

VsCode

使用&配置

在 .js(x) .html .tsx 文件中， VsCode的 Emmet是默认打开的，如果遇到 .js 文件不生效的情况，VsCode -> Settings 搜索 Emmet

Emmet: Include Languages 
js 后缀支持
item         value
javascript   javascriptreact

vue 后缀支持
vue-html     html

Emmet HTML 篇

以下都省略 按 Tab 键的操作，上方为用户输入，输入完按 Tab键 ，下面为 Emmet自动生成，生成的类，在 javascriptreact生成的是 className，在 html生成为 class

id

[#idName]
div#test-id 
<div id="test-id"></div>

class

[.className]
div#test-id.test-class.test-class2.test-class3.is-open.main
<div id="test-id" className="test-class test-class2 test-class3 is-open main"></div>

属性

[[属性名="属性值"]]
div[styleName="test"][attr="test"]
<div styleName="test" attr="test"></div>

子组件

[>]
div.test>div.test-item
<div className="test">
  <div className="test-item"></div>
</div>

兄弟组件

[+]
div.test>div.test-item+div.test-item-2+div.test-item-3
<div className="test">
  <div className="test-item"></div>
  <div className="test-item-2"></div>
  <div className="test-item-3"></div>
</div>

div.test+div.test-2
<div className="test"></div>
<div className="test-2"></div>

同样的组件

[*]
div.test*2>div.test-item*3
<div className="test">
  <div className="test-item"></div>
  <div className="test-item"></div>
  <div className="test-item"></div>
</div>
<div className="test">
  <div className="test-item"></div>
  <div className="test-item"></div>
  <div className="test-item"></div>
</div>

组件内文本

[{}]
div.test>div.test-item{100}*3
<div className="test">
  <div className="test-item">100</div>
  <div className="test-item">100</div>
  <div className="test-item">100</div>
</div>

顺序可变值

[$]
div.test-$*2>div.test-item-${不变的文本$}*3
<div className="test-1">
  <div className="test-item-1">不变的文本1</div>
  <div className="test-item-2">不变的文本2</div>
  <div className="test-item-3">不变的文本3</div>
</div>
<div className="test-2">
  <div className="test-item-1">不变的文本1</div>
  <div className="test-item-2">不变的文本2</div>
  <div className="test-item-3">不变的文本3</div>
</div>

组合运用

div.container>div.item*5>div.img.img-$+div.text-zone>div.title{item-$}+div.sub{sub-$}
<div className="container">
  <div className="item">
    <div className="img img-1"></div>
    <div className="text-zone">
      <div className="title">item-1</div>
      <div className="sub">sub-1</div>
    </div>
  </div>
  <div className="item">
    <div className="img img-2"></div>
    <div className="text-zone">
      <div className="title">item-2</div>
      <div className="sub">sub-2</div>
    </div>
  </div>
  <div className="item">
    <div className="img img-3"></div>
    <div className="text-zone">
      <div className="title">item-3</div>
      <div className="sub">sub-3</div>
    </div>
  </div>
  <div className="item">
    <div className="img img-4"></div>
    <div className="text-zone">
      <div className="title">item-4</div>
      <div className="sub">sub-4</div>
    </div>
  </div>
  <div className="item">
    <div className="img img-5"></div>
    <div className="text-zone">
      <div className="title">item-5</div>
      <div className="sub">sub-5</div>
    </div>
  </div>
</div>

Emmet CSS 篇

Emmet对 CSS的支持主要表现在缩写上

w30
width: 30px;
w30p
width: 30%;
h30vw
height: 30vw;
mr20rem
margin-right: 20rem;
pt20pt
padding-top: 20pt;
fz12vh
font-size: 12vh;
fw300
font-weight: 300;
bgi
background-image: url();
bgz
background-size: contain;
df
display: flex;
dib
display: inline-block;
jcc
justify-content: center;
aic
align-items: center;

....

更多的不列举了，反正善用工具，能提升很多开发速度