Basic HTML and EMMET
a minor peek into harnessing the Power of Emmet in VScode
IT development has been exponential over the years. The main reason behind this is the reusability of code.
So exactly what reusability means,
Someone writes a piece of code in any part of the world and makes it into a snippet, which in turn can be used by anyone in any part of the world, neglecting the need to write it again.
It is more flexible that we can access and make use of any specific code by just calling the name of the code, which is unique.
Emmet is such a powerful tool to increase productivity using the concept of reusability discussed above.
Many lines of code have been written and grouped as snippets. Emmet parses these snippets into full code using unique abbreviations.
Boilerplate :
On a newly opened HTML file, Just by Hitting ! and 'Enter' opens boilerplate code with a default code snippet so that we can effortlessly start coding, thanks to Emmet!
HTML Tags:
HTML has several tags that are a menace to open and close it every time we use one.
Emmet gives the flexibility to just mention the <tag > and hit 'ENTER', so it does the job and ensures the completion of the tags, providing a hassle-free experience.
Parent-child Relation:
Emmet also uses the essence of logical, nesting, and attribute operators to construct complex and repetitive code easily on the go...
The conventional method of Nesting the Tags to construct an architecture can now be now replaced with the help of Emmet.
Instance, for us to have a li under a ul just, type ul>li and hit ‘Enter'.
It gets cooler, when we can use it to chain more children to the parent tag.
If we need 5 children for a parent, ul>li*5 and 'ENTER',
if 5 children with class of "item" is needed, ul>li.item*5 and 'ENTER' .
For more, sometimes developers intend not to use the helping hand of Emmet, in such cases, a simple space after the abbreviation or tag stops Emmet from parsing the code.
This summarizes just the basics and in order to explore more use cases,
Traverse to CHEATSHEET below!