Page side UI development speeds up the use of EMMET

The environment

VsCode

Using & configuration

In.js(x).html.tsx, VsCode Emmet is turned on by default. If the.js file does not take effect, VsCode -> Settings searches for Emmet

Emmet: Include Languages JS suffix item value javascript javascriptreact vue Suffix vuE-html HTMLCopy the code

Emmet HTML report

After typing, press Tab. The generated class is automatically generated by Emmet. Javascriptreact generates a className and HTML generates a class

id

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

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>
Copy the code

attribute

[[attribute name = "attribute value"]] div [styleName = "test"] [attr = "test"] < div styleName = "test" attr = "test" > < / div >Copy the code

Child components

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

Brother components

[+] 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>Copy the code

Same component

[*]
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>
Copy the code

Intra-component text

[{}]
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>
Copy the code

Sequential variable value

[$] div.test-$*2>div.test-item-${constant text $}*3 <div className="test-1"> <div className="test-item-1"> Constant text 1</div> <div ClassName ="test-item-2"> invariant text 2</div> <div className="test-item-3"> invariant text 3</div> </div> <div className="test-2"> <div </div> <div className="test-item-1"> Invariant text 1</div> <div className="test-item-2"> Invariant text 3</div>  </div>Copy the code

Combination to use

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>Copy the code

Emmet CSS article

Emmet’s support for CSS is mainly in abbreviations

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; .Copy the code

I don’t need to list more, but using tools can speed up a lot of development