An Interest In:
Web News this Week
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
- March 13, 2024
How to boost your code speed with Emmet in VSCODE
If you code in Visual Studio Code, you may have already encountered something called Emmet. It is a powerful standard tool that you can easily increase the speed of your code, especially CSS and HTML. Here, I show you the essence of it so you can start using right away.
Snippets - HTML
Emmet can translate header+.container+footer
to
<!-- header+.container+footer --> <header></header> <div class="container"></div> <footer></footer>
Or this header>h1.title{this is a title}>footer
<!-- header>h1.title{this is a title}>footer --> <header> <h1 class="title"> this is a title <footer></footer> </h1></header>
Or this .container>.item-$*5
<!-- .container>.item-$*5 --><div class="container"> <div class="item-1"></div> <div class="item-2"></div> <div class="item-3"></div> <div class="item-4"></div> <div class="item-5"></div></div>
Or this header+ul+li^^main>footer
<!-- header+ul+li^^main>footer --> <header> <ul> <li></li> </ul></header><main></main><footer></footer>
If you create a p
element and write lorem plus a certain number, it will result in lorem paragraphs, rapidly.
<p>lorem20</p>
<!-- <p>lorem20</p> --><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos ipsum quibusdam nisi similique ex in quidem harum aut ea labore!</p>
Also, brackets are used to group elements as follows div+(div>h1>span)+footer
<!-- div+(div>h1>span)+footer --> <div></div> <div> <h1><span></span></h1> </div> <footer></footer>
You can create forms by using a snippet like this form:get>input:number.age+input:s[value='submit']
<!-- form:get>input:number.age+input:s[value='submit'] --> <form action="" method="get"> <input type="number" name="" id="" class="age" /> <input type="submit" value="submit" /> </form>
+
means adding an element after another one, e.g header+main+footer
>
means adding an element inside another one, e.g header>ul>li
^
means adding an element outside, lifting it up, e.g header>ul>li^^main
*
means multiplying element, eg div.container*3
$
means numbering elements, eg div.container$*3
.
adds a class to the element, eg div.container
#
adds an ID to the element, eg div#container
[attr]
adds an attribute to the element, eg h1[contenteditable=true class='heading']{edit me}
{}
adds a text to the element, eg h2{subtitle}
Snippets CSS
It's easy to apply using CSS, as most cases you have to write the first letter of the property followed by the value:
.box { /* w:a */ width:auto; /* w100px */ height:100px; /* df */ display:flex; /* aic*/ align-items:center; /*jcc*/ justify-content:center; /* p50 */ padding:50px; /* c#f */ color:#fff; /* bg */ background: #000; /* ffa */ font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; /* t100 */ top:100px; /*bxz*/ box-sizing: border-box; /*ovh*/ overflow:hidden;}
That's the base of Emmet, you can find the comprehensive cheatcheet here: https://docs.emmet.io/cheat-sheet/ and the site here: https://emmet.io/
I hope you find it interesting... bye bye!
Original Link: https://dev.to/leonardoschmittk/how-to-boost-your-code-speed-with-emmet-in-vscode-3jc9
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To