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.testdiv.test-item
div className="test"
  div className="test-item"/div
/div
Copy the code

Brother components

[+] div.testdiv.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"/divCopy the code

Same component

[*]
div.test*2div.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.testdiv.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-$*2div.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  /divCopy the code

Combination to use

div.containerdiv.item*5div.img.img-$+div.text-zonediv.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 /divCopy 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